对象字面量语法扩展:

  1, 属性初始化语法简写给一个属性赋一个变量值,如果变量名和属性名相同,可以省略变量名和冒号,直接写属性名,js引擎在执行代码的时候,自动查找 和属性命名相同的变量并赋值。

let x = 1, y = 2;
let object = {
  x, // 属性名是x,变量名也是x, 两者一致,可以简写
  y
};
console.log(object.x); //output "1"

  2, 更为简洁 的方法属性定义:ES5的时候,把一个函数赋值给属性的时候,函数必须是一个完整的函数定义

let object = {
myFunction: function(){
console.log("Hello World")
}
}

  但是在ES6中,可以把:function 这一部分去掉了,写法如下

let object = {
myFunction(){
console.log("Hello World")
}
}

  语法确实简洁多了,不过要注意一个特殊情况,只有给属性赋值的是匿名函数的时候,才可以使用简洁语法,如果赋值的是一个有名字的函数,那么就不能使用匿名函数了。如下情况就不能

let object = {
myFunction: function hello(){
console.log("Hello World")
}
}

  函数hello 赋值给属性myFunction, 你可能会问,为什么要给函数取一个hello 名字,最常见的一种情况是递归,自己调用自己,如果没有名字,怎么调用?还有就是程序debugger 的时候,有函数名字可以直接定位, you don't know js 的作者就强烈建议书写有名字的函数。

  3, 计算属性名:ES5 的时候,对象字面量中的属性都是事先定义好的, 不能使用变量,从而在程序运行的时候动态生成属性,但在ES6中,这种情况改变了,对象字面量中可以存在动态生成的属性,不过语法就要稍微变一下了,需要把动态属性用[] 包括起来,这样在程序运行的时候可以对[] 中的内容进行计算

let object = {
  ["first" + "Name"]: "Eden",
}; //extract
console.log(object["first" + "Name"]); //Output "Eden"

  4, 对重复属性名的处理: 在ES5 的时候,如果给一个对象赋值为相同的属性,它就会报错。但在ES6 下,它不会报错了,它会取最后一个相同属性的值。

let obj = {
name: 'Sam',
name: 'Jason'
};
console.log(obj.name) // 'jason'

  新的方法

  1, Object.is() 方法:  判断两个数是否相等。你可能有点差异,不是有 == 和 === 来判断相等了吗,怎么还需要判断相等的方法? 不用担心,Object.is() 是用来处理极端情况的,比如NaN. NaN 和任何数都不相等,包含它本身,没有办法直接比较,现在就可以调用Object.is() 方法了,他就接受俩个要比较相等的参数。Object.is(NaN, NaN);  还有+0和-0, 对于js 引擎来说,他们两个是不相等的,但是 用== 和=== 做判断的时候,他们是相等的,为了解决这种问题,就可以使用Object.is(+0, -0)

console.log(+ === -); // true
console.log(Object.is(+, -)); // false console.log(Object.is(NaN, NaN)); // false

  对于Object.is () 来说,你可能发现,我们几乎用不到它, 它就是对=== 操作符在某些极端情况下的纠正,所以对于比较,我们还是用== 或===, 平常怎么用就怎么用,只有碰到极端情况再用Object.is() 方法。

  2, Object.assign(): 用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。Object.assign(target, ...sources),target 目标对象,sources: 源对象

const target = { a: , b:  };
const source = { b: , c: }; const returnedTarget = Object.assign(target, source); console.log(target); // Object { a: 1, b: 4, c: 5 } console.log(returnedTarget); // Object { a: 1, b: 4, c: 5 }

  3, Object.setPrototypeOf(), 设置一个对象的原型对象,它接受两个参数,一个是对象,一个是对象要链接到的原型对象 。Object.setPrototypeOf(obj, prototypeObj).

