再谈js中的this的问题

181 阅读2分钟

写在前面

相信大家不管在平时工作还是面试的时候,都会遇到this的问题;虽然自己也用到n多次,但是很少去总结;今天利用空闲时间,悉心的来总结下; 一般来说,this在函数定义的时候确定不了,只有在函数在执行的时候才能确定具体的this值; 通常会遇到以下4种情况;

1.在一般方法中使用;

当不是严格模式下,在一般方法中this指向的是全局对象windows,当为严格模式下,则指向undefined。
function test() {
    console.log(this);  // 在不严格模式下,打印出windows,当为严格模式下,则为undefined
}
test();

2.作为某个对象的方法使用

var obj1 = {
    num: 1,
    test: function() {
        console.log(this.a);
    }
}

obj1.test();
当作为某个对象的方法来调用时,this则指向的是那个对象。

3.作为构造函数来调用

function test(){
    this.num = 1;
}

var example = new test();
console.log(example.num);  // 打印出来的为1
作为构造函数来调用时,则指向的是new 出来的那个实例;

4.通过apply、call、bind方法来调用

var f = {
    test3: function() {
        this.num = 22;
    }
};
var g = {};
f.test3.apply(g);

当处在这种情况下,这些方法的第一个参数为改变后调用这个函数的对象,this指代第一个参数

5.当在setTimeOut()、setinterval()函数中this指向的是全局对象windows

var num = 1;
setTimeout(function(){
    var num = 2;
    console.log(this.num); // 这个时候打印出来的是1,并不是2
}, 1000);

6.立即执行函数

项目中,有时会使用立即执行函数,那么在立即执行函数中,this指向的依然是全局对象;
var num = 3;
(function(){
    var num = 2;
    console.log(this.num); // 打印的结果为3,并不是2
})();

7. Es6中的this

Es6中的this比较特别,指向的是它定义时的那个函数。