JavaScript函数中call、apply和bind的详解和手动实现

• bind()和手动模拟实现

身世背景

===================================================================

是什么？

在前面的学习的JS原型链中，我们可以知道，js中所有的函数都是Function的实例，Function的原型对象即Function.prototype）中有很多属性和方法，其中就包括call,apply和bind方法。

根据原型的规则，所有的函数都可以使用原型中属性和方法，所以，所有的函数并且只有函数可以使用call，apply和bind方法。

干什么？

它们的作用可以用一句话来描述：就是改变this的指向。

call()、apply()和bind()的区别

=======================================================================================

相同：

• 都能够改变目标函数执行时内部 this 的指向

• 方法的第一个参数用于指定函数执行时内部的 this 值

• 支持向目标函数传递任意个参数

• 若不向方法的第一个参数传值或者传递undefined、null，则在 JavaScript 正常模式下，目标函数内部的 this 指向 window 对象，严格模式下，分别指向 undefined、null。

不同：

• apply() 方法可接收两个参数，而 call() 和 bind() 方法则可接收多个参数。

• apply() 方法向目标函数传递参数时只需将参数数组或 arguments 对象作为方法的第二个参数即可，而 call() 和 bind() 方法则需要将传参逐个列举在方法的一个参数后面。

• 调用 call() 和 apply() 方法时会立即执行目标函数，而 bind() 方法则不会，它将返回一个新函数——目标函数的拷贝，该函数内部的 this 指向 bind() 方法的第一个参数，之后执行新函数相当于执行了目标函数。

• 只有 bind() 方法实现了函数柯里化，因此可以分两次向目标函数传递参数。

call()和手动模拟实现

============================================================================

call()方法

调用 call() 方法会立即执行目标函数，同时改变函数内部 this 的指向。this 指向由方法的第一个参数决定，后面逐个列举的任意个参数将作为目标函数的参数一一对应传入。

let obj = {

name:“胡歌”,

sum(a, b) {

console.log(this.name)

return a + b

}

}

let obj1 = {

name:“李逍遥”

}

obj.sum.call(obj1, 1, 2) // 李逍遥 3

/* 正常模式 */

obj.sum.call() // window

obj.sum.call(undefined, 1, 2) // window

obj.sum.call(null, 1, 2) // window

/* 严格模式 */

‘use strict’

obj.sum.call() // undefined

obj.sum.call(undefined, 1, 2) // undefined

obj.sum.call(null, 1, 2) // null

手动模拟实现

设计逻辑：

• myCall() 方法被添加在 Function 原型对象上，目标函数调用该方法时，myCall() 方法内部的 this 将指向目标函数。

• 将目标函数作为 context 对象的方法来执行，由此目标函数内部的 this 将指向 context 对象。

• 从 context 对象中删除目标函数

• 使用扩展运算符 … 处理传入目标函数的参数

Function.prototype.myCall = function (context, …args) {

if (context === undefined || context === null) {

context = window

}

context.fn = this

const result = context.fn(…args)

delete context.fn

return result

}

let obj1 = {

num: 1,

sum(a, b) {

console.log(this)

return this.num + a + b

}

}

let obj2 = {

num: 10

}

console.log(obj1.sum.call(obj2, 2, 3)) // 15

console.log(obj1.sum.myCall(obj2, 2, 3)) // 15

apply()和手动模拟实现

=============================================================================

apply()方法

调用 apply() 方法会立即执行目标函数，同时改变函数内部 this 的指向。this 指向由方法的第一个参数决定，第二个参数是一个参数数组或 arguments 对象，各数组元素或 arguments 对象表示的各参数将作为目标函数的参数一一对应传入。

obj1.sum.apply(obj2, [2, 3])

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。