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定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 Javascript
自学实现angularjs依赖注入
Dec 20 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 Javascript
Array.filter中如何正确使用Async
Nov 04 Javascript
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
如何把PHP转成EXE文件
2006/10/09 PHP
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
php的字符串用法小结
2010/06/08 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
jQuery live
2009/05/15 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
一个简单的python程序实例(通讯录)
2013/11/29 Python
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
Python使用filetype精确判断文件类型
2017/07/02 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
俄罗斯商务邀请函
2014/01/26 职场文书
聊城大学毕业生自荐书
2014/02/01 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
能源工程专业应届生求职信
2014/03/01 职场文书
党组织公开承诺书
2014/03/29 职场文书
竞选村长演讲稿
2014/04/28 职场文书
工程售后服务方案
2014/06/08 职场文书
生物工程专业求职信
2014/09/03 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
保安2014年终工作总结
2014/12/06 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
旅游安全责任协议书
2016/03/22 职场文书
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android