关键词搜索

全站搜索
×
密码登录在这里
×
注册会员

已有账号? 请点击

忘记密码

已有账号? 请点击

使用其他方式登录

ES6对象与类如何定义及使用

发布2022-06-25 浏览574次

详情内容

这是一个

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 关键字。

,可点击上面演示按钮看HTML页面效果,有需要可直接下载或开通SVIP终生会员全站免费下载。
点击QQ咨询
开通会员
上传资源赚钱
返回顶部
×
  • 微信支付
  • 支付宝付款
扫码支付
微信扫码支付
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载