javaScript-call、apply、bind函数的使用

在JavaScript中每个函数都包含两个非继承而来的函数apply()和call(),这两个函数的作用是一样的。都是为了改变函数运行时的上下文而存在的,实际就是改变函数体内this的指向。而bind()函数也是一样的。

apply和call是立即执行函数,而bind没有立即执行

call函数的基本使用

call()函数调用一个函数时,会将该函数的执行对象上下文改变为另一个对象。

1
function.call(thisArg, arg1, arg2, ...)
  • function为需要调用的函数。
  • thisArg表示的是新的对象上下文,函数中的this将指向thisArg,如果thisArg为null或者unfriend,则this会指向全局对象。
  • arg1,arg2,…表示的是函数所接收的参数列表。
1
2
3
4
5
6
7
8
9
10
11
12
13
function User(name) {
this.name = name;
console.log(this.age);
}

let obj = {
age: 'lss'
}
// 把User中的this指向obj,obj添加name的属性,
// 由于obj是对象类型的,在User里面改变也会改变obj
// 故输出为:{ age: 'lss', name: 'lss' }
User.call(obj, "lss"); // lss
console.log(obj); // { age: 'lss', name: 'lss' }

call函数用于继承

1
2
3
4
5
6
7
8
9
10
11
12
13
function Person(name){
this.name = name;
ths.getName = function(){
console.log(this.name);
return this.name
}
}

function Teacher(name){
// call()使Person中的this指向Teacher
Person.call(this, name)
}
new Teacher("node").getName()

apply函数的基本使用

apply()函数的作用域与call()函数是一致的,只是在传递参数时存在差异。

1
function.apply(thisArg, [argsArray])
  • function和thisArg和call一样

  • [argsArray] 表示参数会通过数组形式进行传递。

bind函数的基本使用

bind函数创建新的函数,在调用时设置this关键字为提供的值,在执行新函数时,将给定的参数列表作为原函数的参数序列,从前往后匹配。

1
function.bind(thisArg, arg1, arg2, ...)

bind函数和call函数用法基本一致,只是bind函数返回值是原函数的副本。

1
2
3
4
5
6
7
8
9
10
11
12
13
function User(name) {
this.name = name;
console.log(this.age);
}

let obj = {
age: 'lss'
}

// bind没有立即执行,返回一个函数对象
let user_bind = User.bind(obj, "lss");
user_bind(); // lss
console.log(obj); // { age: 'lss', name: 'lss' }