let person = {
greeting() {
return "hello";
}
} let dog = {
greeting() {
return "woof";
}
} let obj = {}; // obj 链接到person
Object.setPrototypeOf(obj, person);
console.log(obj.greeting()); // "hello"
// obj 链接到dog
Object.setPrototypeOf(obj, dog);
console.log(obj.greeting()); // woof

  通过Object.setPrototypeOf() 方法可以动态地改变一个对象的原型对象。这里简单说一下对象的原型,在js中没有所谓的类式继承,因为js中没有java  中的类, 那Js中有什么呢? 它只有对象,当我们把一个对象链接到原型对象上的时候,它是对象和对象之间的关系,就像上面中的代码一样, obj 就一个对象,它的原型对象无论是person, 还是dog, 也是普通的对象, 对象和对象的链接关系,就像火车的车厢

通过链条链接起来一样, 把每一个车厢想象成每一个对象。为什么把对象链接起来呢? 因为另外一个对象有我们想要的方法,比如上面的greeting 方法。我们刚刚声明了一个对象obj,  空对象,什么都没有,刚要给他声明一个greeting 方法,突然发现person  对象有这个方法,那就不要声明了,拿过来用就可以了,这不,这两个对象就有必要链接到一起了。但执行obj.greeting()的时候,发现obj对象上并没有这个方法,但是发现它链接到一个对象person, 那就顺着链条继续找吧,正好,person 对象上有这个方法,就调用了person 对象上的方法。就像火车上找人一样,你先从第一车厢开始,没有,因为第一车厢和第二车厢链接起来了,你就到第二车厢去找,还是没有,第二车厢又和第三车厢链接到一起,你就去第三车厢去找,找到了,如果没有找到,继续第四车厢,因为每一个车厢都是链接起来的。如果所有的车厢都找完了,还是没有,那就真没有了。

  那我们还能不能在obj上面定义一个greeting 方法,因为有时候原型对象上的方法不能完全满足要求?可以,当我们在一个对象上定义一个方法的时候,它就不会就找原型链了,直接调用对象上面的方法。

let obj = {
greeting() {
return 'obj';
}
};

  但有时候, 你发现,在obj 对象中定义的方法,可能使用到原型对象上的同名方法, 只要调用原型对象上面的方法再进行一下组装就可以达到要求了。ES6 提供了super 关键词,它就指向原型对象

let obj = {
greeting() {
return super.greeting() + 'obj';
}
};

  这里要注意的是,对象方法的定义只能使用简洁的语法形式,否则报错。

  super 是怎么实现的呢?在ES6 中,如果一个对象中定义了方法,这个方法自动获取到一个内置的属性[[HomeObject]], 来指向这个对象。super 呢,就是通过Object.getPrototypeOf([[HomeObject]]) 来获取到原型对象。obj.greeting() greeting() 方法中的[[HomeObject]] 就指向了obj.  那里面的super 就是Object.getPrototypeOf(obj), 那就是person 或dog 了,super.greeting() 就相当于person.greeting()了, 更为准确的说是 person.greeting.call(this).  因为如果person中的greenting有this, 我们还要给它指定this 指向, 不能让里面的this 指向别的对象, 只能让this 指向 obj 了。

