JS中‘hello’与new String(‘hello’)引出的问题详解


Posted in Javascript onAugust 14, 2018

定义一个字符串

在工作中我们大概有3种方法去定义一个字符串:

1. var str = 'hello';
2. var str1 = String('hello');
3. var str2 = new String('hello');

(下文直接会带 以上三个变量....)

这三种方法定义出来的 'hello',都有自己的属性 例如lengh,有自己的方法例如: indexOf(),在日常工作定义中也没有感觉到任何的不同。

那是否深入过,

1.这三种方式定义出来的'hello',是否是一样的呢?

2.为什么基本类型可以直接调用其对应的方法呢?

这三种方式定义出来的'hello',是否是一样的呢?

console.log(str === str1) //true
console.log(str === str2) //false
console.log(str1 === str2) //false

我们可以发现 最后一种方式定义的 与上面两种方式定义的 不相等。

???

首先我们知道一个东西 就是:

new 出来的一定是对象。

所以分别 打出三个的类型:

console.log(typeof str) //string
console.log(typeof str1) // string
console.log(typeof str2) //object

所以这也就是为什么不会严格相等的原因。

引出数据类型 与 堆栈之间的关系

尝试深入理解原因:

我们知道,String,Number,Boolean在JS中是基本类型,基本类型是存储在栈(stack)内存中的,数据大小确定,内存空间大小可以分配。

而引用类型是存储在堆(heap)内存中的,例如对象, 栈中存在的仅仅是一个堆的指针,这也就是我们日常遇到 a = {num:1}, b=a, b.num1 = 2, 那么a.num1 也为2 的原因。因为a,b同时指向同一个地址。

前两种方式定义出来的是在栈中并且值相等,而第三种方法定义出来的仅仅是栈中的一个指针。

所以这也是为什么 三种方式定义出来的不一样。

为什么基本类型可以直接调用其对应的方法呢?

尝试:

console.log(str.length) // 5
str.say = 'world'
console.log(str.say) //undefined

 console.log(str1.lengh) // 5
str1.say = 'world'
console.log(str1.say) //undefined

console.log(str2.lengh) // 5
str2.say = 'world'
console.log(str.say) //world

引出包装对象和原始资料类型

我们发现第一种第二种方式均可访问lengh属性,

但是为什么我们并不能自定义一个属性并进行访问?

数字、字符串、布尔三者,在JS中称为原始的(primitives)资料类型,而 new String(), new Number() 就是包装对象。

包装对象也是对象。

这也就是为什么 我们打印 三种类型分别为 : string(原始资料类型) , string(原始资料类型) , object(包装对象).

我们可以理解 new 出来的 str2 对象有 String 的一系列方法

console.log(str2.indexOf === String.prototype.indexOf) // true

那尝试一下 第一种第二种方法 是否有同样的true?

console.log(str.indexOf === String.prototype.indexOf) //true
console.log(str1.indexOf === String.prototype.indexOf) //true

但是:

str instanceof String // false
str1 instanceof String // false

str 又 不属于String 却拥有 String 的方法?????

因为:

这是JS中的设计。

这是JS中的设计。

这是JS中的设计。

原始资料类型的方法与属性是"借"来的

一个原始的资料类型值,并没有如对象会有属性或方法,

原始的资料类型在运算时用的属性与方法,是向包装对象"借来"的用的,

所以原始资料类型是可以向 new String() 或者 new Number() 借来所有的方法。但是自己本身却没有属性和方法。

所以这也就是为什么第一种第二种我们无法去自定义属性却可以使用对应类型的方法的原因

总结:

1.第一种和第二种方法定义出来的是原始资料类型

并储存于栈中,

并向包装对象(new ..())借来方法和属性.

2.第三种是 包装对象,

栈中储存堆指针,

堆中储存内容。

所以这也是发生一系列看似不正常但是又正常的事情的原因,

哈哈哈哈哈哈哈哈。

当然还有很多的东西,既然牵扯到了堆栈,

那么又不得不了解一下堆栈到底是什么,

有什么区别等等。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
完整显示当前日期和时间的JS代码
Sep 17 Javascript
js+CSS 图片等比缩小并垂直居中实现代码
Dec 01 Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 Javascript
AngularJS实现网站换肤实例
Feb 19 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
Vue.js单向绑定和双向绑定实例分析
Aug 14 #Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 #Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 #jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 #jQuery
layui的table单击行勾选checkbox功能方法
Aug 14 #Javascript
解决layui 复选框等内置控件不显示的问题
Aug 14 #Javascript
深入浅析Node环境和浏览器的区别
Aug 14 #Javascript
You might like
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
PHP中的替代语法简介
2014/08/22 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
JS实现下拉菜单赋值到文本框的方法
2015/08/18 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
express框架中使用jwt实现验证的方法
2019/08/25 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
Python中使用HTMLParser解析html实例
2015/02/08 Python
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
python将ansible配置转为json格式实例代码
2017/05/15 Python
python使用KNN算法手写体识别
2018/02/01 Python
分析Python读取文件时的路径问题
2018/02/11 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
python实现石头剪刀布小游戏
2021/01/20 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
python word转pdf代码实例
2019/08/16 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
周年庆典邀请函范文
2014/01/23 职场文书
校长先进事迹材料
2014/02/01 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
环卫处个人工作总结
2015/03/04 职场文书
三方合作意向书范本
2015/05/09 职场文书
新郎婚礼致辞
2015/07/27 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
导游词之山海关
2019/12/10 职场文书
基于Python实现流星雨效果的绘制
2022/03/18 Python