关于es6class语法相关总结

jone-chen      2022-02-09     757

关键词:

其实关于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

es6class的基本语法-学习笔记

  1、基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。    类的内部所有定义的方法,都是不可枚举的(non-e... 查看详情

研究c#异步操作asyncawait状态机的总结(代码片段)

...之前的轮子[DotNetCoreRpc]小框架,其中主要的优化点主要是关于RPC异步契约调用的相关逻辑。在此过程中进一步了解了关于async和await异步操作相关的知识点,加深了异步操作的理解,因此总结一下。关于async和await每个人都有自己... 查看详情

es6class的基础语法,es6class继承/es5call继承描述/使用apply比较完美继承array的方法sort倒序排序console.table()表格生成

//基础语法functionPeople(name,email){name,email}classUser{constructor(name,email){this.name=name;this.email=email;}getinfo(){console.log(this.name);}staticdescription(){console.log(‘Iamdescription--static 查看详情

es6class

  ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。 functionPoint(x,y){this.x=x;this.y=y;}Point.prototype.toString=function(){return‘... 查看详情

pixi.js基于parcel打包es6class语法做了个流星雨

最近公司不太忙于是就做了一些以前想做的小项目,其中有一个红包雨小游戏背景需要一个流星雨效果,就想到了以前看过的es6里的class语法,感觉还是挺好用的,没用过的可以试试。demo比较简单,有没有PIXI.JS基础应该都能看... 查看详情

概率论考点总结类型22关于独立和不相关

查看详情

es6class类(代码片段)

在ES6中,class(类)作为对象的模板被引入,可以通过class关键字定义类。class的本质是function。它可以看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法 类定义class以及构造方法 constructor//通过class定义... 查看详情

es6class(基本语法+方法)(代码片段)

静态属性与静态方法1.不会被类实例所拥有的属性与方法只是类自身拥有2.只能通过类调用静态方法与普通方法重名,不会冲突static关键字(静态方法)静态属性类名.属性名=属性值; 静态属性应用举例://职业类classProfessioncla... 查看详情

关于linux中变量相关学习小白总结

定义变量时,有一些规则需要遵守。1)变量名可以由字母、数字和下画线组成,但是不能以数字开头。2)在Bash中,变量的默认类型都是字符串型,如果要进行数值运算,则必须指定变量类型为数值型。3)变量用等号"="连接... 查看详情

es6class

简介JavaScript语言中,生成实例对象的传统方法是通过构造函数。下面是一个例子。functionPoint(x,y){this.x=x;this.y=y;}Point.prototype.toString=function(){return‘(‘+this.x+‘,‘+this.y+‘)‘;};varp=newPoint(1,2);基本上,ES6的class可以看作只是一个语... 查看详情

c语言常用关键语法精华总结

1.关于typedef的用法总结2.typedefstruct的用法 查看详情

es6class语法学习(代码片段)

前言大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,这种状态一直延续到了ES5。由于类似的库层出不穷,最终还是在ECMAScript6中引入了类的特性。本... 查看详情

es6class基础语法

参考技术A通过对比,可以明显看出来,es5的写法是传统的面向对象,es6的类,完全可以看作构造函数的另一种写法。es6写法,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象在类的实例上调用... 查看详情

es6class学习笔记

ES5中生成实例对象的方法是通过构造函数:functionPerson(name,age){this.name=namethis.age=age}Person.prototype.sayName=function(){  console.log(this.name)}ES6中添加新的语法生成对象实例:classPerson{constructor(name,age){this.name=namet 查看详情

关于qt数据库相关开发的一些经验总结(代码片段)

一、前言近期花了两个多月时间,将数据库相关的代码重新封装成了各种轮子(这条路必须打通,打通以后,相关项目只需要引入这个组件pri即可),测试了从Qt4.7到Qt6.1的各种版本,测试了odbc、sqlite... 查看详情

词法语法与语义相关知识

概念http://www.juweixin.com/t/detail/148383语法到底是什么?有人说语法是语言里的法律、法规;有人说语法是框架结构;还有人说语法就是对前人语言习惯的一种总结。以上这些说法都对,但是又不全对。Inlinguistics,grammaristhesetofstructur... 查看详情

1st.初识gcc——关于gcc编译器的相关语法与介绍

   一个C文件要变成可执行的文件,需要经过四个过程预处理(处理以“#”为开头的命令)编译(将.c.i等文件翻译成汇编代码)汇编(将汇编代码翻译成机器代码)连接(将生成的多个目标文件(.o文件)连接起来,... 查看详情

es6class类(代码片段)

概述在ES6中,class(类)作为对象的模板被引入,可以通过class关键字定义类。class的本质是function。它可以看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。基础用法类定义类表达式可以为匿名或命名。//匿... 查看详情