ES6对象与类如何定义,本文会简要介绍 ES6 对象和 ES6 类的定义及使用。
一、ES6 对象
属性简化写法
ES5 我们对于对象都是以键值对的形式书写,是有可能出现键值对重名的。
function people(name, age) { return {name: name,age: age, };}
以上代码可以简写为:
function people(name, age) { return {name,age, };}
二、对象合并
我们可以使用 assign()将多个对象进行合并,也可以使用扩展的方式将对象合并。
示例:新建一个名为 demo.js 的文件,并在其中输入以下代码:
let name = { name: "lisi" };let age = { age: 15 };let sex = { sex: "female" };var person = { ...name, ...age, ...sex };console.log(person); // { name:'lisi',age:15,sex:'female' }
在终端输入以下命令:
node demo.js
我们会看到如下图所示的效果:
三、ES6 字符串
ES6 新增了模板字符串,可以将表达式嵌入字符串中进行拼接,也可以实现多行字符串或者字符串一行行拼接。用 ${} 来界定。
示例:新建一个名为 demo1.js 的文件,并在其中输入以下代码:
// es5var name = "zhangsan";console.log("hello " + name);// es6var name2 = "zhangsan";console.log(`hello ${name2}`); // hello zhangsan
在终端输入以下命令:
node demo1.js
我们会看到如下图所示的效果:
四、ES6 类的定义及使用
constructor()
ES6 引入了 class 类的概念,每一个 class 类只有一个 constructor() 方法,用于创建和初始化对象。如果一个类没有指定 constructor() 方法,则会添加默认的 constructor() 方法。
示例:
<html> <head></head> <body><script> class Person {constructor(name) { this.name = name;} } var person = new Person("zhangsan"); document.write(person.name);</script> </body></html>
效果如下图所示:
五、Class 表达式
ES6 中的 Class 表达式使得可以使用表达式来声明一个类或者一个对象。
声明类:
var 类名 = class [变量名]{...}
示例:
<html><head></head><body><script>// 使用 Class 表达式来声明一个类,Persons 可以在类的内部使用,如果内部不需要使用,可以省略var Person = class Persons{constructor(name){this.name = name;}show(){alert(this.name);}};var person = new Person('zhangsan');person.show();</script></body></html>
声明对象:
var 对象名 = new (class {})();
示例:
<html> <head></head> <body><script> // 声明对象 person,并赋初值 var person = new (class {constructor(name) { this.name = name;}show() { alert(this.name);} })("zhangsan"); person.show();</script> </body></html>
六、super 关键字
super 可以用在类的继承中,在子类的构造方法中需要使用 super 关键字调用父类的 constructor()。
示例:
<html> <head></head> <body><script> class Person {constructor(name) { this.name = name;} } class Student extends Person {constructor(name) { super(name);} } var student = new Student("zhangsan"); alert(student.name);</script> </body></html>
super 在对象字面值中的使用,super 指代了整个prototype
或者__proto__
指向的对象。
示例:
<html> <head></head> <body><script> // 使用字符值的放置声明对象 demo1,demo2 var demo1 = {method1() { alert("show method1");}, }; var demo2 = {method2() { super.method1();}, }; // 设置第二个对象的原型设为第一个对象 Object.setPrototypeOf(demo2, demo1); demo2.method2(); // show method1</script> </body></html>
效果如下:
总结
本文介绍了 ES6 对象的属性简化写法、对象合并、字符串;ES6 类的定义及使用的 constructor() 方法、Class 表达式和 super 关键字。