ES6 对象增强的更多相关文章

  1. ES6 对象增强和结构赋值

    The enhanced Object literals: ES6 has added some new syntax-based extensions to {} object literal fo ...

  2. es6对象字面量增强

    相对于ES5,ES6的对象字面量得到了很大程度的增强.这些改进我们可以输入更少的代码同时语法更易于理解.那就一起来看看对象增强的功能.对象字面量简写(Object Literal Shorthand) ...

  3. ES6 对象解构

    ES6 对象解构 第一眼看到,什么鬼? const { body } = document `` 其实等于: const body = document.body ``` http://es6.rua ...

  4. ES6对象扩展

    前面的话 随着JS应用复杂度的不断增加,开发者在程序中使用对象的数量也在持续增长,因此对象使用效率的提升就变得至关重要.ES6通过多种方式来加强对象的使用,通过简单的语法扩展,提供更多操作对象及与对象 ...

  5. ES6对象及ES6对象简单拓展

    ES6对象和传统的JS比较起来支持简写,比如说属性简写方法简写,还支持name属性,可以通过他迅速得到函数属性名表达式(如果是用bind方法创造的函数name属性会返回bound加上原函数的名字,Fu ...

  6. es6对象的扩展

    对象(object)是 JavaScript 最重要的数据结构之一. object 在es6中新增了很多便利的方法 在es6中允许直接写入变量和方法的名称直接作为对象的属性 let x =1 ,y=2 ...

  7. ES5和ES6对象导出和导入(转载,待整理)

    1.import ... form...替代 require() //不接收对象 require:require('s.css'); //(es5) improt 's.css' //(es6) // ...

  8. es6对象内函数的两种写法

    es6对象内函数一般有两种写法: var person1 = { name: "p1", sayThis() { console.log(this); } }; var perso ...

  9. es6 对象浅拷贝的2种方法

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Java并发专题(三)深入理解volatile关键字

    前言 上一章节简单介绍了线程安全以及最基础的保证线程安全的方法,建议大家手敲代码去体会.这一章会提到volatile关键字,虽然看起来很简单,但是想彻底搞清楚需要具备JMM.CPU缓存模型的知识.不要 ...

  2. Java 设置PDF文档背景色

    一般生成的PDF文档默认的文档底色为白色,我们可以通过一定方法来更改文档的背景色,以达到文档美化以及保护双眼的作用. 以下内容提供了Java编程来设置PDF背景色的方法.包括: 设置纯色背景色 设置图 ...

  3. 变量类型、构造器、封装以及 LeetCode 每日一题

    1.成员变量和局部变量 1.1成员变量和局部变量定义 成员变量指的是类里面定义的变量(field),局部变量指的是在方法里定义的变量. 成员变量无须显示初始化,系统会自动在准备阶段或创建该类的实例时进 ...

  4. headfirst设计模式(5)—工厂模式体系分析及抽象工厂模式

    先编一个这么久不写的理由 上周我终于鼓起勇气翻开了headfirst设计模式这本书,看看自己下一个设计模式要写个啥,然后,我终于知道我为啥这么久都没写设计模式了,headfirst的这个抽象工厂模式, ...

  5. Java设计模式---ChainOfResponsibility责任链模式

    参考于 : 大话设计模式 马士兵设计模式视频 代码参考于马士兵设计模式视频 写在开头:职责链模式:使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系 图来自大话设计模式,下面我的代 ...

  6. odoo 12企业版与免费社区版的区别,价格策略与技术支持指南的全面解析

    Odoo / Ps Cloud收费企业版是对社区版的极大增强,除了增加了很多功能外,最大的功能区别是企业版支持条码而社区版不支持,企业版对手机支持更好.有单独的APP,最重要区别的是企业版提供底层技术 ...

  7. 微信分享大图遇到的问题(Android)

    起因: 要做一个微信图片分享的功能,但是对于大图会如下问题: 当时没有仔细查看错误日志,单纯的以为是图片太大的问题. 分享图片代码: public void WXsharePic(String tra ...

  8. Android为TV端助力 Linux命令查看包名类名

    先运行apk 再输入logcat | grep START 查看当前启动apk的包名和类名 adb shell "pm list packages -f | grep com.yulong. ...

  9. MATLAB 音响系统工具箱

    音响系统工具箱 设计和测试音频处理系统 发行说明 pdf文档 音频系统工具箱™为音频处理系统的设计,仿真和桌面原型设计提供了算法和工具.它支持低延迟信号流式传输到音频接口,交互式参数调整以及数字音频工 ...

  10. MySQL- 简单操作命令及教程

    MySQL数据库(;表示结束语句) 关系型数据库 注释用 // db_name表示库名: b_name表示表名 1.进入.退出 root用户只能在本机连接,不可外部链接 进入:mysql -uroot ...