关于 javascript 的 this

this

首先,this的指向在函数定义的时候是确定不了的只有函数执行的时候才能确定this到底指向谁因为this的最终指向的是那个最后调用它的对象但是这么说也是有些问题存在

demo1
function a(){
  var name = 'axing';
  console.info(this.name); //undefined
  console.info(this); //Window
}
a(); 
// -> window.a();

重点是看函数的调用者 window全局调用this就指向了window 这时候window下并没有user,所以值为undefined

demo2
var obj = {
    name:'axing',
    fn:function(){
        console.info(this.name);  //axing
    }
}
obj.fn(); // -> 看此时的调用者是obj

按照开头所说this指向的是调用者的说法 这个时候this指向的就是obj 现在去找obj.name很显然就是axing 在这个时候开头说的仍然是成立的

demo3
var obj = {
    name:'axing',
    fn:function(){
        console.info(this.name);  //axing
    }
}
window.obj.fn();

跟上面的代码没有太大的区别 在这段代码中,最终的调用者是window,按照上面说法window下是没有name的 但是this.name还是输出了axing....

//先看下面这段代码
var obj = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.info(this.a); //12
        }
    }
}
obj.b.fn();

这里的最终调用者是obj,正常来说this应该指向了obj,此时obj的name值为10 为什么没有输出10呢???

我自己理解的概念是这样的.

1.在一个函数中,如果有this关键字,但是如果这个this没有被这个函数的上一级调用的话 这个时候this就会指向了window 2.相反,如果有this关键字并且this有被这个函数的上一级调用,name此时的this 就会指向上一级,反之指向window 3.如果函数中有this,并且函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也是它上一级对象

var obj = {
    a:10,
    b:{
        // a:12,
        fn:function(){
            console.info(this.a); //undefined
        }
    }
}
obj.b.fn();

这个时候输出undefined,说明this是去它的上一级寻找this.a

var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.info(this.a);
            console.info(this); 
        }
    }
}
var j = o.b.fn;     
j(); 

这个时候j是什么? 调用j会输出什么??? 重点 -> 调用

构造函数this
function Person(){
    this.name = 'axing';
}
var a = new Person();
console.info(a.name); 

简单的实例一个对象 此时的a.name继承了a的构造函数原型上的name属性<br> 因为去new一个对象时候会改变this的指向,并指向了实例化的对象<br> 这个时候a.name就会去去实例化的对象上去寻找name属性,在实例化的对象的__proto__上并没有name属性,所以按照js构造函数的逻辑,实例化对象继承了构造函数prototype原型对象的name属性,这个时候继承的name值就是构造函数原型prototype原型对象上的nameaxing<br> 这里涉及到了面向对象的继承<br> 继承就像是复制操作,去实例化一个对象的时候,会去继承构造函数上的属性和方法<br> 只是在构造函数与实例化的对象之间创建一个关联<br> 实例化的对象就可以通过委托访问构造函数的原型属性和方法<br> 在实例化一个对象时候,实例化的对象会继承自己构造函数原型上的属性和方法<br> 在实例化的对象上增加与构造函数相同的属性的话会覆盖原型上的属性

当this碰到了return就出现了一些问题

1.

function Person()  {  
    this.name = 'axing';  
    return {};
}
var a = new Person();  
console.log(a.name); //undefined

2.

function Person()  {  
    this.name = 'axing';  
    return function(){}; 
}
var a = new Person();  
console.log(a.name); //undefined

3.

function Person()  {  
    this.name = 'axing';  
    return 1; 
}
var a = new Person();  
console.log(a.name); //axing

如果返回值是一个对象,那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例

function Person(){  
    this.name = 'axing';  
    return null;
}
typeof null ???  -> object
var a = new Person();  
console.log(a.name);//axing

nulljs是个比较特殊的对象,虽然值也是个对象,但是this遇到null仍然指向当前构造函数的实例对象

理解this看这篇文章,简直醍醐灌顶