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 相关文章推荐
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
Nov 24 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
基于JS实现的随机数字抽签实例
Dec 08 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 Javascript
js前端图片加载异常兜底方案
Jun 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循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
jquery 插件开发备注
2010/08/27 Javascript
页面加载完毕后滚动条自动滚动一定位置
2014/02/20 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
JS & JQuery 动态添加 select option
2016/06/08 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
Python的Flask框架中web表单的教程
2015/04/20 Python
Python Matplotlib库入门指南
2015/05/18 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
Python中的 enum 模块源码详析
2019/01/09 Python
python实现井字棋小游戏
2020/03/04 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
基于python实现计算两组数据P值
2020/07/10 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
物业管理个人自我评价
2013/11/08 职场文书
40岁生日感言
2014/02/15 职场文书
抽奖活动主持词
2014/03/31 职场文书
房屋转让协议书
2014/04/11 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
五年级学生评语大全
2014/12/26 职场文书
同学会邀请函模板
2015/01/30 职场文书