es6 对象字面量里的this

直接上代码

'use strict';

let data = {
    count: 10,
    item: [],
    getItems: () => {
        let count = this.count;
        console.log(this); //{}
        console.log(count); //undefined
        for (var i = 0; i < count; i++) {
            this.item.push(i);
        }
    }
};

data.getItems();

console.log(data.item); //[]

上面这段代码一目了然,方法getItems采用箭头函数,this指向全局空间。

'use strict';

let data = {
    count: 10,
    item: [],
    getItems() {
        let count = this.count;
        console.log(this); //{ count: 10, item: [], getItems: [Function: getItems] }
        console.log(count); //10
        for (var i = 0; i < count; i++) {
            this.item.push(i);
        }
    }
};

data.getItems();

console.log(data.item); //[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

上面这段代码的getItems方法采用方法名(){}的形式,得到了想要的结果。

'use strict';

let data = {
    count: 10,
    item: [],
    getItems: function() {
        let count = this.count;
        console.log(this); //{ count: 10, item: [], getItems: [Function]}
        console.log(count); //10
        for (var i = 0; i < count; i++) {
            this.item.push(i);
        }
    }
};

data.getItems();

console.log(data.item); //[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

上面的代码是es5的写法,一样得到了想要的结果,但是打印出来的this跟前面一组代码有所不同

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

推荐阅读更多精彩内容

  • 函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。 上面代码检查函数l...
    呼呼哥阅读 3,438评论 0 1
  • 一、ES6简介 ​ 历时将近6年的时间来制定的新 ECMAScript 标准 ECMAScript 6(亦称 ...
    一岁一枯荣_阅读 6,108评论 8 25
  • class的基本用法 概述 JavaScript语言的传统方法是通过构造函数,定义并生成新对象。下面是一个例子: ...
    呼呼哥阅读 4,123评论 3 11
  • 突然对“30岁要做上管理阶层”这句话有了更深一点的理解。 也许大部分的人都喜欢过着安稳的生活,觉得在一个岗位上做好...
    昕海薇阅读 103评论 0 1
  • 站住! 你站住, 我总准会把你...
    宋芯雨cindy阅读 263评论 0 0