call(),apply(),bind()的手动实现

447 阅读1分钟

call()

定义:call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

语法:function.call(this, arg1, arg2, ...)

示例
var name = '111'
function fun() {
    console.log(this.name, arguments)
}
let obj = {
    name: '222'
}
fun.call(obj, 1,2,3)  // call()立即执行

执行结果:

  • call()立即执行
  • 首参传入的对象作为函数的上下文,函数内this指向该对象

代码实现:

思路:将函数作为传入对象的属性,此时函数的this指向该对象

apply()

和call()实现思路一样,只不过需将传入的数组参数序列化

定义:apply() 方法调用一个具有给定this值的函数,以及作为一个数组(或类似数组对象)提供的参数。

语法:function.call(this, [arg1, arg2, ...])

示例
var name = '111'
function fun() {
    console.log(this.name, arguments)
}
let obj = {
    name: '222'
}
fun.apply(obj, [1,2,3])  // apply()立即执行

执行结果:

代码实现:

思路:参考call()的实现,区别在于需将数组参数序列化

bind()

定义:bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。

语法:function.bind(this, [, arg1[, arg2[, ...]]])

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

示例
var name = '111'
function fun() {
    console.log(this.name, arguments)
}
let obj = {
    name: '222'
}
fun.bind(obj, [1,2,3])()  // bind()调用后才会执行

代码实现:

思路:利用闭包返回待执行函数

  • 严格模式下,任何类型的实参,都会作为函数的this,null/undefined也适用
  • 非严格模式下,传入null/undefined,上下文为全局对象(window);传入基本数据类型(number,string,boolean)则为他们的包装对象