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

发表于 更新于 分类于

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' }