JavaScript---ES6---学习笔记02(对象字面量)

最新推荐文章于 2024-09-26 01:42:12 发布

水安寒(๑˙ー˙๑)

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量162

点赞数

文章标签： javascript es6

本文链接：https://blog.csdn.net/qq_45905968/article/details/108370153

版权

本文详细介绍了ES6中对象字面量的五个扩展：简洁属性，简洁方法，计算属性名，设定[[Prototype]]以及super对象的使用。简洁属性允许直接使用变量名作为属性名，简洁方法简化了对象方法的定义。计算属性名解决了属性名需要动态计算的情况。通过Object.setPrototypeOf()可以设置对象的[[Prototype]]。super对象不仅在类中使用，也能在普通对象的方法中调用父对象的方法。

摘要由CSDN通过智能技术生成

五、对象字面量扩展

5.1 简洁属性

对于以下赋值形式我们已近非常熟悉

var x = 2, y = 3

var o = {
    x: x,
    y: y
}

但是对于x: x这种写法还是太麻烦了，在ES6中如果你需要定义一个与某个词法标识符同名的属性的话，可以直接简写为x，如下。

var x = 2, y = 3

var o = {
    x,
    y
}

5.2 简洁方法

与上面的赋值思路类似，为了表达方便，关联到对象上的函数也有简洁的形式。

老方法：

var o = {
    x: function() {},
    y: function() {}
}

ES6中：

var o = {
    x() {},
    y() {}
}

5.3 计算属性名

可能遇见过下面这种情况的代码，其中的一个或多个属性名来自于某个表达式，因此无法用对象字面量表达。

var prefix = "user_"

var o = {
    baz: function(...){..}
}

o[ prefix + "foo" ]: function(..){..}
o[ prefix + "bar" ]: function(..){..}
..

ES6对对象字面定义新增了一个语法，用来支持指定一个要计算的表达式，其结果作为属性名。如下：

var prefix = "user_"

var o = {
    baz: function(..){..},
    [ prefix + "foo" ]: function(..){..},
    [ prefix + "bar" ]: function(..){..},
    ..
}

同理方法名和生成器名都可以使用上面的方法进行计算。

5.4 设定[[Prototype]]

在ES6中，要为已经存在的对象设定[[Prototype]]，可以使用ES6工具Object.setPrototypeOf()。

var o1 = {...}
var o2 = {...}

Object.setPrototypeOf( o2, o1 )

// 旧写法
var o1 = {...}
var o2 = {
    __proto__: o1,
    ...
}

5.5 super对象

通常把super看作只与类相关。但是，鉴于JavaScript的原型类而非类对象的本质，super对于普通（plain）对象的简洁方法也一样有效，特性也基本相同。

var o1 = {
    foo() {
        console.log( "o1: foo" )
    }
}

var o2 = {
    foo() {
        super.foo()
        console.log( "o2: foo" )
    }
}

Object.setPrototypeOf( o2, o1 )

o2.foo()        // o1: foo
                // o2: foo