JavaScript 有多灵活?

简介:

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

(完)

目录
相关文章
|
6月前
|
前端开发 JavaScript Java
前端基础 - JavaScript高级应用(灵活的对象模型)
前端基础 - JavaScript高级应用(灵活的对象模型)
33 0
|
JavaScript 前端开发
|
JavaScript 前端开发 程序员
《JavaScript设计模式》——第1章 灵活的语言——JavaScript 1.1入职第一天
面向对象编程(Object-oriented programming,OOP)是一种程序设计范型。它将对象作为程序的基本单元,将程序和数据封装其中,以提高程序的重用性、灵活性和扩展性。
1154 0
|
移动开发 JavaScript 前端开发
Popmotion – 小巧,灵活的 JavaScript 运动引擎
  Popmotion 是一个只有12KB的 JavaScript 运动引擎,可以用来实现动画,物理效果和输入跟踪。原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用。Popmotion 网站上有很多很赞的效果,赶紧去体验一下。
1345 0
|
JavaScript 前端开发
灵活多变的Javascript
最近看到一篇文章写到灵活的 Javascript ,甚是感叹Javascript的强大。 Number.prototype.add=function(x){ return this+x ; }; Number.
778 0
|
JavaScript 前端开发
使用 JavaScript 实现灵活的固定导航功能
  如果你想在网页中实现灵活的固定导航功能,那么 Smart Fixed Navigation 这个 JavaScript 小脚本可以帮助轻松实现一个固定的导航,让用户在访问你的网站的时候可以随时使用菜单。
747 0
|
JavaScript 前端开发
javascript中通过className灵活查找元素 例如我们要把根据class来进行修改样式
原文:javascript中通过className灵活查找元素 例如我们要把根据class来进行修改样式 一、背景:一个表单中,要修改一些li中有class=box的样式,将它的background设置为red红色。
1185 0
|
移动开发 JavaScript 前端开发
Sortable – 简单灵活的 JavaScript 拖放排序插件
  当需要在网站中添加拖放排序功能的时候,jQuery UI 的排序组件可能是最流行的解决方案。今天给大家介绍另一款简单灵活的 JavaScript 拖放排序插件——Sortable,它使用 HTML5 原生的拖放 API 来实现拖放,并支持在触屏设备上使用。
1009 0
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0
|
2月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
70 0