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与Prototype并存的冲突的解决方法
Aug 29 Javascript
利用jQuery 实现GridView异步排序、分页的代码
Feb 06 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 Javascript
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 Javascript
JS+Canvas实现五子棋游戏
Aug 26 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
帅气的琦玉老师
2020/03/02 日漫
在PHP中使用灵巧的体系结构
2006/10/09 PHP
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
2017/09/12 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
Django rest framework实现分页的示例
2018/05/24 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
基于python实现学生信息管理系统
2019/11/22 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
财务会计专业毕业生自荐信
2013/10/19 职场文书
水果连锁超市创业计划书
2014/01/24 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
兴趣小组活动总结
2014/05/05 职场文书
优秀少先队员主要事迹材料
2014/05/28 职场文书
自荐信格式模板
2015/03/27 职场文书
检讨书范文大全
2015/05/07 职场文书
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers