关于ES6,其实网上已经有很多的资料可供查询,教程可参考阮一峰大神的ES6入门,本文只是对Class这一语法做一个总结:

一、Class基本语法

constructor方法

constructor是类的默认构造方法,new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。

this的指向

类的方法内部如果含有this,它默认指向类的实例。注意,在static静态方法中,this会指向当前类,不是实例;

静态方法和实例方法

静态方法是在方法名前面加static关键字,静态方法不会被实例继承,只能通过类来调用。如在实例上调用,则会抛出一个错误;注意,如果静态方法包含this关键字,这个this指的是类,而不是实例。

实例方法可通过new关键字直接调用,同ES5一样;

静态属性和实例属性

静态属性指的是 Class 本身的属性,即Class.propName,而不是定义在实例对象(this)上的属性。ES6,定义类的属性,不能定义在类里面,需要在外面定义,见代码:

Class Person{
}
Person.school = "Beijing University";

ES7中,可定义在类的内部,前面加static关键字即可;

类的实例属性可以用等式,写入类的定义之中。在实例上,可以直接调用这个属性;

二、Class继承

Class 可以通过extends关键字实现继承,见代码:

class A{
} class B extends A{
}

子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。

父类的静态方法,也会被子类继承。

最后,见下面代码:

class Person {
constructor(name, age) {
this.name = name;
this.age = age;
} static log(text) {
console.log(`Helow ${text},I'm come from ${this.school}`)
}
toString() {
return (`My name is ${this.name},I'm ${this.age}`)
}
}
Person.school = "Beijing University"; Person.log("Jack");
// 创建一个实例
var person = new Person("Jason", 30); // ==> Helow Jack,I'm come from Beijing University
console.log(person.toString()) // ==> My name is Jason,I'm 30
console.log(person instanceof Person); // ==> true
console.log(Person instanceof Object); // ==> true
console.log(person.age); // ==> 30
console.log(person.hasOwnProperty('age')); // ==> true
console.log(person.hasOwnProperty('log')); // ==> false
console.log(Person.hasOwnProperty('log')); // ==> true class People extends Person {
constructor(name, age, sex) {
super(name, age);
this.sex = sex;
this.string = super.toString();
}
speak() {
// console.log(super.toString(), this.total)
console.log(`${this.string}, My sex is a ${this.sex}`)
}
} const people = new People('Tome', 30, 'Man');
people.speak(); // ==> My name is Tome,I'm 30, My sex is a Man
People.log("Lucy"); // ==> Helow Lucy,I'm come from Beijing University
console.log(people.hasOwnProperty('total')); // ==> false

关于ES6 Class语法相关总结的更多相关文章

  1. ES6常用语法

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. ...

  2. ES6继承语法

    <!--http://www.56.com/u85/v_MTMyNjk1OTc4.html--> <!DOCTYPE html> <html> <head&g ...

  3. ECMAScript简介以及es6新增语法

    ECMAScript简介 ECMAScript与JavaScript的关系 ECMAScript是JavaScript语言的国际化标准,JavaScript是ECMAScript的实现.(前者是后者的 ...

  4. ES6新语法

    ES6新语法概览 简介 ES6是JavaScript语言的新一代标准,加入了一些新的功能和语法,正式发布于2015年6月,亦称ES2015:该标准由ECMA(欧洲计算机制造联合会)的第39号技术专家委 ...

  5. ES6新语法的介绍

    对于ES6新语法,阮一峰有一篇文章介绍的挺详细 http://es6.ruanyifeng.com/#docs/destructuring

  6. ES6最新语法

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. ...

  7. ES6新语法之let关键字;有别于传统关键字var的使用

    ES6新语法于2015年发布:而我这个前端小白在17年才接触到.惭愧惭愧!!不过到目前为止,似乎只有FireFox和Chrome对ES6的支持相对良好.不过既然人家ES6已经出来了,还是要跟上技术的潮 ...

  8. MySQL语法相关其一

    一篇基础语法相关的笔记 // 参考资料: MySQL入门很简单 黄缙华等编著 清华大学出版社 北京 建议进入官网下载对应版本后安装:https://dev.mysql.com/downloads/my ...

  9. 让 Node.js 支持 ES6 的语法

    为了让 Node.js 支持 ES6 的语法, 需要使用 Babel. 安装 es-checker 在使用 Babel 之前 , 我们先检测一下当前 node 对 es6 的支持情况. 在命令行下执行 ...

随机推荐

  1. struts2与springmvc的区别

    1 机制不同 springmvc的入口是servlet,struts2的入口是filter,导致了二者的机制不同: 2 性能不同 spring会稍微比struts快.spring mvc是基于方法的设 ...

  2. lr关联-保存数组并调用(转)

    LOADRUNNER中的一个关联技巧     众所周知,在LoadRunner中,关联是一个很重要的动作,大多数的脚本在录制完成后并不能直接回放,需要通过一定的关联才能成功回放.关联的技巧有很多,这里 ...

  3. SCRIPT7002: XMLHttpRequest: 网络错误 0x2efe, 由于出现错误 00002efe 而导致此项操作无法完成

    google中带中文参数可能查询,但是在IE带中文参数不能查询:报如下错误 SCRIPT7002: XMLHttpRequest: 网络错误 0x2efe, 由于出现错误 00002efe 而导致此项 ...

  4. Nmap用法实例

    <给Linux系统/网络管理员的nmap的29个实用例子> https://linux.cn/article-2561-1.html

  5. 在java中为什么要把main方法定义为一个static方法?

    我们知道,在C/C++当中,这个main方法并不是属于某一个类的,它是一个全局的方法,所以当我们执行的时候,c++编译器很容易的就能找到这个main方法,然而当我们执行一个java程序的时候,因为ja ...

  6. MT【151】传球问题

    (清华2017.4.29标准学术能力测试10) 甲.乙.丙.丁四人做相互传球的游戏,第一次甲传给其他三人中的一人,第二次由拿到球的人再传给其他三人中的一人,这样的传球共进行了$4$次,则第四次球传回甲 ...

  7. [LOJ2271] [SDOI2017] 遗忘的集合

    题目链接 LOJ:https://loj.ac/problem/2271 洛谷:https://www.luogu.org/problemnew/show/P3784 BZOJ太伤身体死活卡不过还是算 ...

  8. 【BZOJ5334】数学计算(线段树)

    [BZOJ5334]数学计算(线段树) 题面 BZOJ 洛谷 题解 简单的线段树模板题??? 咕咕咕. #include<iostream> #include<cstdio> ...

  9. 【Cf Edu #47 F】Dominant Indices(长链剖分)

    要求每个点子树中节点最多的层数,一个通常的思路是树上启发式合并,对于每一个点,保留它的重儿子的贡献,暴力扫轻儿子将他们的贡献合并到重儿子里来. 参考重链剖分,由于一个点向上最多只有$log$条轻边,故 ...

  10. 【bzoj3209】 花神的数论题

    http://www.lydsy.com/JudgeOnline/problem.php?id=3209 (题目链接) 题意 ${sum(i)}$表示${i}$的二进制表示中${1}$的个数.求${\ ...