this

JavaScript的函数内部如果调用了this,那么这个this到底指向谁?答案是,视情况而定!如果以对象的方法形式调用,该函数的this指向被调用的对象。

function getAge(){
    var y = new Date().getFullYear();
    return y - this.birth;
}
var xiaoming = {
    name: '小明',
    birth: 1990,
    age: getAge
};

在上面xiaoming.age()中,this指的是xiaoming,但是如果单独调用函数,比如getAge(),此时,该函数的this指向全局对象,也就是window。并且要保证this指向正确,必须用obj.xxx()的形式调用!

console.log(xiaoming.age();  //27
console.log(getAge());   //NaN
var fn = xiaoming.age;
console.log(fn());  //NaN

有些时候,喜欢重构的你把方法重构了一下,结果又报错了!原因是this指针只在age方法的函数内指向xiaoming,在函数内部定义的函数,this又指向undefined了!(在非strict模式下,它重新指向全局对象window,因为函数是独立调用,而不是方法调用)。

var lilei = {
    name:'李雷',
    birth:1996,
    age:function(){
      function getAgeFromBirth(){
           var y = new Date().getFullYear();
           return y - this.birth;
      }
      return getAgeFromBirth();
    }
}
console.log(lilei.age());   //NaN

此时,我们可以用一个变量来捕获this。

var hanmeimei = {
    name:'韩梅梅',
    birth:1996,
    age:function(){
        var that = this;
        function getAgeFromBirth(){
            var y = new Date().getFullYear();
            return y - that.birth;
        }
        return getAgeFromBirth();
    }
}
console.log(hanmeimei.age());  //21

下面的test()函数是独立调用,而不是方法调用,所以this默认绑定到window。

var a = 0;
function faa(){
   function test(){
      console.log(this.a);
   }
   return test;
};
var aa ={
    a:2,
    faa:faa    
 }
 aa.faa()();  //0

由于闭包的this默认绑定到window对象,但又常常需要访问嵌套函数的this,所以常常在嵌套函数中使用var that = this,然后在闭包中使用that替代this,使用作用域查找的方法来找到嵌套函数的this值 。

var b= 0;
function fbb(){
    var that = this;
    function test(){
        console.log(that.b);
    }
        return test;
};
var  bb = {
    b:2,
    fbb:fbb
}
bb.fbb()();  //2

 

posted on 2018-06-09 22:20  紅葉  阅读(204)  评论(0编辑  收藏  举报