js的call和this指向系列

在我理解call主要有2层意思

• 实现继承：

  • 继承属性和方法

    function Fun1(sex) {
        this.sex = sex,
        this.say = function() {
            console.log(this.sex);
        }
    }
    
    function Fun2(sex) {
        //this.sex = 'female';// #1
        Fun1.call(this, sex);
        //this.sex = 'female';// #2
    }
    
    var f2 = new Fun2("male");
    f2.say();// male

    (1) 以上Fun2继承了Fun1的所有属性和方法，所以Fun2的实例f2可以调用say方法输出male。 (2) 如果仅取消注释#1，将输出male，如果仅取消注释#2，将输出female，请体会其中区别

  • 组合继承

    function A() {
       this.name = 'a'
    }
    
    A.prototype = {
       say() {
           console.log(this.name)
       }
    }
    
    function B() {
       A.call(this)// 构造函数继承
    }
    
    B.prototype = Object.create(A.prototype)// 原型继承
    B.prototype.constructor = B// 改变constructor指向
    
    var b = new B()
    
    b.say()// a
    console.log(b.constructor)// B

• 改变this指向

  • 关于this

    var sex = 'male';
    function Foo() {
        console.log(this.sex);
    }
    Foo();// => male // 直接调用，Foo就是普通函数，所以Foo内部的this指向的就是全局(因为函数本身也是挂载到window下面的)，可以向上搜索到male
    Foo.call({sex: 'female'});// female // 同上，但是使用call改变this指向到了传入的对象，所以输出female
    var f = new Foo();// undefined // new关键字生成实例f，Foo就是构造函数，所以Foo内部的this指向实例f本身，f是没有sex这个属性的，输出undefined

    var a = 10
    
    function foo() {
        a = 100
        console.log(a)
        console.log(this.a)// 被当做普通函数调用，this指向全局)
        var a// 变量提升
    }
    foo()// 100 10

  • 简单示例

    function Fun1() {
        this.sex= "male",
        this.say = function() {
            console.log(this.sex);
        }
    }
    
    function Fun2() {
        this.sex= "female";
    }
    
    var f1 = new Fun1();
    var f2 = new Fun2();
    
    f1.say();// male
    f1.say.call(f2);// female // f1.say调用时的this指向被改成了指向f2，所以输出**female**(注意这里并不是继承，f2也没有say这个方法，f2.say()是会报错的)

  • 深入示例

    function foo(cb) {
        var self = this;
        this.sex = 'male';
        setTimeout(function() {
            cb && cb.call(self, 22);// 在这里调用回调函数cb时，this指向foo这个构造函数本身
        })
    }
    var f = new foo(function(age) {
        console.log(this.sex, age);// male 22
    })

    function Foo() {
        this.sex = 'male';
        this.say = function() {
            setTimeout(function() {
                console.log(this.sex);// 定时器普通回调函数中的this指向window
            }, 0)
        }
        this.speak = function() {
            setTimeout(() => {
                console.log(this.sex);// 箭头函数没有自己的this，它的this继承自外部函数的作用域。所以，定时器箭头回调函数中的this指向构造函数Foo本身
            }, 0)
        }
    }
    var f = new Foo()
    f.say()// undefined
    f.speak()// male

call和apply的区别

• call([thisObj[, arg1[, arg2[, …[, argN]]]]])
• apply([thisObj[, argArray]])

参考文章

• call和apply实现继承
• Javascript 中的 call 和 apply
• JS Call()与Apply()