博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ES6语法(三) 对象
阅读量:6276 次
发布时间:2019-06-22

本文共 4587 字,大约阅读时间需要 15 分钟。

首先,在JavaScript中对象是个很重要的概念,因为在JavaScript中一切都是对象,无论是函数,还是数组。同样,ES6这次也带来了一些新特性。能够帮助我们更加轻松与准确的完成想要完成的目标。

对象字面量语法拓展

对象字面量属性简写

在ES6之前。我们使用字面量创建属性,会写一个属性名,后面跟一个":",最后跟着属性值。看起来一切都是很简洁的,但是在属性值与属性名同名时,这就很痛苦了,每次都要写两个同样的文字。我们看个例子:

let Person = function(name,age){        return {            name : name,            age : age,        }    }复制代码

一个两个这种代码没问题,但是当类似的代码量一旦多起来,那便是很痛苦的一件事了。但是,在ES5中,这个问题将得到解决。它为我们提供了简写方式。

let Person = function(name,age){        return {            name,            age,        }    }复制代码

在使用字面量的时候,我们只需写一个变量名就好,剩下的工作由JavaScript引擎帮我们去做。JavaScript引擎回去可访问作用域查找同名属性,找到便会将该变量的值赋值给字面量对象的同名属性。如果没找到,这个属性的值为undefined。

对象字面量的可计算属性名

在ES6之前,我们可以在对象创建之后,使用可计算属性名,但是无法在对象字面量中使用可计算属性名。现在ES6将可计算属性名带到了对象字面量中。

// ES6之前        let param1 = 'name';    let person = {};    person[param1] = 'kidd';    console.log(person[name]);       // kidd        //不允许    let dog = {        [param]:'Snoopy',    }        // ES6        let firstName = 'first Name';        let cat = {        [firsName]:'tom'    }    console.log(cat[firstName]);        // tom    复制代码

对象方法的简写

这不是一个重大的改进。但是能帮助我们书写起来更容易。

// ES6之前按    let person= {        getName:function(){            return : this.name        }    }        // ES6    let person = {        getName(){            return this.name;        }    }    复制代码

重复的对象字面量属性

在ES5及之前,我们如果在对象字面量中声明了两个同名属性,严格模式下便会报错。而ES6中将这个特性改变了,无论是否在严格模式下,对象字面量中声明了两个同名属性,之后后面的属性会生效。

let person = {        getName(){            return 'tom';        },                getName(){            return 'jure';        }    }        person.getName();       // jure复制代码

对象自有属性的枚举顺序

在ES6之前自由属性的枚举顺序基本都是百家争鸣,不同的JavaScript引擎,都会有不同的枚举顺序,这次ES6算是将自由属性的枚举顺序给出了官方说法

  • 所有数字键按照升序排列
  • 所有字符串键按照它们被加入对象的顺序排列
  • 所有symbol键按照它们被加入对象的顺序排列

对象新增方法

在ES6也给对象新增了一些方法,下面让我们来看看

Object.is()

Object.is()很想一个完整版的 “===”,因为它大部分情况下与 “===” 相同,只有两种情况与 “===” 有一些差别。就是下面两种情况

console.log(-0 === +0);             //true    console.log(Object.is(+0,-0));      //false    console.log(NaN === NaN);           //false    console.log(NaN,NaN);               //true复制代码

除了上面两种情况,与 “===”是一样的。

Object.assign()

因为很多JavaScript第三方库有混合模式,这次ES6便将它们直接引入进来。assign方法的主要作用是将一个对象的方法、属性复制给另一个对象。注意,这里的复制其实是浅复制,如果被复制对象的属性值是一个对象的话,那么便只是将这个对象的引用复制给被复制对象。

function EventTarget(){ doSomething };        EventTarget.prototype = {        constructor : EventTarget,        emit : function(){ doSomething },        on : function(){ doSomething }    }        var obj = {},    Object.assign(obj,EventTarget.prototype);        obj.on();复制代码

