当前位置：首页 > news >正文

call()、apply()、bind() 区别、使用场景、实现方式

news 来源：原创 2024/5/19 17:08:45

1. call()、apply()、bind() 三者区别

1.1 作用

1.2 参数

1.3 执行时机

2. call()、apply() 使用场景

2.1 使用 Array.prototype.push.apply(arr1, arr2) 合并两个数组

2.1.1 原理（看了手写方法，或许会更有助于理解）

2.1.2 如何解决参数过多的问题呢？—— 将参数数组切块，循环传入目标方法

2.2 获取数组中的最大值和最小值

2.3 使用 Object.prototype.toString() 验证是否是数组

2.4 类数组对象（Array-like Object）使用数组方法

2.4.1 什么是类数组对象？为什么要出现类数组对象？

2.4.2 使用 Array.prototype.slice.call 将类数组对象转换为数组

2.4.3 使用 ES6 提供的 Array.form / 解构赋值实现类数组对象转数组

2.5 调用父构造函数实现继承

3. bind() 使用场景

3.1 使用 Object.prototype.toString() 验证是否是数（bind 版）

3.2 柯里化（curry）

4. 手写 call()、apply()、bind()

4.1 实现 call()、apply()

4.1.1 实现思路

4.1.2 实现代码

4.1.3 优化版本（具体请阅读下方参考文章木易杨老师的博客，此处仅放结果）

4.2 实现 bind()

4.2.1 实现思路

4.2.2 实现代码

5. 参考链接

1. call()、apply()、bind() 三者区别

1.1 作用

call()、apply()、bind() 都用于显式绑定函数的 this 指向

1.2 参数

call()、apply()、bind() 第一个参数相同：都代表 this 要指向的对象（若该参数为 undefined 或 null 或不传参，this 则默认指向全局 window）

call()、apply()、bind() 除第一个传参外的其他参数不同：

call() 是参数列表 arguments
apply() 是数组
bind () 可以分多次传入，实现参数合并

1.3 执行时机

call()、apply() 是立即执行

bind() 是返回绑定 this 之后的新函数，需要手动调用；如果这个新函数作为构造函数被调用，那么 this 不再指向传入 bind() 的第一个参数，而是指向新生成的对象

2. call()、apply() 使用场景

再来回忆一遍这两位的区别：

var func = function(arg1, arg2) {
     ...
};

func.call(this, arg1, arg2); // 使用 call，参数列表
func.apply(this, [arg1, arg2]) // 使用 apply，参数数组

2.1 使用 Array.prototype.push.apply(arr1, arr2) 合并两个数组

2.1.1 原理（看了手写方法，或许会更有助于理解）

使用 apply 将 Array.prototype.push 这个函数方法的 this 指向改成 arr1
也就是说：arr1 现在有一个 push 属性方法
又因为 apply 改变 this 指向后，会直接执行函数
所以 arr1 会直接调用 push 方法，并接收 arr2 传来的参数数组
最终实现数组合并

注意：

arr2 数组不能太大，因为一个函数能接受的参数个数有限，JavaScript 核心限制在 65535
不同引擎限制不同，如果参数太多，可能会报错，也可能不会报错但参数丢失

2.1.2 如何解决参数过多的问题呢？—— 将参数数组切块，循环传入目标方法

具体实现步骤：

定义每次连接的数组，最多有 groupNum 个元素
需要连接的数组 arr2 总长度设为 len
使用 for 循环，每循环一次，i 增加一个分组那么多
也就是说，每循环一次，就连接原数组和新数组的第 i 个分组
最后一个分组，如果元素不够，则直接截取到最后，也就是 arr2.length

function concatOfArray(arr1, arr2) {
  // 数组分组后，每组元素个数
  var groupNum = 32768;
  var len = arr2.length;
  // 每循环一次，数组都添加一组个数
  for (var i = 0; i < len; i += groupNum) {
    // 当最后一组个数不足 groupNum 时，直接截取到最后即可，也就是 len
    // 一块一块连接数组
    Array.prototype.push.apply(arr1, arr2.slice(i, Math.min(i + groupNum, len)));
  }
  return arr1;
}

// 验证代码
var arr1 = [-3, -2, -1];
var arr2 = [];
for (var i = 0; i < 1000000; i++) {
  arr2.push(i);
}

Array.prototype.push.apply(arr1, arr2);
// Uncaught RangeError: Maximum call stack size exceeded

concatOfArray(arr1, arr2);
// (1000003) [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, ...]

2.2 获取数组中的最大值和最小值

数组没有直接获取最大最小值的方法，但是 Math 有
使用 call 将 Max.max 这个方法的 this 指向绑定到 Math 上
由于 call 会让绑定后的函数立刻执行，因此接收到数组后，Math 会立即执行寻找最值

var numbers = [5, 458 , 120 , -215 ]; 

Math.max.apply(Math, numbers); // 458    

Math.max.call(Math, 5, 458 , 120 , -215); // 458

// ES6
Math.max.call(Math, ...numbers); // 458

2.3 使用 Object.prototype.toString() 验证是否是数组

不同对象的 toString() 有不同的实现，可以通过 Object.prototype.toString() 获取每个对象的类型

使用 call()、apply() 实现检测，下面是我在 chrome 中打印的效果

因此，可以这么封装：

function isArray(obj){ 
    return Object.prototype.toString.call(obj) === '[object Array]';
}

isArray([1, 2, 3]); // true

2.4 类数组对象（Array-like Object）使用数组方法

