箭头函数中this.的使用方法问题

廖雪峰大大的网站学习JS,其中的箭头函数篇章遇到了关于this的使用问题。

廖大的文中是这么说:
由于JavaScript函数对this绑定的错误处理,下面的例子无法得到预期结果:


var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = function () {
            return new Date().getFullYear() - this.birth; // this指向window或undefined
        };
        return fn();
    }
};

现在,箭头函数完全修复了this的指向,this总是指向词法作用域,也就是外层调用者obj:

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

下面有个一同学评论,贴了以下代码:

var xiaoming = {
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp'],
    toJSON:  () => ({'Name': this.name,'Age': this.age});
};

我尝试运行了一下,运行结果不对,没有获取到this.name和this.age。

另外下面一个同学总结的很好,我直接贴上来,作为笔记:

//用"只想安安静静码"的方法在对象中使用箭头函数:
    var xiaoming_1 = {
        name: '小明',
        age: 14,
        gender: true,
        height: 1.65,
        grade: null,
        'middle-school': '\"W3C\" Middle School',
        skills: ['JavaScript', 'Java', 'Python', 'Lisp'],
        toJSON:  function(){
            var fn=()=>({'Name': this.name,'Age': this.age})  // 将箭头函数放置于一个方法内
            return fn()
        }
    };
    xiaoming_1.toJSON()  // Object {Name: "小明", Age: 14}
//而用"创新ZCS"的方法, 直接将箭头函数作为对象方法,将得不到对象的this.name跟this.age, 而是得到windows的name和age:
    var xiaoming_2 = {
        name: '小明',
        age: 14,
        gender: true,
        height: 1.65,
        grade: null,
        'middle-school': '\"W3C\" Middle School',
        skills: ['JavaScript', 'Java', 'Python', 'Lisp'],
        toJSON:  ()=>({'Name': this.name,'Age': this.age})
    };
    xiaoming_2.toJSON() // Object {Name: "list", Age: undefined}  正好我的windows有个名为name的属性值为"list"
//有趣的是如果将匿名函数直接作为对象的方法, 则this的指向却是正确的:
    var xiaoming_3 = {
        name: '小明',
        age: 14,
        gender: true,
        height: 1.65,
        grade: null,
        'middle-school': '\"W3C\" Middle School',
        skills: ['JavaScript', 'Java', 'Python', 'Lisp'],
        toJSON:  function () { return {'Name':this.name,'Age': this.age}}
    };
    xiaoming_3.toJSON()   // Object {Name: "小明", Age: 14}

原因我认为就是箭头函数的this会按照词法作用域绑定, 也就是指向外层调用者. (注意, 普通的定义在对象方法或内部方法中的内部函数的this就没有这个特点)
如果在全局环境下调用一个对象的一个由箭头函数实现的方法, 则这个箭头函数的外层调用者是windows, 箭头函数的this指向windows对象. 如xiaoming_2
如果调用箭头函数的是一个对象的方法, 则这个箭头函数的外层调用者是拥有该方法的对象, 箭头函数的this指向该对象. 如xiaoming_1
可以粗暴理解成"箭头函数在哪儿被调用, 箭头函数的this就指向哪儿"
而xiaoming_3中方法toJSON的实现就是个匿名函数, 也就是一个普通的内部函数, 它其中的this和一般内部函数中的this没有什么不同, 只要用obj.xxx形式访问这个方法, 匿名方法中的this指向的就是obj

我想表达表达不出来,其实大体的体会也是这个意思,借用他的表述。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 与其他语言相比,函数的this关键字在JavaScript中的表现略有不同,此外,在严格模式和非严格模式之间也会有...
    codingC阅读 646评论 0 0
  • 函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。 上面代码检查函数l...
    呼呼哥阅读 3,708评论 0 1
  • 函数函数定义与调用变量作用域全局变量方法高阶函数闭包箭头函数$generator$ 函数 函数定义与调用 定义函数...
    染微言阅读 689评论 0 5
  • 本文是大神廖雪峰的JavaScript教程学习笔记。并不是教程,如有需要,请前往廖雪峰大神大博客. 一、函数定义和...
    0o冻僵的企鹅o0阅读 573评论 1 3
  • 首先声明,我不是一个职业写手,从来没有自信有那么好的文采和想象力,只是一个生活在大家身边的一个普通的上班族。...
    火山哥2阅读 329评论 0 2

友情链接更多精彩内容