起初是因为一道面试题,这个面试题是去年遇到的,即如下代码:

1
2
3
4
class Operator {...}
var op = new Operator(1)

op.add(3).minus(2).multi(2).division(1)

写出 Operator 中的代码,当初不会写,因为完全没遇到过笔试写这类题目。当然,这也暴露了我基础薄弱的问题

现在,可以一解,其实很简单,add、minus、multi、division 都是 Operator 的方法,调用后能返回是因为返回了 this,this 指向调用者,所以还是指向实例(即 op)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
class Operator {
constructor(initial) {
this.num = initial
}

add(num) {
this.num = this.num + num
return this
}

minus(num) {
this.num = this.num - num
return this
}

multi(num) {
this.num = this.num * num
return this
}

division(num) {
this.num = this.num / num
return this
}
}

var op = new Operator(1)
op.add(3).minus(2).multi(2).division(1)

注意,一定要 return,你调用一个方法,不 return,就不会有结果。一般你调用方法总是要有返回值吧

再次提醒,能链式调用的关键在于调用方法后返回 this,this 指向调用者即实例

而此类又能衍生思考一个问题,库的「插件」机制

无论是 Chrome 中的插件,还是 PhotoShop 中的插件,还是 Webpack(前端打包库) 中的插件,还是 jQuery、Axios、BetterScroll 等库的插件,在写应用程序时,为了扩展性,我们都会使用“插件思维”,把核心的功能实现出来,再通过插件机制来扩展自身

多说无益,如果使用插件机制来实现此功能,该如何改造呢?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
class Operator {
plugins = []
constructor(initial) {
this.num = initial
}

use(plugin) {
this.plugins.push(plugin)
this[plugin.name] = plugin.exec.bind(this)
}

// 这里加一个方法,调用显示结果
result() {
return this.num;
}
}

const AddPlugin = {
name: 'add',
exec: function(num) {
this.num = this.num + num;
return this
}
}

const minusPlugin = {
name: 'minus',
exec: function(num) {
this.num = this.num - num;
return this
}
}


const op = new Operator(5)
op.use(AddPlugin)
op.use(minusPlugin)
op.add(5).minus(2).result() // 8

我们打印 op 能看到方法 add、minus 都作用到实例上了

实例op

当然,这只是冰山一角,如果说到如何写库,按照现代 JavaScript 库的写法要考虑的东西还有很多,等笔者对其研究有所收获后,会写一篇