好好学习-JS基础-call/apply实现

call

call()方法在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法

function foo (){
    console.log(this.name)
}
var obj = {
    name:'xiaoming'
}

foo.call(obj)  // xiaoming

从前面简单的例子中得出几点:

• call 函数改变了 this 的指向,this 指向了 obj
• 执行了 foo 这个函数

那是不是可以简单的理解成,我在这个对象中添加了一个属性,并执行:

var obj  ={
    name:'xiaoming',
    fn:function(){
        console.log(this.name)
    }
}
// this 指向的是 obj
console.log(obj.fn())  // xiaoming

根据上面的思路可以完善一下:

Function.prototype.call1 = function (context) {
    // this指向调用 call1方法的函数,将这个函数赋值给 fn,也就是上面说到的给 obj添加一个 fn 方法
    context.fn = this
    // 执行这个方法
    context.fn()
    //我们不能平白无故的给一个对象添加多余的属性,所以要把这个属性再删除掉
    delete context.fn
}

call()还能给定参数执行函数

Function.prototype.call2 = function(context){
    context.fn = this
    var arg = []
    // 从第二个参数开始取
    for(i=1;i<arguments.length;i++){
        arg.push(arguments[i])
    }
    // 将值传给要执行的函数
    context.fn(...arg)
    delete context.fn
}

this 参数可以为 null,当参数值为 null 时,this 指向的是 window

Function.prorotype.call3 = function (context) {
    //判断参数 context 是否为 null
    var context = context || window
    context.fn = this
    var arg = []
    for(var i = 1;i<arguments.length;i++){
        arg.push(arguments[i])
    }
    context.fn(...arg)
    delete context.fn
}

函数是可以有返回值的!

小栗子:

var obj = {
    value:1
}

function foo (name,age){
    console.log(name)
    console.log(age)
    console.log(this.value)
}
foo.call(obj,"ann",18) 
// ann
// 18
// 1

那么可以进行最后的完善啦~

Function.prototype.call4 = function(context){
    var context = context || window
    context.fn = this
    var arg = []
    for (var i = 1; i<arguments.length; i++) {
        arg.push(arguments[i])
    }
    var result = context.fn(...arg)
    delete context.fn
    return result
}

apply

apply()方法和 call()方法用法很相似

var obj = {
  value: 'value'
}
function foo(name, age) {
  console.log(name)
  console.log(age)
  console.log(this.value)
}

foo.apply(obj, ['ken', 18])
// ken
// 18
// value

实现 apply 方法:

• 改变 this 的指向
• 参数以数组的形式传入

Function.prototype._apply = function (context,arr) {
    context = context || window
    context.fn = this
    var result
    if(!arr){
        result = context.fn()
    }else{
        var arg = []
        for(var i = 0;i<arr.length;i++){
            arg.push(arr[i])
        }
        result = context.fn(...arg)
    }
    delete context.fn
    return result
}

参考文章

https://github.com/mqyqingfen...