ES6躬行记(5)——对象字面量的扩展

简介:   当创建对象字面量时,如果属性值是与属性同名的已定义的标识符(例如变量、常量等),那么ES6允许省略冒号和属性值,这样就能避免冗余的初始化。下面分别用传统的键值对和最新的简写方式创建对象字面量,可以明显的看出,第二种书写起来更加精炼。

一、简洁属性和方法


  当创建对象字面量时,如果属性值是与属性同名的已定义的标识符(例如变量、常量等),那么ES6允许省略冒号和属性值,这样就能避免冗余的初始化。下面分别用传统的键值对和最新的简写方式创建对象字面量,可以明显的看出,第二种书写起来更加精炼。


let name = "strick",
  age = 28,
  obj;
//键值对的写法
obj = { name: name, age: age };
//只有属性名的简洁写法
obj = { name, age };


  属性上的方法也可以用更加简洁、直观的语法来表达。如下代码所示,声明getName()时使用了传统的方式,而声明getAge()时,使用了省略冒号和function关键字的简洁方式。


obj = {
  getName: function() {    //传统方式
    return name;
  },
  getAge() {              //简洁方式
    return age;
  }
};


  注意,简写的方法不支持递归调用,并且只有简写的方法才能支持super对象(将在下面的原型一节中介绍)。


二、计算属性名


  对象字面量中的属性名可以用标识符或字符串字面量表示,不仅如此,ES6还允许属性名是要计算的表达式,但需要用方括号包裹,具体如下所示。


obj = {
  name,                       //标识符
  "age": age,                   //字符串字面量
  [name + "2"]: "freedom",        //要计算的表达式
  [name + "3"]() {
    return name;
  }
};


  注意,当属性名是表达式或字符串字面量时,无法使用前面的简洁写法,而用表达式定义的方法不受此限制。


三、原型


  在ES6标准的附录B中收入了一个有争议的非标准属性__proto__,这是一个访问器属性,继承自Object.prototype,用于读写对象的原型。虽然现代浏览器都实现了它,但毕竟是一个内部属性并且其它运行环境对它不一定支持,因此不推荐使用。

  为了能更灵活地操作对象的原型,ECMAScript标准为Object对象提供了两个静态方法,其中ES5引入了getPrototypeOf()方法获取对象的原型,ES6引入了setPrototypeOf()方法修改对象的原型。此方法的第一个参数是待修改的对象,第二个参数是新原型(一个对象或null),具体使用如下所示。

let chain = {},
  proto;
Object.setPrototypeOf(chain, { name: "freedom" });
proto = Object.getPrototypeOf(chain);
console.log(proto === chain.__proto__);         //true

  上面代码的最后一句做了一次全等比较,比较结果是true,说明运算符左右两边的操作数指向了同一个对象,这也证明了setPrototypeOf()和getPrototypeOf()两个方法可以取代__proto__属性。

  ES6新增了super关键字,可指向当前对象的原型,相当于调用Object.getPrototypeOf()方法。注意,super关键字只能出现在简洁方法中,并且必须以调用的方式出现,具体使用如下所示。


let father = {
  getName() {
    console.log("father");
  }
};
let child = {
  getName() {
    super.getName();
    console.log("child");
  }
};
Object.setPrototypeOf(child, father);
child.getName();    //先输出"father",再输出"child"


  执行上面代码中的super.getName(),相当于执行Object.getPrototypeOf(this).getName()或Object.getPrototypeOf(this).getName.call(this)。注意,当用super关键字调用原型上的方法时,this绑定的是当前对象,而不是原型所指向的对象。下面用代码展示了3种方式调用原型上的getName()方法。


father = {
  name: "father",
  getName() {
    console.log(this.name);
  }
};
child = {
  name: "child",
  getName() {
    super.getName();                             //"child"
    Object.getPrototypeOf(this).getName();           //"father"
    Object.getPrototypeOf(this).getName.call(this);    //"child"
  }
};
Object.setPrototypeOf(child, father);
child.getName();



相关文章
|
3月前
|
设计模式 Rust JavaScript
【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数
【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数
37 0
|
3月前
|
JSON C# 开发者
C# 11.0引入自然字符串字面量:简化字符串处理的新时代
【1月更文挑战第26天】C# 11.0带来了一个令人兴奋的新特性:自然字符串字面量。这一特性旨在简化字符串的创建和处理,使开发者能够更直观地编写涉及多行字符串、转义字符和插值表达式的代码。自然字符串字面量不仅提高了代码的可读性,还减少了因转义字符引起的错误。本文将深入探讨C# 11.0中自然字符串字面量的概念、使用方法和其对现有字符串处理方式的改进。
|
8月前
|
前端开发
前端学习笔记202306学习笔记第三十八天-Es6-对象得解构赋值2
前端学习笔记202306学习笔记第三十八天-Es6-对象得解构赋值2
44 0
|
4月前
|
JavaScript 前端开发
JavaScript开发中ES6+新特性:使用解构赋值的好处是什么?
JavaScript开发中ES6+新特性:使用解构赋值的好处是什么?
48 2
|
8月前
|
前端开发
前端学习笔记202306学习笔记第三十八天-Es6-对象得解构赋值3
前端学习笔记202306学习笔记第三十八天-Es6-对象得解构赋值3
34 0
|
8月前
|
前端开发
前端学习笔记202306学习笔记第三十八天-Es6-字符串的解构赋值1
前端学习笔记202306学习笔记第三十八天-Es6-字符串的解构赋值1
38 0
前端学习笔记202306学习笔记第三十八天-Es6-字符串的解构赋值1
|
8月前
|
前端开发
前端学习笔记202306学习笔记第三十八天-Es6-对象得解构赋值1
前端学习笔记202306学习笔记第三十八天-Es6-对象得解构赋值1
46 0
|
10月前
每天3分钟,重学ES6-ES12(一)字面量的增强 解构
每天3分钟,重学ES6-ES12(一)字面量的增强 解构
47 0
|
10月前
|
前端开发 JavaScript
前端祖传三件套JavaScript的ES6+之各种扩展:字符串、数值、函数、数组、对象、正则.
在前端开发中,ES6+ 为 JavaScript 带来了各种扩展功能,包括字符串、数值、函数、数组、对象、正则等方面的增强。本文将介绍 JavaScript 中各种扩展的基本概念和使用方法。
104 0
|
存储 JavaScript 前端开发