JavaScript函数中this的指向

Posted 2020-07-16

我们都知道 javascript 函数中 this 在不同情况下是指向不同的对象的。接下来我就来谈谈以下几种情况下 this 的值。

全局作用域下

console.log(this); // window

当在全局作用域中使用 this ，它指向全局对象 window.

这里详细介绍下全局对象：

全局对象(Global object) 是在进入任何执行上下文之前就已经创建了的对象；

这个对象只存在一份，它的属性在程序中任何地方都可以访问，全局对象的生命周期终止于程序退出那一刻。

全局对象初始创建阶段将 Math、String、Date、parseInt 作为自身属性，等属性初始化，同样也可以有额外创建的其它对象作为属性（其可以指向到全局对象自身）。例如，在 DOM 中，全局对象的 window 属性就可以引用全局对象自身。

所以在 console 内输入 window 和 this.window 是一样的。

调用一个函数时

function pet(){
    console.log(this); 
}
pet()； // window

在这种情况下， this 同样指向全局对象 window

调用一个函数方法时

var pet = {
    words: ‘....‘,
    speak: function() {
        console.log(this.words);
        console.log(this === pet);
    }
};
pet.speak()； // .... true

我们可以看到，这时 this 指向的是 pet 对象，也就是函数方法所在的对象。

调用构造函数时

function Pet(words){
    this.words = words;
    this.speak = function(){
        console.log(this.words);
        console.log(this === cat);
    };
}
var cat = new Pet(‘miao‘);
cat.speak(); // miao true

这时， this 指向构造函数的新实例 cat

调用apply或call方法设置this指向

var pet = {
    words: ‘....‘,
    speak: function() {
        console.log(this.words);
        console.log(this === dog);
    }
};

var dog = {
    words: ‘wang‘
};

pet.speak.apply(dog)； // wang true
pet.speak.call(dog)； // wang true

在 JavaScript 中，可以通过调用 apply 或 call 方法显性的设置 this 的指向， this 的值为调用该方法是传递的第一个参数。因此，上述 this 指向了 dog 对象。

综上，this的应用情况已全部总结完毕。