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 相关文章推荐
利用Ext Js生成动态树实例代码
Sep 08 Javascript
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
为原生js Array增加each方法
Apr 07 Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
JS中的多态实例详解
Oct 15 Javascript
基于Vue的ajax公共方法(详解)
Jan 20 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
vue实现简单计算商品价格
Sep 14 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 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 会话(session 时间设定)使用入门代码
2008/06/05 PHP
PHP生成带有雪花背景的验证码
2008/09/28 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
解析window.open的使用方法总结
2013/06/19 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
Fullpage.js固定导航栏-实现定位导航栏
2016/03/17 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
Vue+Vux项目实践完整代码
2017/11/30 Javascript
vue elementui form表单验证的实现
2018/11/11 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
Python程序中的观察者模式结构编写示例
2016/05/27 Python
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
土木工程毕业生推荐信
2013/10/28 职场文书
教师对学生的寄语
2014/04/03 职场文书
暑期家教宣传单
2015/07/14 职场文书
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js