ES6 对象增强

　　对象字面量语法扩展：

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

复制代码

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

复制代码

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

1let object = {
2    myFunction: function(){
3        console.log("Hello World")  
4    }  
5}

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

1let object = {
2    myFunction(){
3        console.log("Hello World")  
4    }  
5}

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

1let object = {
2    myFunction: function hello(){
3        console.log("Hello World")  
4    }  
5}

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

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

1let object = {
2　　["first" + "Name"]: "Eden",
3};
4
5//extract
6console.log(object["first" + "Name"]); //Output "Eden"

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

1let obj = {
2    name: 'Sam',
3    name: 'Jason'
4};
5console.log(obj.name) // 'jason'

　　**新的方法
**

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

1console.log(+0 === -0); // true
2console.log(Object.is(+0, -0)); // false
3 
4console.log(Object.is(NaN, NaN)); // false

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

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

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

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

1let person = {
2    greeting() {
3        return "hello";
4    }
5}
6
7let dog = {
8    greeting() {
9        return "woof";
10    }
11}
12
13let obj = {};
14
15// obj 链接到person 
16Object.setPrototypeOf(obj, person);
17console.log(obj.greeting()); // "hello"
18// obj 链接到dog
19Object.setPrototypeOf(obj, dog);
20console.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 方法，因为有时候原型对象上的方法不能完全满足要求？可以，当我们在一个对象上定义一个方法的时候，它就不会就找原型链了，直接调用对象上面的方法。

1let obj = {
2    greeting() {
3        return 'obj';
4    }
5};

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

1let obj = {
2    greeting() {
3        return super.greeting()  + 'obj';
4    }
5};

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

　　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 了。

评论区

相关推荐