什么是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); //浮云先生
觉得写的不错的小伙伴点赞加关注哦！ (=・ω・=)
网友评论