ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
本文实例讲述了ES6新特性之类(Class)和继承(Extends)相关概念与用法。分享给大家供大家参考,具体如下:
一、类(Class)
1.基本语法
JavaScript语言的传统方法是通过构造函数,定义并生成新对象。下面是一个例子
function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')'; }; var p = new Point(1, 2);
ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用ES6的“类”改写,就是下面这样。
//定义类 class Point { constructor(x, y) { //constructor 构造方法 this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } var p = new Point(1, 2);
构造函数的prototype属性,在ES6的“类”上面继续存在。事实上,类的所有方法都还是定义在类的prototype属性上面。
2.constructor方法
constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。
二、继承(Extends)
Class之间可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多。
class ColorPoint extends Point { constructor(x, y, color) { super(x, y); // 调用父类的constructor(x, y) this.color = color; } toString() { return this.color + ' ' + super.toString(); // 调用父类的toString() } }
上面代码中,constructor方法和toString方法之中,都出现了super关键字,它在这里表示父类的构造函数,用来新建父类的this对象。
子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。
三、原生构造函数继承
原生构造函数是指语言内置的构造函数,通常用来生成数据结构。ECMAScript的原生构造函数大致有下面这些。以前,这些原生构造函数是无法继承的。
Boolean()
Number()
String()
Array()
Date()
Function()
RegExp()
Error()
Object()
ES6允许继承原生构造函数定义子类,因为ES6是先新建父类的实例对象this,然后再用子类的构造函数修饰this,使得父类的所有行为都可以继承。下面是一个继承Array的例子。
class MyArray extends Array { constructor(...args) { super(...args); } } var arr = new MyArray(); arr[0] = 12; arr.length // 1 arr.length = 0; arr[0] // undefined
上面代码定义了一个MyArray类,继承了Array构造函数,因此就可以从MyArray生成数组的实例。这意味着,ES6可以自定义原生数据结构(比如Array、String等)的子类,这是ES5无法做到的。
四、Class的Generator方法
如果某个方法之前加上星号(*),就表示该方法是一个Generator函数。
class Foo { constructor(...args) { this.args = args; } * [Symbol.iterator]() { for (let arg of this.args) { yield arg; } } } for (let x of new Foo('hello', 'world')) { console.log(x); } // hello // world
上面代码中,Foo类的Symbol.iterator方法前有一个星号,表示该方法是一个Generator函数。Symbol.iterator方法返回一个Foo类的默认遍历器,for...of循环会自动调用这个遍历器。
五、Class的静态方法
类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。
class Foo { static classMethod() { return 'hello'; } } Foo.classMethod() // 'hello' var foo = new Foo(); foo.classMethod() // TypeError: foo.classMethod is not a function
上面代码中,Foo类的classMethod方法前有static关键字,表明该方法是一个静态方法,可以直接在Foo类上调用(Foo.classMethod()),而不是在Foo类的实例上调用。如果在实例上调用静态方法,会抛出一个错误,表示不存在该方法。
父类的静态方法,可以被子类继承。
class Foo { static classMethod() { return 'hello'; } } class Bar extends Foo { } Bar.classMethod(); // 'hello'
上面代码中,父类Foo有一个静态方法,子类Bar可以调用这个方法。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《ECMAScript6(ES6)入门教程》、《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
- 这篇文章主要介绍了详解ES6实现类的私有变量的几种写法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-10
- 这篇文章主要给大家介绍了ES5和ES6中类的区别的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-12-21
- 这篇文章主要为大家详细介绍了php构造方法中析构方法在继承中的表现,感兴趣的小伙伴们可以参考一下...2016-04-15
- 本章节讨论使用ES6编码风格到代码中需要注意的点。通过记住这些关键点,可以让我们写出更优美的、可读性更强的JavaScript ES6风格的代码。...2021-05-08
- 这篇文章主要介绍了javascript中的3种继承实现方法,包括使用Object.create实现类式继承、使用utilities工具包自带的util.inherites、使用extends关键字,非常的实用,希望对大家了解javascript继承能够有所帮助...2016-01-30
- 这篇文章主要介绍了ES6新特性之变量和字符串用法,结合具体实例形式分析了ES6中变量与字符串的特性、使用方法与相关注意事项,需要的朋友可以参考下...2017-04-03
- GTID(Global Transaction ID)是对于一个已提交事务的编号,并且是一个全局唯一的编号。下文给大家介绍MySQL 5.6 GTID新特性实践,感兴趣的朋友一起看看吧...2016-10-20
- 这篇文章主要介绍了JavaScript中的封装与继承特性,封装与继承是基于对象编程概念中的基本特性,需要的朋友可以参考下...2016-03-22
ES6(ECMAScript 6)新特性之模板字符串用法分析
这篇文章主要介绍了ES6(ECMAScript 6)新特性之模板字符串用法,简单介绍了ES6模板字符串的概念、功能并结合实例形式分析了ES6模板字符串的用法,需要的朋友可以参考下...2017-04-03- 这篇文章主要给大家介绍了关于ES6学习教程之Promise用法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-23
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
这篇文章主要介绍了ES6新特性之类(Class)和继承(Extends)相关概念与用法,结合实例形式较为详细的分析了ES6中类(Class)和继承(Extends)的基本概念、语法、使用方法与注意事项,需要的朋友可以参考下...2017-05-27- 本文主要介绍jQuery 3中一些新增的特性和一些变更的特性,以及一些废弃删除的特性,另外介绍了jQuery 3.0 最大的变化就是彻底放弃对 IE8 的支持,大家可以先看一下。...2016-04-17
- 这篇文章主要介绍了ES6函数实现排它两种写法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-05-14
- 这篇文章主要帮助大家理解javascript对象继承,先从一个问题出发,引入javascript对象继承相关知识,感兴趣的小伙伴们可以参考一下...2016-04-19
- 在ES6属性中新增了两个属性,分别是解构和…运算符,下面这篇文章主要给大家介绍了关于JavaScript ES6解构运算符的理解和运用,文中通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-10-05
- 这篇文章主要给大家介绍了关于es5 类与es6中class区别的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-10
- 本文就和大家谈一谈javascript中的继承,什么是继承,继承的作用,以及js继承的实现代码,感兴趣的小伙伴们可以参考一下...2016-02-21
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Javascript语言对继承实现的并不好,需要工程师自己去实现一套完整的继承机制。下面我们由浅入深的系统掌握使用javascript继承的技巧,对javascript继承相关知识感兴趣的朋友一起看看吧...2015-12-14- 这篇文章主要介绍了JavaScript基于面向对象之继承...2015-12-14
- 这篇文章主要给大家介绍了关于ES6的循环与可迭代对象的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-31