JavaScript多灵活?

开发 前端
JavaScript 是一种灵活的语言,表达力极强,我来举一个例子,保证让很多人大吃一惊。本文受到了 Kyle Simpson 的文章《Iterating ES6 Numbers》的启发。

JavaScript 是一种灵活的语言,表达力极强,我来举一个例子,保证让很多人大吃一惊。

本文受到了 Kyle Simpson 的文章​​《Iterating ES6 Numbers》​​的启发。


首先,在 Number.prototype 对象上,部署一个 add 方法。

Number.prototype.add = function (x) {
return this + x;
};

上面代码为 Number 的实例定义了一个 add 方法。(如果你对这种写法不熟悉,建议先阅读我写的​​《JavaScript 面向对象编程》​​。)

由于 Number 的实例就是数值,在数值上调用某个方法,数值会自动转为实例对象,所以就得到了下面的结果。

8['add'](2)
// 10

上面代码中,调用方法之所以写成​​8['add']​​​,而不是​​8. add​​,是因为数值后面的点,会被解释为小数点,而不是点运算符。

将数值放在圆括号中,就可以使用点运算符调用方法了。

(8) .add (2)
// 10

其实,还有另一种写法。

8..add (2)
// 10

上面代码的***个点解释为小数点,第二个点解释为点运算符。为了语义清晰起见,下面我统一采用圆括号的写法。

由于 add 方法返回的还是数值,所以可以链式运算。

Number.prototype.subtract = function (x) {
return this - x;
};

(8) .add (2) .subtract (4)
// 6

上面代码在 Number 对象的实例上部署了 subtract 方法,它可以与 add 方法链式调用。

如果使用方括号调用属性,写法会很古怪。

8["add"](2)["subtract"](4)
// 6

我们还可以部署更复杂的方法。

Number.prototype.iterate = function () {
var result = [];
for (var i = 0; i <= this; i++) {
result.push (i);
}
return result;
};

(8) .iterate ()
// [0, 1, 2, 3, 4, 5, 6, 7, 8]

上面代码在 Number 对象的原型上部署了 iterate 方法,可以将一个数值自动扩展为一个数组。

总之,现在我们可以在数值上直接调用方法了,但是后面一对圆括号看着有点碍眼,有没有可能去掉圆括号呢?也就是说,能不能将下面的表达式

(8).double() .square ()

写成另一种样子?

(8).double.suqare

这是可以做到的。

ES5 规定,每个对象的属性都有一个​​取值方法 get​​,用来自定义该属性的读取操作。

Number.prototype = Object.defineProperty (
Number.prototype, "double", {
get: function (){return (this + this)}
}
);

Number.prototype = Object.defineProperty (
Number.prototype, "square", {
get: function (){return (this * this)}
}
);

上面代码在 Number.prototype 上定义了两个属性 double 和 square ,以及它们的取值方法 get 。

因此,在任一数值上,读取这两个属性,就可以写成下面的样子。

(8).double.square
// 256

也可以改用方括号运算符。

8["double"]["square"]
// 256
责任编辑:林师授 来源: 阮一峰的网络日志
相关推荐

2012-05-10 10:00:43

2012-05-10 09:15:47

2021-09-29 19:16:07

前端React配置

2013-11-29 16:55:56

华为OTN广电

2023-06-22 09:20:56

测试JavaScript框架

2013-11-11 16:20:01

戴尔

2024-03-19 13:51:31

JavaScript插件

2023-04-12 07:55:24

Web前端工程化

2010-10-08 13:21:03

JavaScript多维数组

2024-06-03 06:49:53

2019-03-16 14:34:01

Wi-Fi 6AP锐捷

2009-12-07 17:20:29

PHP stdClas

2011-06-13 10:07:56

机房布线管理配线架配线架

2009-05-18 09:12:00

ASON自动交换光网络

2011-07-25 16:25:47

2011-03-21 09:50:47

LAMP性能

2019-10-21 15:30:54

JS技巧前端

2009-12-18 16:20:33

Ruby blocks

2023-06-06 19:24:06

KubernetesSpark

2010-04-21 14:56:23

Unix 线程
点赞
收藏

51CTO技术栈公众号