深入理解JavaScript中为什么string可以拥有方法


Posted in Javascript onMay 24, 2016

引子

我们都知道,JavaScript数据类型分两大类,基本类型(或者称原始类型)和引用类型。

基本类型的值是保存在栈内存中的简单数据段,它们是按值访问的。JS中有五种基本类型:Undefined、Null、Boolean、Number和String。

引用类型的值是保存在堆内存中的对象,它的值是按引用访问的。引用类型主要有Object、Array、Function、RegExp、Date。

对象是拥有属性和方法的,所以我们看到下面这段代码一点也不奇怪.

var favs=['鸡蛋','莲蓬'];
favs.push('秋葵');
console.log(favs);//["鸡蛋", "莲蓬", "秋葵"]
console.log(favs.length);//3

Array是引用类型,所以它自然可以拥有属性(length)和方法(push),这天经地义地就像夏天一定要吃冰淇淋一样。但是,再看下面的代码,仔细想想,这这这,合法吗?

var realMessage="Said I love you but I lied";
var myMessage=realMessage.substring(5,15);
console.log(myMessage); //"I love you"

有一个心碎的女纸任性地对一个用来分手的字符串任性地执行了“substring”方法,然后开心地看着剪辑版睡过去了。可是可是可是,不是说string是基本类型吗,为什么它可以拥有方法??还有没有王法啊青天大老爷!

其实,这一切,都是因为有个叫“基本包装类型”的东东。这个基本包装类型特别耿直,是真正的“事了拂衣去,深藏功与名”!

基本包装类型

除了一开始提到的Object、Array等引用类型,JavaScript还为我们提供了三种特殊的引用类型:String、Number和Boolean,方便我们操作对应的基本类型。

继续看上面的剪辑字符串的例子,有没有注意到,尽管使用了substring方法,realMessage本身的值是不会变的,调用这个方法只是返回了一个新的字符串。

这就是基本包装类型的作用了。本来你是没有方法的,但是你想用方法的时候,你尽管调,对应的基本包装类型有这个方法就行。例如上面的substring方法,string这个基本类型是不可能有这个方法的,但是String这个包装类型有啊,它会吭吭哧哧地把这个方法执行完把结果返回。在执行到:

realMessage.substring(5,15)这行代码时,发生了很多事。

首先,它会从内存中读取realMessage的值。当处于这种读取模式下的时候,后台就开始干活了。JS高程是这样描述后台完成的这些动作的:

1.创建String类型的一个实例;

2.在实例上调用指定的方法;

3.销毁这个实例

上面的例子可以用这样的代码来说明:

var _realMessage=new String("Said I love you but I lied");
var myMessage=_realMessage.substring(5,15);
_realMessgae=null; //方法调用后即销毁

所以,这样我们就明白了,并不是基本类型string执行了自身方法,而是后台为它创建了一个对应的基本包装类型String,它根据基本类型的值实例化出了一个实例,让这个实例去调用指定方法,最后销毁自己,感天动地有木有。

注意最后一步基本包装类型“会销毁”的特性,这决定了我们不能为基本类型值添加自定义属性和方法。

var me="sunjing";
me.age=18;
console.log(me.age);//undefined

我给“me“这个字符串添加了age属性,值设为美好的18岁,然并卵,再次访问时,这个属性已经渺无踪迹了。这是因为:

执行到第二行代码属性赋值时,后台创建了一个基本包装类型的实例,这个age属性确实挂到实例上去了,但是紧跟着,这个实例就被销毁了。执行到第三行时,又重新创建了新的基本包装类型的实例,自然是没有age属性的。

显示使用基本包装类型

除了在字符串处于读取模式下,后台会帮我们创建基本包装类型实例时,我们自己也可以显示地创建。

var str=new String("hello");
var str2=str.toUpperCase();
console.log(str2);//"HELLO:

这样与后台帮我们创建时变量中保存的东西是不同的。

var str1=new String("hello");
var str2="hello";
typeof str1 //"object"
typeof str2 //"string"

总结

多亏了有基本包装类型,我们操作string、boolean、number这三种基本类型更方便了。每当读取这三种基本类型值时,后台会创建对应的包装类型实例,这个实例会调用指定方法,调用完会被销毁。这种短暂的生命周期决定了我们不能为基本类型添加自定义的属性和方法。

以上这篇深入理解JavaScript中为什么string可以拥有方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
懒加载实现的分页&&网站footer自适应
Dec 21 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
Angular2库初探
Mar 01 Javascript
vue实现2048小游戏功能思路详解
May 09 Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 Javascript
JS函数本身的作用域实例分析
Mar 16 Javascript
JavaScript展开运算符和剩余运算符的区别详解
Feb 18 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 #Javascript
JavaScript程序中的流程控制语句用法总结
May 23 #Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 #Javascript
谈一谈bootstrap响应式布局
May 23 #Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 #Javascript
JavaScript的Vue.js库入门学习教程
May 23 #Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 #Javascript
You might like
VOLVO车载收音机
2021/03/02 无线电
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
BootStrap中
2016/12/10 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
Python算法之栈(stack)的实现
2014/08/18 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
python多任务之协程的使用详解
2019/08/26 Python
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
素食餐饮项目创业计划书
2014/02/02 职场文书
作风建设演讲稿
2014/05/23 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
2014年医生工作总结
2014/11/21 职场文书
支行行长岗位职责
2015/02/15 职场文书
六年级作文之家庭作文
2019/12/12 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python