Javascript 进阶 6-4 原始型别的包裹物件与原型的关联

这个章节要讨论纯值以及物件的关係

如果我们要定义一个 纯值 的字串 我们会这样子做!

var a = 'a';console.log(a);

透过这样的程式码我们就可以预期下面的结果

http://img2.58codes.com/2024/20121770WYRK6xue9G.png

那么如果今天我需要把这个字串 a 转换成大写,我们通常会使用的方法就是

var a = 'a';console.log(a.toUpperCase());

http://img2.58codes.com/2024/20121770gt4WOeS0mO.png

那么 toUpperCase() 这个方法呢就源自于 String 这个 原型的原型链上所挂载的方法。

同时我们可以使用建构式的方式,封装出另一个 b 的字串,虽然不是纯值而是物件型别,但其中就可以看到关于 String 这个原型上的方法有哪些

var b = new String('b');console.log(b);

http://img2.58codes.com/2024/20121770MsMjG3Y8vj.png

上一篇文章也有提到,这个 String 其实它的本质是一个函式,搭配 new 这个运算子的使用才能够建构出一个 实体的物件。

那么这边我们利用 console.dir 的方法来检查 String 这个函式

console.dir(String);

http://img2.58codes.com/2024/20121770MtAZ7MfGaB.png

结果会发现他有一个 prototype 的属性,展开以后这个属性其实跟我们刚刚用建构式宣告出来的 b 的物件实体 里面的 proto 属性展开来是一样的。

也就是说 b 的物件实体 里面的 proto 属性会跟他的原型(String)的 prototype 是一样的。

所以我们也可以在 String 这个原型函式上新增别的原型方法是不是也是很OK的呢?

试试看~

我们来新增一个可以取出最后一个字元的原型方法,叫做 lastText 好了!

var b = new String('bcde');console.log(b);console.dir(String);String.prototype.lastText = function () {    return this[this.length - 1]}console.log(b.lastText());

透过这样的修改之后,我们就可以利用 b.lastText() 的调用方式,来取得最后一个字元噜!

http://img2.58codes.com/2024/20121770w6LH9UxcUl.png

那我们再来看另一个例子,Number

Number.prototype.secondPower = function () {    return this * this};var num = 5;console.log(num.secondPower());

运行之后呢,一样我们可以得到我们数字的平方结果

http://img2.58codes.com/2024/20121770TiYQ7pBXtX.png

但为什么纯值以及建构式建构出来的物件都可以使用建构函式的方法(String/Number)呢?

因为在 Javascript 中,纯值有一个对应的包裹物件(String/Number),以数值来说就是对应Number。

那么因为原型是共用的,不论是纯值还是建构式建构出来的物件实体都会指向同一个原型,也可以取用同一个包裹物件(String/Number)原型链上的方法。

而除了纯值之外, Javascript 还有很多建构式可以使用,例如 Date 可以取用时间

var date = new Date();console.log(date);console.dir(Date);

Date 是一个可以用来取用目前浏览器时间的建构函式。同样的可以使用 console.dir 查看该函式的属性以及方法。

http://img2.58codes.com/2024/20121770KBQYts6ttS.png

但这样输出的结果通常不会是我们要的格式,所以我们可以透过自定义的方式,将需要的时间格式重组成我们要的样子,回传。并将这个方法挂载在 Date 这个建构函式的原型上喔!

var date = new Date();console.log(date);console.dir(Date);Date.prototype.getFullDate = function () {    var dd = String(this.getDate());    var mm = String(this.getMonth() + 1);    var yyyy = this.getFullYear();    var today = yyyy + '/' + mm + '/' + dd;    return today;};var today = date.getFullDate();console.log(today);

http://img2.58codes.com/2024/20121770c3LywkWQ8X.png

当然如果想要用其他的格式,也可以自己进行客製化的调整。

那么今天这篇文章就到这里,没问题的话就往下一篇文章移动噜!


关于作者: 网站小编

码农网专注IT技术教程资源分享平台,学习资源下载网站,58码农网包含计算机技术、网站程序源码下载、编程技术论坛、互联网资源下载等产品服务,提供原创、优质、完整内容的专业码农交流分享平台。

热门文章