关于this,首先要知道this的是在代码执行的时候才能确定的,定义的时候不能确定,因为this是执行上下文的一部分,而执行上下文是在代执行的时候才能确定的。实际上this的最终指向的是那个调用它的对象。
想理解this先看几个例子:
var a = {
name:'A',
fn: funcrion(){
console.log(this.name);
console.log(this);
}
}
a.fn(); //this.name === 'A'; this===a
a.fn.call({name:'B'}); //this.name===='B'; this==={name:'B'}
var fn1 = a.fn;
fn1(); //this.name === undefined; this===window
通过上面的例子可以看出this的执行会有不同,主要集中在以下几种情况:
1.作为构造函数执行,在构造函数中(上面例子未体现)
2.作为对象属性执行,上述代码中的a.fn();
3.作为普通函数执行,上述代码中fn1();
4.用于call,apply,bind,上述代码中a.fn.call({name:‘B’});
其中fn1() 的执行结果有些出乎意料,上文说过**‘实际上this的最终指向的是那个调用它的对象’**,fn1中this为什么指向了window?继续来看例子:
function a() {
var user = "例子";
console.log(this.user); //undefined
console.log(this); //window
}
a();
按照我们上面说的this最终指向的是调用它的对象,这里的函数a实际是被Window对象所点出来的,下面的代码就可以证明:
function a() {
var user = "例子";
console.log(this.user); //undefined
console.log(this); //window
}
window.a();
继续看例子:
var o = {
user: "例子",
fn: function(){
console.log(this.user); //'例子'
console.log(this); // o
}
}
o.fn(); ==>window.o.fn()
o.fn();等价于window.o.fn(),但是this并没有指向window,而是指向O对象;是不是有些迷惑,继续看例子:
var o = {
a : 10,
b : {
a:12,
fn:function(){
console.log(this.a); //12
console.log(this); //b
}
}
}
o.b.fn();
同样属性都是对象o调用出来的,但同样this没有指向O。其实我们需要知道以下几点:
1.如果一个函数中有this,但是没有被上一级对象调用,那么this就指向window,严格模式下t’his将指向undefined;
2.如果一个函数中有this,这个函数被上一级对象调用,那么this指向上一级对象;
3.如果函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也是其上一级对象。(上面的例子中,将b对象的值注销既可以验证)
var o = {
a : 10,
b : {
//a:12,
fn:function(){
console.log(this.a); //undefined
console.log(this); //b
}
}
}
o.b.fn();
还有个特殊的例子:
var o = {
a : 10,
b : {
a:12,
fn:function(){
console.log(this.a); //undefined
console.log(this); //window;
}
}
}
var c = o.b.fn;
c();
this指向的是最后调用它的对象,也就是看它执行的时候是谁调用的,这个例子中虽然函数fn是被对象b所引用,但是在将fn赋值给变量c的时候并没有执行所以最终指向的是window。
在构造函数中this指向也会不同:
function Fn(){
this.user = '例子';
}
var a = new Fn();
console.log(a.user) //'例子'
这里a可以调用到user的值,因为构造函数new关键字改变了this的指向,所以将this指向a。
当this遇到return时结果也会有差异,如下面的连个例子:
function Fn(){
this.user = '例子';
return {};
}
var a = new Fn();
console.log(a.user) //undefined
function Fn(){
this.user = '例子';
return 1;
}
var a = new Fn();
console.log(a.user) //'例子'
#####总结: 如果返回值是一个对象,那么this指向返回的这个对象,如果返回值不是一个对象,那么this还是指向函数的实例;null也是一个对象,但是null比较特殊,返回值是null,this还是指向函数的实例。