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

 更新时间:2018年08月14日 11:49:42   作者:Condee  
这篇文章主要给大家介绍了关于JS中'hello'与new String('hello')引出的问题的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧

定义一个字符串

在工作中我们大概有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.第三种是 包装对象,

栈中储存堆指针,

堆中储存内容。

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

哈哈哈哈哈哈哈哈。

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

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

有什么区别等等。

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

相关文章

  • js延迟加载的6种方式实例总结

    js延迟加载的6种方式实例总结

    js的延迟加载有助与提高页面的加载速度,下面这篇文章主要给大家介绍了关于js延迟加载的6种方式,文中通过图文介绍的非常详细,对大家学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-04-04
  • JavaScript使用canvas绘制随机验证码

    JavaScript使用canvas绘制随机验证码

    这篇文章主要为大家详细介绍了JavaScript使用canvas绘制随机验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • 浅谈es6中export和export default的作用及区别

    浅谈es6中export和export default的作用及区别

    下面小编就为大家分享一篇浅谈es6中export和export default的作用及区别,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 微信小游戏中three.js离屏画布的示例代码

    微信小游戏中three.js离屏画布的示例代码

    这篇文章主要介绍了微信小游戏中three.js离屏画布的示例代码,主要是用three.js结合cannon.js写个3D小游戏,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2020-10-10
  • ECMAScript中函数function类型

    ECMAScript中函数function类型

    这篇文章主要介绍了ECMAScript中函数function类型的相关资料,需要的朋友可以参考下
    2015-06-06
  • 根据分辨率不同,调用不同的css文件

    根据分辨率不同,调用不同的css文件

    根据分辨率不同,调用不同的css文件...
    2006-07-07
  • javascript表单验证大全

    javascript表单验证大全

    JavaScript是用来在数据被传输到服务前对html表单中输入的数据进行验证,使用javascript对用户输入的信息进行验证是项目必须的,下面小编给大家整理一些比较常用的javascript表单验证,需要的朋友可以参考下
    2015-08-08
  • 微信小程序如何处理token过期问题

    微信小程序如何处理token过期问题

    最近再做个项目,需要检查token过期,跳转到登录页面,要求用户重新登录,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 详解JavaScript状态容器Redux

    详解JavaScript状态容器Redux

    Redux官网上是这样描述Redux,Redux is a predictable state container for JavaScript apps.(Redux是JavaScript状态容器,提供可预测性的状态管理)。目前Redux GitHub有5w多star,足以说明 Redux 受欢迎的程度
    2021-06-06
  • echarts中在柱状图上方显示文字的示例代码

    echarts中在柱状图上方显示文字的示例代码

    这篇文章给大家介绍了在echarts中如何在柱状图上方显示文字,文中给出了完整的示例代码,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-01-01

最新评论