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

(完)

时间: 2025-01-20 11:52:56

JavaScript 有多灵活?的相关文章

AJAX中JavaScript支持面向对象的基础

ajax|javascript|对象 在面向对象的思想中,最核心的概念之一就是类.一个类表示了具有相似性质的一类事物的抽象,通过实例化一个类,可以获得属于该类的一个实例,即对象. 在JavaScript中定义一个类的方法如下: function class1(){ //类成员的定义及构造函数} 这里class1既是一个函数也是一个类.可以将它理解为类的构造函数,负责初始化工作. 使用new操作符获得一个类的实例 在前面介绍基本对象时,已经用过new操作符,例如: new Date(); 表示创建

前端开发框架UI组件和Javascript插件

文章简介:支持响应式设计的流行前端开发框架. 在几年前,并没有真正意义上的前端开发.随着网络技术的发展,网站和 Web 应用程序变得越来越复杂,前端部分的工作独立出来逐渐成为现在的前端开发.如今,我们可以看到越来越多的公司在招聘前端开发岗位. 前端开发并不容易,除了掌握基本的 HTML.CSS 和 Javascript 之外,因为不同版本的浏览器和平台,你需要知道如何做一个跨浏览器的网站.而最新的发展趋势--响应式设计,它不仅使 Web 项目开发更难,也需要花费更多的开发时间. 不过,有很多优秀

Flex和JavaScript互操作

Flex最终会生成swf文件以ActiveX的方式部署网页上(html,jsp,asp,aspx等),由于ActiveX是一个独立体它并不能直接获取页面的元素数据,同样asp,aspx等服务端代码也不对它进行操作,这样Flex的信息交互就变得很孤立.在Web用户程序中不同页的信息交换是非常重要,通常这些信息明确下一个页面应该做什么:如果Flex得不到这些信息那么Flex在实际应用中就大打折扣!于是到网上找一下资料,发现自己的担心是多余的.Flex提供相关对象可以灵活地和当前网页的javascri

分析模块化的JavaScript开发的优势在哪里?

如今模块化的 JavaScript 的开发越来越火热,无论是模块加载器还是优秀的 JavaScript 模块,都是层出不穷.既然这么火,肯定是有存在的理由,肯定是解决了某些实际问题.很多没接触过模块化 JavaScript 开发者不禁要问,我真的需要模块化吗,模块化相比于传统的模式有什么优势? JavaScript 本身是没有模块化支持的,很多语言多有,就连CSS都有这样的加载方式. @import "fed.css"; 虽然因为性能问题不推荐CSS这样来进行加载,但这是一种模块化的思

Javascript核心读书有感之类型、值和变量

计算机程序的运行需要对值(value)比如数字3.14或者文本"hello world"进行操作,在编程语言中,能够表示并操作的值的类型叫做数据类型(type),编程语言最基本的特性就是主持多种数据类型.当程序需要将值保持起来以备将来使用时,便将其赋值给(将值"保存"到)一个变量(variable).变量是一个值的符号名称,可以通过名称获得对值的引用.变量的工作机制是编程语言的令一个基本特性.本章将参照上节帮助理解本章内容,后续将更深入的讲解. javascript

Javascript中定义类

Javascript 本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的extend或冒号,它也没有用来支持虚函数的 virtual,不过,Javascript是一门灵活的语言,下面我们就看看没有关键字class的Javascript如何实现类定义,并创建对象. 一:定义类并创建类的实例对象 在Javascript中,我们用function来定义类,如下: function Shape() { var x = 1 ; var y = 2 ; } 你 或许会说

《数据结构与算法 Javascript描述》读书笔记

当初买这本书的原因,在意的是有没有什么令人惊喜的东西,特别是针对Javascript代码的奇思妙想,所以就买下了这本书. 在买的几本书里面,最先看的也是这一本,但看起目录就觉得不大妙,翻起内容时候,才发现真不是那么的新奇的东西,甚至来说几乎不关Javascript的事. 我知道作者讲的是数据结构思想的东西,但是真跟Javascript没关系.作者几乎是把C语言算法的那一套搬到Javascript,看得我直满满都是C语言的影子.我不是排斥Javascript来讲算法的东西,只是觉得Javascri

盘点JavaScript函数的基本知识

本文旨在提供web开发人员必须了解的所有JavaScript函数的基本知识. 函数于软件开发者而言并不是什么奇幻世界.如果你的日常活动涉及到编码,哪怕是一点点,那么在一天结束的时候,你一定创建/修改了一个或多个函数. 简而言之函数只不过是一组执行某个操作的语句.函数可能会有一些输入参数(在函数体中使用),并在执行后返回值. JavaScript函数也具有这些特性,但它们不仅仅是常规函数.JavaScript函数是对象.你可以查看我曾经写的关于JavaScript对象的文章,里面我提到几乎Java

Javascript核心读书有感之类型、值和变量_基础知识

计算机程序的运行需要对值(value)比如数字3.14或者文本"hello world"进行操作,在编程语言中,能够表示并操作的值的类型叫做数据类型(type),编程语言最基本的特性就是主持多种数据类型.当程序需要将值保持起来以备将来使用时,便将其赋值给(将值"保存"到)一个变量(variable).变量是一个值的符号名称,可以通过名称获得对值的引用.变量的工作机制是编程语言的令一个基本特性.本章将参照上节帮助理解本章内容,后续将更深入的讲解. javascript