JavaScript apply、call、bind 函数详解

apply和call

apply和call非常类似，都是用于改变函数中this的指向，只是传入的参数不同，等于间接调用一个函数，也等于将这个函数绑定到一个指定的对象上：

let name = 'window'

function getName(param1, param2) {
  console.log(this.name)
  console.log(param1, param2)
}
let obj = {
  name: 'easylee',
}
getName.call(obj, 123, 23)
getName.apply(obj, [123, 23])

如上面的例子，如果直接调用
getName
那么返回的是
window
，但是通过
call
方法，将函数绑定到了
obj
上，成为obj的一个函数，同时里面的
this
也指向了
obj

两者主要的区别在于，当函数有多个参数时，
call
是直接传入多个参数，而
apply
将多个参数组合成一个数组传输参数

手写call

原理：

首先，通过
Function.prototype.myCall
将自定义的
myCall
方法添加到所有函数的原型对象上，使得所有函数实例都可以调用该方法。
在
myCall
方法内部，首先通过
typeof this !== "function"
判断调用
myCall
的对象是否为函数。如果不是函数，则抛出一个类型错误。
然后，判断是否传入了上下文对象
context
。如果没有传入，则将
context
赋值为全局对象。这里使用了一种判断全局对象的方法，先判断是否存在
global
对象，如果存在则使用
global
，否则判断是否存在
window
对象，如果存在则使用
window
，如果都不存在则将
context
赋值为
undefined
。
接下来，使用
Symbol
创建一个唯一的键
fn
，用于将调用
myCall
的函数绑定到上下文对象的新属性上。
将调用
myCall
的函数赋值给上下文对象的
fn
属性，实现了将函数绑定到上下文对象上的效果。
调用绑定在上下文对象上的函数，并传入
myCall
方法的其他参数
args
。
将绑定在上下文对象上的函数删除，以避免对上下文对象造成影响。
返回函数调用的结果。

Function.prototype.myCall = function (context, ...args) {
  // 判断调用myCall的是否为函数
  if (typeof this !== 'function') {
    throw new TypeError('Function.prototype.myCall - 被调用的对象必须是函数')
  }
  // 判断是否传入上下文对象,不传入则指定默认全局对象
  context = context || (typeof global !== 'undefined' ? gloabl : typeof window !== 'undefined' ? window : undefined)

  // 在上下文对象上绑定当前调用的函数,作为属性方法
  // 不能直接调用this方法函数,原因在于如果不将这个方法绑定到上下文对象上
  // 直接执行this函数,this函数里面的this上下文对象无法识别为绑定的对象
  let fn = Symbol('key')
  context[fn] = this
  const result = context[fn](...args)
  // 删除这个函数,避免对上下文对象造成影响
  delete context[fn]
  return result
}
const test = {
  name: 'xxx',
  hello: function () {
    console.log(`hello,${this.name}!`)
  },
  add: function (a, b) {
    return a + b
  },
}
const obj = { name: 'world' }
test.hello.myCall(obj) //hello,world!
test.hello.call(obj) //hello,world!
console.log(test.add.myCall(null, 1, 2)) //3
console.log(test.add.call(null, 1, 2)) //3

手写apply

Function.prototype.myApply = function (context, argsArr) {
  // 判断调用myApply的是否为函数
  if (typeof this !== "function") {
    throw new TypeError("Function.prototype.myApply - 被调用的对象必须是函数");
  }

  // 判断传入的参数是否为数组
  if (argsArr && !Array.isArray(argsArr)) {
    throw new TypeError("Function.prototype.myApply - 第二个参数必须是数组");
  }

  // 如果没有传入上下文对象，则默认为全局对象
  //global:nodejs的全局对象
  //window:浏览器的全局对象
  context =
    context ||
    (typeof global !== "undefined"
      ? global
      : typeof window !== "undefined"
      ? window
      : undefined);

  // 用Symbol来创建唯一的fn，防止名字冲突
  let fn = Symbol("key");

  // this是调用myApply的函数，将函数绑定到上下文对象的新属性上
  context[fn] = this;

  // 传入myApply的多个参数
  const result = Array.isArray(argsArr)
    ? context[fn](...argsArr)
    : context[fn]();

  // 将增加的fn方法删除
  delete context[fn];

  return result;
};

// 测试一下
const test = {
  name: "xxx",
  hello: function () {
    console.log(`hello,${this.name}!`);
  },
};
const obj = { name: "world" };
test.hello.myApply(obj); //hello,world!
test.hello.apply(obj); //hello,world!
const arr = [2,3,6,5,1,7,9,5,0]
console.log(Math.max.myApply(null,arr));//9
console.log(Math.max.apply(null,arr));//9

