this

this

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

'use strict';

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        function getAgeFromBirth() {
            var y = new Date().getFullYear();
            return y - this.birth;
        }
        return getAgeFromBirth(); // 非严格模式下,在这里函数执行的时候可以看作是window.getAgeFromBirth(),所以this指向了window
    }
};

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指向只和上下文相关。所以要this指向对象就不要使用箭头函数定义属性方法:

let obj = {
  a: 2,
func: function(){
  console.log(this.a); // 2
}
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 函数 1.JavaScript允许传入任意个参数而不影响调用,因此传入的参数比定义的参数多也没有问题,虽然函数内部...
    wyude阅读 185评论 0 1
  • 函数就是最基本的一种代码抽象的方式。 定义函数function abs(x) {if (x >=0){return...
    _我和你一样阅读 460评论 0 0
  • ES6标准新增了一种新的函数:Arrow Function(箭头函数)。为什么叫Arrow Function? 因...
    八宝君阅读 224评论 0 0
  • f28af672d950阅读 158评论 0 0
  • 1.《风雨哈佛路》 英文原版名:Breaking Night: A Memoir of Forgiveness, ...
    慕容雪洛阅读 411评论 0 0