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 相关文章推荐
jQuery示例收集
Nov 05 Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
JavaScript实现的链表数据结构实例
Apr 02 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
详解js界面跳转与值传递
Nov 22 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
bootstrap导航、选项卡实现代码
Dec 28 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
使用vue构建多页面应用的示例
Oct 22 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常用函数小技巧
2008/09/11 PHP
PHP Reflection API详解
2015/05/12 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
jquery固定底网站底部菜单效果
2013/08/13 Javascript
当达到输入长度时表单自动切换焦点
2014/04/06 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
Python实现自动发送邮件功能
2021/03/02 Python
python正则表达式面试题解答
2020/04/28 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
对Django外键关系的描述
2019/07/26 Python
python制作朋友圈九宫格图片
2019/11/03 Python
Python 日期与时间转换的方法
2020/08/01 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
应用电子专业学生的自我评价
2013/10/16 职场文书
人事代理委托书
2014/09/27 职场文书
公民授权委托书
2014/10/15 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
JavaScript 原型与原型链详情
2021/11/02 Javascript