Javascript基础进阶(六) this

什么是this？

(1).JS中的this代表的是当前行为的执行主体。

(2).this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象。

接下来我会总结几种情况。基本上涵盖了所有的this指向问题。

1.*在函数执行时候，首先要看函数前面是否有" . ",有的话。" . "前面是谁this就指向谁，没有的话this就指向window

function fn(){
    var user = "浮云先生";
    console.log(this.user); //undefined
    console.log(this); //Window
}
fn(); // 函数fn()执行前面没有" . ",则this指向window。但是函数fn是私有作用域，window下没有user。所以this.user为undefined

解释：函数fn()执行前面没有" . ",则this指向window。但是函数fn是私有作用域，window下没有user。所以this.user为undefined。

再看一个例子：

function fn() {
    console.log(this);
};
var obj = {
    fn: fn
};
fn(); //--->window
obj.fn(); //--->obj
function fn2() {
    fn();//--->window
};
fn2();

解释：首先看函数fn()前面没有" . ",则this指向window。 obj.fn()，前面是obj，则this指向obj，第三次调用fn()实在函数fn2()中，但是前面没有" . "，则this指向window。

是不是感觉其实this很简单！

注意：这一有一种特殊情况：

function fn() {
    console.log(this);
};
var obj = {
    fn: fn
};
var a = obj.fn;
a(); // --->window

可以看到这里this指向的是window。this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的，函数fn赋值给变量a的时候并没有执行,执行的时候是a(). 所以还是上面那句话a前面并没有" . "，所以最终指向的是window。

2.*自执行函数中的window永远指向window

~function() {
    console.log(this); //---> window
}()

3.*给html中某个元素绑定一个事件方法，当事件触发的时候，执行对应的方法，this指向当前执行方法的元素。

假设现在有一个id为odiv的div标签元素。

document.getElementById('odiv').onclick = function() {
    console.log(this); // ---> #odiv
}

可以看到this指向当前元素odiv。

在ie6—8下，如果使用DOM2事件绑定，方法执行的时候，里面的this部署当前元素而是window

document.getElementById('odiv').attachEvent('onclick',function(){
      // this=>window
})

4.*在构造函数或者构造函数原型对象中this指向构造函数的实例

function fn(){
    console.log(this);//---> a
    this.name = "浮云先生";
}
var a = new fn();
console.log(a.name); //浮云先生

我们这里用变量a创建了一个Fn的实例（相当于复制了一份Fn到对象a里面），此时仅仅只是创建，并没有执行，而调用这个函数Fn的是对象a，那么this指向的自然是对象a，那么为什么对象a中会有name，因为你已经复制了一份Fn函数到对象a中，用了new关键字就等同于复制了一份。

注意：当this遇到return时

//1
function fn() {  
    this.user = '浮云先生';  
    return {};  
}
var a = new fn();  
console.log(a.user); //undefined


//2
function fn() {  
    this.user = '浮云先生';  
    return function(){};
}
var a = new fn();  
console.log(a.user); //undefined


//3
function fn() {  
    this.user = '浮云先生';  
    return {
        user: '小明'
    };  
}
var a = new fn();  
console.log(a.user); //小明


//4
function fn()  {  
    this.user = '浮云先生';  
    return undefined;
}
var a = new fn();  
console.log(a.user); //浮云先生


//5
function fn() {  
    this.user = '浮云先生';  
    return 1;
}
var a = new fn;  
console.log(a.user); //浮云先生

通过上面代码可以发现：

如果返回值是一个对象（引用类型值），那么this指向的就是那个返回的对象，如果返回值不是一个对象(变量)那么this还是指向函数的实例。

但是这里需要注意一个特殊情况 null，null也是对象，但是在这里this还是指向那个函数的实例，因为null比较特殊。

function fn() {  
    this.user = '浮云先生';  
    return null;
}
var a = new fn();  
console.log(a.user); //浮云先生

觉得写的不错的小伙伴点赞加关注哦！ (=・ω・=)