call()、apply()、bind()用法和区别

2022-11-17

971 字约 4 分钟

...

1. call()

语法：

fun.call(thisArg，arg1，arg2，…)

fun: 表示一个函数

thisArg: this要指向的对象，如果是null 和 undefined，则指向window全局对象；

从arg1开始，都是要给fun传递的参数。

特性：

fun.call(thisArg，arg1，arg2，…)

会立即调用fun函数；

call 方法将一个函数的对象上下文从初始的上下文改变为由 thisArg 指定的新对象，如果没有提供 thisArg 参数，那么 Window对象被用作 thisArg；

将arg1等参数传递进fun函数中，返回fun函数的返回值。

function getSum(num1, num2) {
    console.log(this); // Window
    return num1 + num2;
}

const obj = {};

getSum.call(obj, 2, 3); // this指向: obj   return: 5

2. apply()

语法：

fun.apply(thisArg,[arg1,arg2,…])

fun: 表示一个函数

thisArg: this要指向的对象，如果是null 和 undefined，则指向window全局对象；

参数是一个数组。

特性：

fun.apply(thisArg,[arg1,arg2,…])

会立即调用fun函数；

apply方法将一个函数的对象上下文从初始的上下文改变为由 thisArg 指定的新对象，如果没有提供 thisArg 参数，那么 Window对象被用作 thisArg；

将数组传递进fun函数中，返回fun函数的返回值。

function getSum(num1, num2) {
    console.log(this);// Window
    return num1 + num2;
}

const obj = {};

getSum.apply(obj, [1, 2]); // this指向: obj   return: 3

3. bind()

语法：

fun.bind(thisArg,[arg1,arg2,…])

fun: 表示一个函数

thisArg: this要指向的对象，如果是null 和 undefined，则指向window全局对象；

从arg1开始，都是要给fun传递的参数。

特性：

fun.bind(thisArg,arg1,arg2,…)

不会立即调用fun函数，会返回一个新的指定了this的函数；

bind方法将一个函数的对象上下文从初始的上下文改变为由 thisArg 指定的新对象，如果没有提供 thisArg 参数，那么 Window对象被用作 thisArg；

将arg1等参数传递进fun函数中。

function getSum(num1, num2) {
    console.log(this); // Window
    return num1 + num2;
}

const obj = {};
const newFun = getSum.bind(obj, 1, 2); // 返回的是一个新的指定了this的函数
newFun(); // 3

4. call()、apply()和bind()的应用

1. call()

call 常用来继承，因为ES6之前没有extends,用构造函数来模拟继承。

下面例子：

Son通过改变Father构造函数this指向问题，来获取Father里面的属性，实现继承的效果，Son还可以添加自己的额外属性：

function Father(name, age) {
    this.name = name;
    this.age = age;
}

function Son(name, age, gender) {
    Father.call(this, name, age);
    this.gender = gender;
}

const son = new Son("小明", 24, "男");
son.name; // 小明
son.age; // 24

2. apply()

apply 常用于与数组有关的操作，因为传递的参数是数组。

获取数组中的最大值与最小值：

const arr = [1, 4, 7, -1];
Math.max.apply(Math, arr); // 7
Math.min.apply(Math, arr); // -1

数组合并：

const arr = [1, 2];
const arr1 = [3];
Array.prototype.push.apply(arr, arr1); // 3
conaole.log(arr); // [1, 2, 3]

3. bind()

如果我们想改变某个函数内部的this指向，但又不需要立即调用该函数，此时用bind:

<body>
    <button>点击</button>
    <script>
        let btn = document.querySelector("button");
        btn.onclick = function() {
            this.disabled = true; // 这里this表示btn
            setTimeout(function() {
                console.log(this); // 这里this表示Window
                this.disabled = false; // 所以btn的disabled会一直为true
            }, 3000)
        }
    </script>
</body>
-----------------------------------------------------
<body>
    <button>点击</button>
    <script>
        let btn = document.querySelector("button");
        btn.onclick = function() {
            this.disabled = true;
            setTimeout(function() {
                console.log(this); // btn
                this.disabled = false;
            }.bind(this), 3000) // 这个this是在定时器函数外，所以指向的是btn这个按钮对象。
        }
    </script>
</body>