探究call 和 apply 的原理

喜欢ヅ旅行 2022-03-07 12:44 243阅读 0赞

建议看这片文章时可以点击[音乐?][Link 1]，来个单曲循环，美滋滋

[我的博客内容更精彩,好东西需要耐心等待哦！?][Link 2]

# 先拿call开刀 #

> 作用：call和apply都是替换函数内错误的this

var a = {
            value:1
        }
        var b = function(){
            console.log(this.value) // 如果不对this进行绑定执行bar() 会返回undefined
        }
        b.call(a) //1

去除繁琐的讲解，一步到位自己模拟call的用法写一个函数，达到相同目的

Function.prototype.myCall = function(context){
            var context = context || window; //当没传入值时候，就是指全局window
            context.fn = this; //把调用myCall前的方法缓存下来
            var args = [...arguments].slice(1);//使用...打散传入值，并去除第一方法，得到一个数组
            var result = context.fn(...args);//把数组打散，把dinging 18传入b方法中
            delete context.fn; //删除
            return result
        }
        var a = {
            value:1
        }
        var b = function(name,age){
            console.log(this.value)
            console.log(name)
            console.log(age)
        }
        b.myCall(a,"dingding",18)

## apply ##

> apply的方法和 call 方法的实现类似，只不过是如果有参数，以数组形式进行传递

apply这个API平时使用的场景，代码如下:

var a = {
            value:1
        }
        var b = function(name,age){
            console.log(this.value)
            console.log(name)
            console.log(age)
        }
        b.apply(a,["dingding",18])

直接上模拟apply功能代码

Function.prototype.myApply = function(context){
            var context = context || window;
            context.fn = this;
            var result;
            if(arguments[1]){
                result = context.fn(...arguments[1]) 
            }else{
                result = context.fn()
            }
            delete context.fn
            return result
        }
        var a = {
            value:1
        }
        var b = function(name,age){
            console.log(this.value)
            console.log(name)
            console.log(age)
        }
        b.myApply(a,["dingding",18])

[参考资料][Link 3]

[Link 1]: https://zhanghuaxiao.github.io/
[Link 2]: https://zhanghuaxiao.github.io/2019/02/18/%E6%8E%A2%E7%A9%B6call-%E5%92%8C-apply-%E7%9A%84%E5%8E%9F%E7%90%86/#more
[Link 3]: https://www.jianshu.com/p/92b48caee4b2