call 这货到底是什么

1、call有两个妙用:

  1: 继承。(不太喜欢这种继承方式。)
  2: 修改函数运行时的this指针。

这里引用《javascript权威指南》对call的描述


image.png

注意红色框中的部分,f.call(o)其原理就是先通过 o.m = f 将 f作为o的某个临时属性m存储,然后执行m,执行完毕后将m属性删除。

    function f() {

        var a = "name";

        this.b = "test1";

        this.add = function() {
            return "add"
        }

    }

    function o() {

        this.c = "c";

    }

f.call(o) 其实相当于:
    function o() {

        this.c = "c";

        var a = "name";

        this.b = "test1";

        this.add = function() {
            return "add"
        }

    }

说白了,就是把f的方法在o中走一遍,但不做保存。既然不做保存,那么如何通过call实现继承和修改函数运行时的this指针等妙用?关键在于this,对,关键还是在于this的作用域。在之前的文章反复说过,this的作用域不是定义它的函数的作用域,而是执行时的作用域。

image.png

第一个中直接调用fn方法,其中因为没有定义函数作用域,输出的this表示window对象,即全局对象。而第二个中通过fn.call(array[index] , index , array[index] )将fn方法放到array[index]作用域中执行,输出的this表示的是array[index]对象。

//实现each方法封装
var each = function(arr,fn) {
    for (var i=0; i<arr.length; i++){
        fn.call(arr[i],i,arr[i]);
    }

}
each([1,2,3,4],function(i,item){
    console.log(this) //当前this指向arr[i]
    console.log(i)    //上面传的第一个参数i
    console.log(item) //上面传的二个参数arr[i] 这里主要说明call的传参方式
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容