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

引子

我们都知道，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可以拥有方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript String 对象常用方法总结

    字符串是不可变的.字符串方法,不会改变原有字符串的内容,而是返回一个新字符串. charAt():返回在指定位置的字符. concat():连接两个字符串文本,并返回一个新的字符串. indexOf():indexOf() 方法返回指定值在字符串对象中首次出现的位置. match():使用正则表达式与字符串相比较. replace():被用来在正则表达式和字符串直接比较,然后用新的子串来替换被匹配的子串. slice():摘取一个字符串区域,返回一个新的字符串. split():通过分离字符串成

  • JS中JSON对象和String之间的互转及处理技巧

    JSON:JavaScript 对象表示法(JavaScript Object Notation),其实JSON就是一个JavaScript的对象(Object)而已. 如有不清楚JSON,可以去w3cschool了解http://www.w3school.com.cn/json/ 1.在javascript中新建一个字符串(JSON文本). var txt = '{ "employees" : [' + '{ "firstName":"Bill"

  • JS简单实现String转Date的方法

    本文实例讲述了JS简单实现String转Date的方法.分享给大家供大家参考,具体如下: <script> var s=["2008-8-1","2009/9/2","10/3/2010"]; for(var i=0;i<s.length;i++){ var d = string2date(s[i]); var year = d.getFullYear(); var month = d.getMonth()+1; var dat

  • JavaScript String 对象常用方法详解

    字符串是不可变的.字符串方法,不会改变原有字符串的内容,而是返回一个新字符串. charAt():返回在指定位置的字符. concat():连接两个字符串文本,并返回一个新的字符串. indexOf(): indexOf() 方法返回指定值在字符串对象中首次出现的位置. match(): 使用正则表达式与字符串相比较. replace(): 被用来在正则表达式和字符串直接比较,然后用新的子串来替换被匹配的子串. slice(): 摘取一个字符串区域,返回一个新的字符串. split(): 通过分

  • js字符串截取函数slice、substring和substr的比较

    在js中字符截取函数有常用的三个slice().substring().substr()了,下面我来给大家介绍slice().substring().substr()函数在字符截取时的一些用法与区别吧. 取字符串的三个函数:slice(start,[end]),substring(start,[end])和substr(start,[length]) 相关属性: slice() 第一个参数代表开始位置,第二个参数代表结束位置的下一个位置,截取出来的字符串的长度为第二个参数与第一个参数之间的差;若

  • JS 对象(Object)和字符串(String)互转方法

    利用原生JSON对象,将对象转为字符串 var jsObj = {}; jsObj.testArray = [1,2,3,4,5]; jsObj.name = 'CSS3'; jsObj.date = '8 May, 2011'; var str = JSON.stringify(jsObj); alert(str); 从JSON字符串转为对象 var jsObj = {}; jsObj.testArray = [1,2,3,4,5]; jsObj.name = 'CSS3'; jsObj.da

  • Javascript实现Array和String互转换的方法

    本文实例讲述了Javascript实现Array和String互转换的方法.分享给大家供大家参考,具体如下: Array类可以如下定义: 复制代码 代码如下: var aValues = new Array(); 如果预先知道数组的长度,可以用参数传递长度 复制代码 代码如下: var aValues = new Array(20); 如下2种定义方式是一样的 方式1: var aColors = new Array(); aColors[0] = "red"; aColors[1]

  • JavaScript的Number对象的toString()方法

    toString()方法的定义和用法: toString()方法可以把Number对象转换成字符串,并返回此字符串. 点击可查看更多相关Number对象(类)的方法和属性. 语法结构: 复制代码 代码如下: NumberObject.toString(radix) 参数列表: 参数 描述 radix 可选.规定表示数字的基数,使2 ~ 36 之间的整数.若省略该参数,则使用基数10.但是要注意,如果该参数是10以外的其他值,则ECMAScript标准允许实现返回任意值. 实例代码: var a=

  • 浅析JavaScript Array和string的转换(推荐)

    Array类可以如下定义: var aValues = new Array(); 如果预先知道数组的长度,可以用参数传递长度 var aValues = new Array(20); ------------------如下2种定义方式是一样的--------1------- var aColors = new Array(); aColors[0] = "red"; aColors[1] = "green"; aColors[2] = "blue&quo

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

    引子 我们都知道,JavaScript数据类型分两大类,基本类型(或者称原始类型)和引用类型. 基本类型的值是保存在栈内存中的简单数据段,它们是按值访问的.JS中有五种基本类型:Undefined.Null.Boolean.Number和String. 引用类型的值是保存在堆内存中的对象,它的值是按引用访问的.引用类型主要有Object.Array.Function.RegExp.Date. 对象是拥有属性和方法的,所以我们看到下面这段代码一点也不奇怪. var favs=['鸡蛋','莲蓬']

  • 深入理解Javascript中的valueOf与toString

    基本上,javascript中所有数据类型都拥有valueOf和toString这两个方法,null除外.它们俩解决javascript值运算与显示的问题,本文将详细介绍,有需要的朋友可以参考下. toString() toString()函数的作用是返回object的字符串表示,JavaScript中object默认的toString()方法返回字符串"[object Object]".定义类时可以实现新的toString()方法,从而返回更加具有可读性的结果.JavaScript对

  • AJAX入门之深入理解JavaScript中的函数

    概述 函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解.JavaScript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的.通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递.在继续讲述之前,先看一下函数的使用语法: function func1(-){-}var func2=function(-){-};var func3=function func4(-){-};var func5=new Function()

  • 理解JavaScript中的对象

    JavaScript中对象的简介 我们知道生活中客观存在的一切事物皆为对象,那在程序中的对象是什么样子呢?我们可以将程序中的对象理解为客户端世界中的对象在一种计算机中的一种表示方式.所有的编程语言中提到的对象其性质都是类似的,它往往对应内存中的一块区域,在这个区域中存储对象的属性或方法信息. JavaScript中对象的创建 基于{}符号创建对象 在JS中我们可以直接基于{}定义对象,在对象内容定义属性和方法,例如: 在JS中我们可以将对象理解为用于封装属性和方法的一个结构体,例如 如果需要反复

  • 深入理解JavaScript中的语法和代码结构

    概述 所有编程语言都必须遵守特定的规则才能运行. 确定编程语言的正确结构的这组规则称为语法. 许多编程语言主要由具有语法变化的类似概念组成. 在本教程中,我们将介绍JavaScript语法和代码结构的许多规则和约定. 功能性和可读性 在开始使用JavaScript时,功能性和可读性是关注语法的两个重要原因. 有些语法规则是JavaScript功能所必需的.如果不遵循它们,控制台将抛出一个错误,脚本将停止执行. 考虑"Hello,World!"中的语法错误.程序: // Example

  • 深入理解JavaScript中的对象复制(Object Clone)

    JavaScript中并没有直接提供对象复制(Object Clone)的方法.因此下面的代码中改变对象b的时候,也就改变了对象a. a = {k1:1, k2:2, k3:3}; b = a; b.k2 = 4; 如果只想改变b而保持a不变,就需要对对象a进行复制. 用jQuery进行对象复制 在可以使用jQuery的情况下,jQuery自带的extend方法可以用来实现对象的复制. a = {k1:1, k2:2, k3:3}; b = {}; $.extend(b,a); 自定义clone

  • 全面理解JavaScript中的继承(必看)

    JavaScript中我们可以借助原型实现继承. 例如 function baz(){ this.oo=""; } function foo(){ } foo.prototype=new baz(); var myFoo=new foo(); myFoo.oo; 这样我们就可以访问到baz里的属性oo啦.在实际使用中这个样不行滴,由于原型的共享特点(数据保存在了堆上), 所有实例都使用一个原型,一但baz的属性有引用类型就悲剧了,一个实例修改了其他实例也都跟着变了...wuwuwu 自

  • 理解JavaScript中worker事件api

    理解JavaScript中worker事件api

    如果你不是很了解Event事件,建议先这篇文章<理解javascript中DOM事件>. 首先,我们需要实例一个Worker的对象,浏览器会根据新创建的worker对象新开一个接口,此接口会处理客户端与indexedDB数据库之间的通信.这里的数据库是指浏览器数据库.如果,你需要判断浏览器是否支持worker对象,详见如下代码.或者浏览器是否支持indexedDB数据库,详见同下,二者判断最好选择前者.因为IE不支持indexedDB . if(window.Worker){ dosometh

  • 深入理解JavaScript中的浮点数

    js只有一种数值型数据类型,不管是整数还是浮点数,js都把归为数字. typeof 17;   // "number" typeof 98.6; // "number" typeof –2.1; // "number" js中的所有数字都是双精度浮点数.是由IEEE754标准制定的64位编码数字(这个是什么东东,不知道,回头查一下吧) 那么js是如何表达整数的,双精度浮点数可以完美地表示高达53位精度的整数(没有什么概念,没处理过多大的数据,没用

  • 理解 javascript 中的函数表达式与函数声明

    理解 javascript 中的函数表达式与函数声明

    常用闭包的同学肯定很清楚下面一段代码: //通常的闭包写法 (function () { ... }()) 那么我们的问题来了,为什么要在 function () {...}() 之外用圆括号包裹呢?解答这个问题,就需要我们理解 Javascript 中函数表达式与函数声明的概念. 函数定义带来的错误 虽然 function () {...} 看上去像是一个函数声明,但是由于没有函数名,它的本质其实是一个函数表达式.我们看下规范中对于函数声明与函数表达式的定义: 可以看出来,函数声明是必须带有函

随机推荐