2.4.1 什么是类数组对象？为什么要出现类数组对象？

JavaScript 中有一种对象，结构非常像数组，但其实是个对象：

类数组对象不具有：push、shift、forEach、indexOf 等数组方法
类数组对象具有：指向对象元素的数字索引下标和 length 属性

常见的类数组对象：

arguments 参数列表
DOM API 返回的 NodeList

类数组对象出现的原因：为了更快的操作复杂数据。

JavaScript 类型化数组是一种类似数组的对象，并提供了一种用于访问原始二进制数据的机制。Array存储的对象能动态增多和减少，并且可以存储任何 JavaScript 值。JavaScript 引擎会做一些内部优化，以便对数组的操作可以很快。然而，随着 Web 应用程序变得越来越强大，尤其一些新增加的功能例如：音频视频编辑，访问 WebSockets 的原始数据等，很明显有些时候如果使用 JavaScript 代码可以快速方便地通过类型化数组来操作原始的二进制数据，这将会非常有帮助。

2.4.2 使用 Array.prototype.slice.call 将类数组对象转换为数组

slice 将 Array-like 类数组对象，通过下标操作，放进了新的 Array 里面：

将数组的 slice 方法，通过 call 改变 this 指向，绑定到需要修改的类数组对象；
由于 call 会在修改完绑定后自动执行函数，因此类数组对象调用它被绑的 slice 方法，并返回了真的数组

// 类数组对象 不是数组，不能使用数组方法
var domNodes = document.getElementsByTagName("*");
domNodes.unshift("h1");
// TypeError: domNodes.unshift is not a function

// 使用 Array.prototype.slice.call 将 类数组对象 转换成 数组
var domNodeArrays = Array.prototype.slice.call(domNodes);
domNodeArrays.unshift("h1");
// ["h1", html.gr__hujiang_com, head, meta, ...]

也可以这么写，简单点 —— var arr = [].slice.call(arguments)；

注意：此方法存在兼容性问题，在低版本IE（< 9）下，不支持 Array.prototype.slice.call(args)，因为低版本IE下的 DOM 对象，是以 com 对象的形式实现的，JavaScript 对象与 com 对象不能进行转换

2.4.3 使用 ES6 提供的 Array.form / 解构赋值实现类数组对象转数组

Array.from() 可以将两种类对象转为真正的数组：

类数组对象（arguments、NodeList）
可遍历（iterable）对象（包括 ES6 新增的数据结构 Set 和 Map）

let arr = Array.from(arguments);
let arr = [...arguments];

2.5 调用父构造函数实现继承

在子构造函数中，通过调用父构造函数的 call()方法，实现继承

SubType 的每个实例都会将SuperType 中的属性/方法复制一份

function  SuperType(){
    this.color=["red", "green", "blue"];
}
function  SubType(){
    // 核心代码，继承自SuperType
    SuperType.call(this);
}

var instance1 = new SubType();
instance1.color.push("black");
console.log(instance1.color);
// ["red", "green", "blue", "black"]

var instance2 = new SubType();
console.log(instance2.color);
// ["red", "green", "blue"]

缺点：

只能继承父类的实例属性和方法，不能继承原型属性/方法
无法实现复用，每个子类都有父类实例函数的副本，影响性能

3. bind() 使用场景

再来回忆下 bind() 使用方法：

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

bind() 方法会创建一个新函数，当这个新函数被调用时，它的 this 值是传递给 bind() 的第一个参数，传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

bind 返回的绑定函数也能使用 new 操作符创建对象：这种行为就像把原函数当成构造器，提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。

bind() 是 ES5 加入的，IE8 以下的浏览器不支持

3.1 使用 Object.prototype.toString() 验证是否是数（bind 版）

var toStr = Function.prototype.call.bind(Object.prototype.toString);

function isArray(obj){ 
    return toStr(obj) === '[object Array]';
}

isArray([1, 2, 3]); // true

// 使用改造后的 toStr
toStr([1, 2, 3]); // "[object Array]"
toStr("123"); // "[object String]"
toStr(123); // "[object Number]"
toStr(Object(123)); // "[object Number]"

注意：如果 toString() 方法被覆盖了，则上述方法无法使用：

Object.prototype.toString = function() {
    return '';
}

isArray([1, 2, 3]); // false

3.2 柯里化（curry）

只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数。

如下所示：

定义了一个 add 函数，它接受一个参数，并返回一个新的函数。
调用 add 之后，返回的函数通过闭包的方式，记住了 add 的第一个参数
所以说 bind 本身也是闭包的一种使用场景

var add = function(x) {
  return function(y) {
    return x + y;
  };
};

var increment = add(1);

var addTen = add(10);

increment(2);
// 3

addTen(2);
// 12

add(1)(2);
// 3

4. 手写 call()、apply()、bind()

4.1 实现 call()、apply()

4.1.1 实现思路

关键点：

call() 改变了 this 指向
call() 改变指向后会立刻调用并执行函数

因此得出以下思路：

先判断即将绑定的对象 context 是否有值，如果是 null、undefined、空，则将 this 改成 window
将调用 call() 的函数（相当于 this，谁调用 call，谁就是 this），作为属性（属性必须独一无二，防止 context 上已经有同名的属性），添加到即将绑定的对象 context 上
执行 context 上新增加的属性方法，传入参数列表，借助隐式绑定，将属性方法的 this 绑定到 context 上
执行完成后，删除 context 上新增加的属性，并返回执行结果