手写call、apply、bind函数与它们的基本使用

目录

一、call、apply、bind函数的基本使用

1.call函数的使用

2.apply函数的使用

3.bind函数的使用

二、call、apply、bind函数的实现

1.call函数的实现

2.apply函数的实现

3.bind函数的实现

---

一、call、apply、bind函数的基本使用

1.call函数的使用

语法：

function.call(thisArg, arg1, arg2, ...)

参数：

• thisArg：显示绑定，在function函数运行时使用的this值，如果thisArg传入的是null和undefined时会自动替换为指向全局对象
• arg1, arg2, ...：指定的参数列表。

代码示例：

function foo() {
  console.log("foo函数被执行", this)
}

function sum(num1, num2) {
  console.log("sum函数被执行", this, num1, num2)
  return num1 + num2
}

foo.call(undefined)
var result = sum.call({}, 20, 30)

2.apply函数的使用

语法：

apply(thisArg, argsArray)

参数：

• thisArg：显示绑定，在function函数运行时使用的this值，如果thisArg传入的是null和undefined时会自动替换为指向全局对象
• argsArray：一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值为 null 或 undefined，则表示不需要传入任何参数。

代码示例：

function sum(num1, num2) {
  console.log("sum被调用", this, num1, num2)
  return num1 + num2
}

var result = sum.apply("abc", [20, 30])

3.bind函数的使用

语法：

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

参数：

• thisArg：调用绑定函数时作为 this 参数传递给目标函数的值。
• arg1, arg2, ... : 当目标函数被调用时，被预置入绑定函数的参数列表中的参数。

返回值：

返回一个原函数的拷贝，并拥有指定的 this 值和初始参数。

代码示例：

function sum(num1, num2, num3, num4) {
  console.log(num1, num2, num3, num4)
}

var newSum = sum.bind("aaa", 10, 20, 30, 40)
newSum()

var newSum = sum.bind("aaa")
newSum(10, 20, 30, 40)

var newSum = sum.bind("aaa", 10)
newSum(20, 30, 40)

二、call、apply、bind函数的实现

1.call函数的实现

思路：

• 给所有的函数添加一个ckcall的方法，那么我们可以在Function函数对象的prototype中添加ckcall这个方法

• 执行调用ckcall的那个函数，为了方便理解，我们将这个调用ckcall的函数称为foo函数，foo.ckcall(),相当于默认进行隐式绑定，所以里面的this，就是这个foo函数

• ckcall方法需要传入一个形参thisArg（这个形参其实就是绑定的this），我们可以给thisArg添加一个fn属性，并将需要被执行的函数foo赋值给thisArg.fn

• 然后再调用thisArg.fn(), 这个是一个隐式绑定，this绑定thisArg，这样就实现了ckcall接受一个this的参数

• 然后再用delete删掉这个多出来的thisArg对象

• 因为我们要保证ckcall的形参是一个对象，所以我们在内部使用Object(thisArg)，将传进来的形参都转成对象

• 如果我们传进来的是undefined和null，那么这个函数的this就是绑定全局的window，所以我们可以判断thisArg是否有值，有值的话就转化成对象类型，没有的话就绑定window类型

• 这个函数还有可能要接受其他的多个参数，那么我们可以使用es6的剩余参数来接受多个参数并保存到一个数组中，然后在调用改函数时，再使用展开运算符将数组中的参数一个个传进去

• 最后这个函数调用完会有一个返回值

代码实现：

// 给所有的函数添加ckcall这个方法
// es6语法：剩余参数 
Function.prototype.ckcall = function(thisArg, ...args) {
  // 1.获取需要被执行的函数
  var fn = this

  // 2.对thisArg转成对象类型(防止它传入的是非对象类型)
  thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg) : window
  
  // 3.调用这个执行函数
  // 3.1thisArg对象有一个fn属性，并保存这个调用函数fn
  thisArg.fn = fn
  // 3.2相当于隐式绑定 this指向thisArg
  var result = thisArg.fn(...args)
  // 3.3 执行完之后 将thisArg里的fn属性给删除
  delete thisArg.fn

  // 4.将执行函数的返回值返回
  return result
}

function foo() {
  console.log('执行foo函数',this);
}

function sum(num1, num2) {
  var result = num1 + num2
  console.log('执行sum函数',this, num1, num2, result);
  return result

}

// 相当于进行了隐式绑定
// 隐式绑定：this绑定foo函数对象
foo.ckcall({})
sum.ckcall(undefined, 20, 30)

2.apply函数的实现

思路：和call方法一样，唯一不同的就是call传入其他参数可有值，也可以没有，但是apply方法要传入一个数组， 如果没有传入一个数组，就会报错，那么我们就要进行判断是否有传入这个数组

代码示例：

// 给所有的函数都添加一个ckapply方法
Function.prototype.ckapply = function(thisArg, argArray) {
  // 1.获取需要被执行的函数
  var fn = this

  // 2.处理绑定的thisArg
  thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg) : window

  // 3.执行这个函数
  thisArg.fn = fn
  // 判断是否有传入其他参数
  argArray = argArray ? argArray : []
  var result = thisArg.fn(...argArray)
  delete thisArg.fn

  // 4.返回结果
  return result
}

// 不传入其他参数
function foo() {
  console.log('执行foo函数',this);
}
function sum(num1, num2) {
  var result = num1 + num2
  console.log('执行sum函数',this, num1, num2);
  return result
}

foo.ckapply('abc')
sum.ckapply('aaa', [20, 30])

3.bind函数的实现

思路：

• 首先bind还要返回一个新的代理函数

• 给所有函数添加ckbind这个方法

• 获取需要执行的函数

• 判断是否有参数

• 返回一个新的代理函数，在这个代理函数里执行这个需要执行的函数

• 还有一个特殊处理，bind可以接收多个参数，然后代理函数也可以接收多个参数，然后经过拼接这写参数，统一交由代理函数一起运行

代码示例：

// 给所有的函数添加ckbind方法
Function.prototype.ckbind = function(thisArg, ...argArray) {

  // 1.获取需要被执行的函数
  var fn = this

  // 2.绑定this
  thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg) : undefined

  function proxyFn(...args) {
    thisArg.fn = fn
    // 将...argArray参数与...args参数拼接
    var finalArgs = [...argArray, ...args]
    var result = thisArg.fn(...finalArgs)
    delete thisArg.fn
    return result
  }

  // 返回一个代理函数
  return proxyFn
}

function foo() {
  console.log('执行foo函数',this);
}

function sum(num1, num2, num3, num4) {
  console.log('执行sum函数', num1, num2, num3, num4);
}

var result = foo.ckbind('abc')
result()

var result1 = sum.ckbind("aaa", 20, 30)
result1(40, 50)