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 相关文章推荐
javascript Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
JavaScript使用循环和分割来替换和删除元素实例
Oct 13 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
最佳的JavaScript错误处理实践
Jul 16 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
深入理解js中的加载事件
Feb 08 Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
详解Webpack多环境代码打包的方法
Aug 03 Javascript
JS为什么说async/await是generator的语法糖详解
Jul 11 Javascript
vue $router和$route的区别详解
Dec 02 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
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
PHP使用HTML5 FormData对象提交表单操作示例
2019/07/02 PHP
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
javascript document.compatMode兼容性
2010/02/23 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
javascript模拟命名空间
2015/04/17 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
python获取从命令行输入数字的方法
2015/04/29 Python
Python映射拆分操作符用法实例
2015/05/19 Python
Python的Flask框架中SQLAlchemy使用时的乱码问题解决
2015/11/07 Python
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
pycharm修改file type方式
2019/11/19 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
大学生自我鉴定书
2014/03/24 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
事业单位考察材料范文
2014/12/25 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
生日祝酒词大全
2015/08/10 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
python面向对象版学生信息管理系统
2021/06/24 Python
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python