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()// aconsole.log(b.constructor)// B

• 改变this指向

  • 关于this

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

    var a = 10function 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();// malef1.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()// undefinedf.speak()// male

call和apply的区别

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

参考文章

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