联动水文,大约半年前记录了Javascript的this。顺水推舟理一下call(),bind(),apply()

扩展阅读:关于JavaScript的this

还是上次的代码,修改一下

1
2
3
4
5
6
7
8
9
10
let name = 'panda'
let obj = {
name: 'koala',
getName() {
return this.name
}
}
let test = obj.getName
test() //undefined.

(敲黑板!)复习一下!为什么就undefined了!原因就是,this指向不同了。那么直接运行是否可以

1
2
3
4
5
6
7
8
let name = 'panda'
let obj = {
name: 'koala',
getName() {
return this.name
}
}
obj.getName() //koala

因为有时候并没办法这么自由的随便调用,那如果要搞个变量出来用,怎么做?

call()

call

  • vi. 呼叫;拜访;叫牌
  • vt. 呼叫;称呼;召集
  • n. 电话;呼叫;要求;访问
  • n. (Call)人名;(瑞典、罗)卡尔;(英)考尔
    以上来自有道翻译

有一手有道翻译就方便了,就是call(叫)它,把要用的方法call(叫)出来。

1
2
3
4
5
6
7
8
9
let name = 'panda'
let obj = {
name: 'koala',
getName() {
return this.name
}
}
let cal = obj.getName //先定义出来
cal.call(obj) //koala (指向还给他,不动其他把它叫出来

apply()

apply

  • v.应用;使用;涂;敷
  • Web申请;适用;套用
    以上来自bing词典,感谢微软爸爸

再来一手必应翻译简直就是,不谈了!

1
2
3
4
5
6
7
8
9
let name = 'panda'
let obj = {
name: 'koala',
getName() {
return this.name
}
}
let apy = obj.getName //这手还是不变
apy.apply(obj) //koala (可以说不是指向还给他,这不是假装了,而是直接套用

有人要问,那你这手跟call()不是一样的么,为什么要区分开来。这个问题下面再讲

bind()

是不是以为我要用百度翻译了?我偏不!

bind

n. 窘境;讨厌的事情;捆绑;植物的藤蔓
v. 捆绑;约束;装订;(使)结合;使关系密切
以上来自沪江小d,我学日语就靠它

顺便,请以上三家公司尽快给我打钱,谢谢合作。

bind()有点土匪的意思,它就是想抢走你老婆借用一晚的意思。

1
2
3
4
5
6
7
8
9
10
11
12
13
let name = 'panda'
let obj = {
name: 'koala',
getName() {
return this.name
}
}
let bid = obj.getName // [Function: getName] (这手还是不变

// 接着这样做,把this指向回去,变成一个可以自由操作的变量
bid = bid.bind(obj) // [Function: bound getName]

bid() // koala (这样才会运行,因为刚刚只是抢过来了

call()和#apply()区别

1
2
3
4
5
6
7
8
9
10
11
12
let name = 'panda'
let obj = {
name: 'koala',
getName() {
return this.name
}
}
let cal = obj.getName
cal.call(obj) //koala

let apy = obj.getName
apy.apply(obj) //koala

说是这么说了,可是,他们并不是说就这么改变this方向然后就没什么用处了啊,可以借用call()apply()传参数的。

1
2
3
4
5
6
7
8
9
10
let name = 'panda'
let obj = {
name: 'koala',
getName(param1, param2) {
return this.name + ' params: ' + param1 + param2
}
}
let cal = obj.getName
cal.call(obj, 1, 2) //koala params: 12

那么apply()就有区别了?哎!

1
2
let apy = obj.getName	//这手还是不变
apy.apply(obj, [1, 2]) //koala params: 12

apply后面接参数,只接受数组,call的话按顺序怼进去就行了。就这点区别。

暂时先这样,以后更深入的使用再深入的理解一下。现在大概就用到这些。

下一篇,讲Javascript的柯基化!