JavaScript 基础与提高

JavaScript 坑与技巧:this

2017-02-06  本文已影响12人  soojade

this

在方法内部的函数中使用this

'use strict';

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

xiaoming.age(); // Uncaught TypeError: Cannot read property 'birth' of undefined

由于this指针只在age方法的函数内指向xiaoming,在函数内部定义的函数,this又指向undefined了!(在非strict模式下,它重新指向全局对象window!)

修复的方法可以声明一个that变量来捕获this

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var that = this; // 在方法内部一开始就捕获this
        function getAgeFromBirth() {
            var y = new Date().getFullYear();
            return y - that.birth; // 用that而不是this
        }
        return getAgeFromBirth();
    }
};

xiaoming.age(); // 25

也可以使用箭头函数:

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
        return fn();
    }
};
obj.getAge(); // 25

由于this在箭头函数中已经按照词法作用域绑定了,所以,用call()或者apply()调用箭头函数时,无法对this进行绑定,即传入的第一个参数被忽略:

var obj = {
    birth: 1990,
    getAge: function (year) {
        var b = this.birth; // 1990
        var fn = (y) => y - this.birth; // this.birth仍是1990
        return fn.call({birth:2000}, year);
    }
};
obj.getAge(2015); // 25

注意在对象中使用箭头函数定义属性时,this的指向,例如:

let a = 10;
let obj = {
  a: 2,
  func: () => console.log(this.a) // 或者console.log(a)  调用结果都是指向全局的 a
}

所以要this指向对象就不要使用箭头函数定义属性方法:

let obj = {
  a: 2,
func: function(){
  console.log(this.a); // 2
}
}
上一篇 下一篇

猜你喜欢

热点阅读