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中令你抓狂的魔术变量
Nov 30 Javascript
js最简单的拖拽效果实现代码
Sep 24 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
May 08 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
了解JavaScript表单操作和表单域
May 27 Javascript
vue实现按需加载组件及异步组件功能
May 27 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 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 高手之路(三)
2006/10/09 PHP
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
解决 FireFox 下[使用event很麻烦] 的问题.
2006/08/22 Javascript
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
python3 tkinter实现添加图片和文本
2019/11/26 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
python使用Geany编辑器配置方法
2020/02/21 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
移动通信行业实习自我鉴定
2013/09/28 职场文书
粗加工管理制度
2014/02/04 职场文书
初中学习计划书范文
2014/09/15 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
2014年办公室人员工作总结
2014/12/09 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书
Python+Appium新手教程
2021/04/17 Python
JavaScript原型链详解
2021/11/07 Javascript
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers