ES6类的引入

旧方式:ES5中通过创建构造器,然后将方法指派到该构造器原型的方式模仿类结构,这称为自定义类型,这是ES6类的出发点

ES6类的引入_第1张图片

新方式:类声明写法

ES6类的引入_第2张图片

新方式:类表达式写法-->匿名类表达式

ES6类的引入_第3张图片

新方式:类表达式写法-->具名类表达式

ES6类的引入_第4张图片

类是一级公民:可以被当作值使用-->可以作为参数传递,可以作为返回值,可以给变量赋值

ES6类的引入_第5张图片

立即调用类构造器实现单例:定义一个匿名类,只用来创建一个对象就没用了

 ES6类的引入_第6张图片

类的属性和get,set方法

ES6类的引入_第7张图片

类的方法名可以为变量

ES6类的引入_第8张图片 

ES6类的引入_第9张图片

类的生成器:调用生成器,返回迭代器

ES6类的引入_第10张图片

使用Symbol.iterator自定义生成器,使自定义类具有默认迭代器

ES6类的引入_第11张图片

旧方式:定义类的静态方法

ES6类的引入_第12张图片

新方式:定义类的静态方法

ES6类的引入_第13张图片

旧方式:类的继承

ES6类的引入_第14张图片

新方式:类的继承

ES6类的引入_第15张图片

ES6类的引入_第16张图片

子类可以重写父类中的方法

ES6类的引入_第17张图片

子类方法中可以通过super调用父类中的方法

ES6类的引入_第18张图片

子类可以继承父类的静态成员

ES6类的引入_第19张图片

父类可以是表达式:只要表达式返回值具有构造函数和方法原型即可

ES6类的引入_第20张图片

ES6类的引入_第21张图片

类的多继承:可以通过如下方式实现

ES6类的引入_第22张图片

旧方式:不支持继承数组

ES6类的引入_第23张图片

新方式:支持继承数组

ES6类的引入_第24张图片

子类继承Array,ArrayBuffer,Map,Promise,RegExp,Set,类型化数组 这些内置类作为父类时,当子类对象调
用从父类继承来的方法时,返回值的类型都是子类的类型(这是不符合预期的,比如子类继承数组,子类对象调用继承
来的slice()方法时,本来想返回一个数组类型的结果,但实际返回的却是子类的类型)

ES6类的引入_第25张图片

上面现象的原因是因为,这些内置类的Symbol.species属性的get方法,返回值都是this,这些内置类都是类似下
面这样定义的,子类继承了父类的Symbol.species属性的get方法,返回this时返回的就是子类对象了

ES6类的引入_第26张图片

根据上面分析,子类继承了父类的Symbol.species属性的get方法返回的是this,我们只需要在子类中重写父类的
这个方法,让其返回父类型就可以了

ES6类的引入_第27张图片

构造函数中,new.target为当前类型的情况:通过new调用构造函数

ES6类的引入_第28张图片

构造函数中,new.target为子类型的情况:子类中通过super调用父类构造函数

ES6类的引入_第29张图片

new.target可以实现抽象类的效果:只能被继承,不可以new实例化对象

ES6类的引入_第30张图片

类的构造函数被调用时,必须使用new,否则报错,这可以防止将类作为函数调用

 

你可能感兴趣的:(深入理解ES6)