bind

最后来看看
bind
，和前面两者主要的区别是，通过 bind 绑定的不会立即调用，而是返回一个新函数，然后需要手动调用这个新函数，来实现函数内部
this
的绑定

let name = 'window'
function getName(param1, param2) {
  console.log(this.name)
  console.log(param1)
  console.log(param2)
}
let obj = {
  name: 'easylee',
}

let fn = getName.bind(obj, 123, 234)	// 通过绑定创建一个新函数，然后再调用新函数
fn()

除此之外,
bind
还支持柯里化，也就是绑定时传入的参数将保留到调用时直接使用

let sum = (x, y) => x + y
let succ = sum.bind(null, 1) // 绑定时没有指定对象,但是给函数的第一个参数指定为1
succ(2) // 3, 调用时只传递了一个参数2,会直接对应到y,因为前面的1已经绑定到x上了

手写bind

原理：

首先，通过
Function.prototype.myBind
将自定义的
myBind
方法添加到所有函数的原型对象上，使得所有函数实例都可以调用该方法。
在
myBind
方法内部，首先通过
typeof this !== "function"
判断调用
myBind
的对象是否为函数。如果不是函数，则抛出一个类型错误。
然后，判断是否传入了上下文对象
context
。如果没有传入，则将
context
赋值为全局对象。这里使用了一种判断全局对象的方法，先判断是否存在
global
对象，如果存在则使用
global
，否则判断是否存在
window
对象，如果存在则使用
window
，如果都不存在则将
context
赋值为
undefined
。
保存原始函数的引用，使用
_this
变量来表示。
返回一个新的闭包函数
fn
作为绑定函数。这个函数接受任意数量的参数
innerArgs
。（关于闭包的介绍可以看这篇文章->
闭包的应用场景
）
在返回的函数
fn
中，首先判断是否通过
new
关键字调用了函数。这里需要注意一点，如果返回出去的函数被当作构造函数使用，即使用
new
关键字调用时，
this
的值会指向新创建的实例对象。通过检查
this instanceof fn
，可以判断返回出去的函数是否被作为构造函数调用。这里使用
new _this(...args, ...innerArgs)
来创建新对象。
如果不是通过
new
调用的，就使用
apply
方法将原始函数
_this
绑定到指定的上下文对象
context
上。这里使用
apply
方法的目的是将参数数组
args.concat(innerArgs)
作为参数传递给原始函数。

Function.prototype.myBind = function (context, ...args) {
  // 判断调用myBind的是否为函数
  if (typeof this !== "function") {
    throw new TypeError("Function.prototype.myBind - 被调用的对象必须是函数");
  }

  // 如果没有传入上下文对象，则默认为全局对象
  //global:nodejs的全局对象
  //window:浏览器的全局对象
 context =
    context || (typeof global !== "undefined"
      ? global
      : typeof window !== "undefined"
      ? window
      : undefined);

  // 保存原始函数的引用，this就是要绑定的函数
  const _this = this;

  // 返回一个新的函数作为绑定函数
  return function fn(...innerArgs) {
    // 判断返回出去的函数有没有被new
    if (this instanceof fn) {
      return new _this(...args, ...innerArgs);
    }
    // 使用apply方法将原函数绑定到指定的上下文对象上
    return _this.apply(context,args.concat(innerArgs));
  };
};

// 测试
const test = {
  name: "xxx",
  hello: function (a,b,c) {
    console.log(`hello,${this.name}!`,a+b+c);
  },
};
const obj = { name: "world" };
let hello1 = test.hello.myBind(obj,1);
let hello2 = test.hello.bind(obj,1); 
hello1(2,3)//hello,world! 6
hello2(2,3)//hello,world! 6
console.log(new hello1(2,3));
//hello,undefined! 6
// hello {}
console.log(new hello2(2,3));
//hello,undefined! 6
// hello {}

总结一下，这三个函数都是用于改变函数内
this
对象的指向，只是使用方式有不同，其中 apply 传递多个参数使用数组的形式，call 则直接传递多个参数，而 bind 则可以将绑定时传递的参数保留到调用时直接使用，支持柯里化，同时 bind 不会直接调用，绑定之后返回一个新函数，然后通过调用新函数再执行。

JavaScript apply、call、bind 函数详解

apply和call

手写call

手写apply

bind

手写bind

添加新评论

最新文章

最近回复

分类

归档

其它