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获取当前ip的代码
May 10 Javascript
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
Angular表格神器ui-grid应用详解
Sep 29 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 Javascript
Vue+abp微信扫码登录的实现代码示例
Jan 06 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 Javascript
微信小程序实现点击页面出现文字
Sep 21 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常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
php调用dll的实例操作动画与代码分享
2012/08/14 PHP
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
页面中iframe相互传值传参
2009/12/13 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
Python字符串和文件操作常用函数分析
2015/04/08 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
python处理按钮消息的实例详解
2017/07/11 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
Python PIL库图片灰化处理
2020/04/07 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
省级四好少年事迹材料
2014/01/25 职场文书
校长先进事迹材料
2014/02/01 职场文书
房屋租赁协议书
2014/04/10 职场文书
学校安全生产承诺书
2014/05/23 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
个人租房协议书范本
2014/09/30 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
担保书范文
2015/01/20 职场文书
事业单位岗位说明书
2015/10/08 职场文书