这样的话,新创建的对象就会拥有之前对象的属性。而且assign是可以接受任意数量的源对象的。如果不同的源对象中有同名属性,最后被复制对象中会采用最有一个拥有此属性的对象的属性值。 还有一个很重要的点。assign是不能复制访问器属性的。如果源对象中有访问器属性,会在新的对象中变为数值属性。

增强对象原型

我们都知道,JavaScript最特别的地方就是使用了原型继承的方式。而现在,ES6对对象原型又进行了增强。

Super引用

super引用其实就是保存了当前对象的原型对象的引用,在ES6之前,我们要获得对象的原型只有通过Object.getPrototypeOf(this)的方法去返回原型对象。但是这个方法在某些情况的时候会发生某些错误,比如

let person = {        getGreeting(){            return 'Hello';        }    };        let friend = {        getGreeting(){            return Object.getPrototypeOf(this).getGreeting.call(this) + ", Hi!";        }    }        Object.setPrototypeOf(friend,person);        let relative = Object.create(friend);        console.log(person.getGreeting());          // Hello    console.log(friend.getGreeting());          // Hello, Hi!    console.log(relative.getGreeting());        // error复制代码

这里的问题是陷入了一个调用死循环,this是relative时Object.getPrototypeOf(this)返回的对象是friend。而Object.getPrototypeOf(this).getGreeting会调用friend的getGreeting()方法。后面的call(this)又会去改变当前的函数作用域,因此,陷入了一个递归调用的死循环,最后栈溢出报错,但是在ES6中使用super就会解决这个问题

let person = {        getGreeting(){            return 'Hello';        }    };        let friend = {        getGreeting(){            return super.getGreeting() + ", Hi!";        }    }        Object.setPrototypeOf(friend,person);        let relative = Object.create(friend);        console.log(person.getGreeting());          // Hello    console.log(friend.getGreeting());          // Hello, Hi!    console.log(relative.getGreeting());        // Hello, Hi!    复制代码

这是因为super引用不是动态变化的,它总是指向正确的对象。

改变对象原型的方法

在ES6之前我们要改变对象的原型很麻烦,现在ES6有了setPrototypeOf(),可以轻而易举的改变对象的原型。

let person = {        getGreeting(){            return 'Hello';        }    };        let dog = {        getGreeting(){            return 'Woof';        }    };        let friend = Object.create(person);    console.log(friend.getGreeting());      // Hello    console.log(Object,getPrototypeOf(friend) === person);  //true        Object.setPrototype(friend,dog);    console.log(friend.getGreeting());      // Woof    console.log(Object,getPrototypeOf(friend) === dog);  //true    复制代码

以上便是ES6有关对象的内容,如果您有不同的见解或者是本文哪里有错误,你都可以在下面留言给我!!!

转载地址:http://etwva.baihongyu.com/

你可能感兴趣的文章
solr-4.10.4部署到tomcat6
查看>>
切片键(Shard Keys)
查看>>
淘宝API-类目
查看>>
virtualbox 笔记
查看>>
Git 常用命令
查看>>
驰骋工作流引擎三种项目集成开发模式
查看>>
SUSE11修改主机名方法
查看>>
jdk6.0 + Tomcat6.0的简单jsp,Servlet,javabean的调试
查看>>
Android:apk签名
查看>>
2(2).选择排序_冒泡(双向循环链表)
查看>>
MySQL 索引 BST树、B树、B+树、B*树
查看>>
微信支付
查看>>
CodeBlocks中的OpenGL
查看>>
短址(short URL)
查看>>
C++零基础教程(一)——何谓编程
查看>>
第十三章 RememberMe——《跟我学Shiro》
查看>>
mysql 时间函数 时间戳转为日期
查看>>
索引失效 ORA-01502
查看>>
Oracle取月份,不带前面的0
查看>>
Linux Network Device Name issue
查看>>