ES6之class 中 constructor 方法 和 super 的作…
2019-01-23 07:40:07来源:博客园 阅读 ()
首先,ES6 的 class
属于一种“语法糖”,所以只是写法更加优雅,更加像面对对象的编程,其思想和 ES5 是一致的。
function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function() { return '(' + this.x + ',' + this.y + ')'; }
等同于
class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ',' + this.y + ')'; } }
其中 constructor
方法是类的构造函数,是一个默认方法,通过 new
命令创建对象实例时,自动调用该方法。一个类必须有 constructor
方法,如果没有显式定义,一个默认的 consructor
方法会被默认添加。所以即使你没有添加构造函数,也是会有一个默认的构造函数的。一般 constructor
方法返回实例对象 this
,但是也可以指定 constructor
方法返回一个全新的对象,让返回的实例对象不是该类的实例。
下面好好分析一下 super
关键字的作用:
super
这个关键字,既可以当做函数使用,也可以当做对象使用。这两种情况下,它的用法完全不用。
1. 当做函数使用
class A {} class B extends A { constructor() { super(); // ES6 要求,子类的构造函数必须执行一次 super 函数,否则会报错。 } }
注:在 constructor
中必须调用 super
方法,因为子类没有自己的 this
对象,而是继承父类的 this
对象,然后对其进行加工,而 super
就代表了父类的构造函数。super
虽然代表了父类 A 的构造函数,但是返回的是子类 B 的实例,即 super
内部的 this
指的是 B,因此 super()
在这里相当于 ```A.prototype.constructor.call(this, props)``。
class A { constructor() { console.log(new.target.name); // new.target 指向当前正在执行的函数 } } class B extends A { constructor() { super(); } } new A(); // A new B(); // B
可以看到,在 super()
执行时,它指向的是 子类 B 的构造函数,而不是父类 A 的构造函数。也就是说,super()
内部的 this
指向的是 B。
2. 当做对象使用
在普通方法中,指向父类的原型对象;在静态方法中,指向父类。
class A { c() { return 2; } } class B extends A { constructor() { super(); console.log(super.c()); // 2 } } let b = new B();
上面代码中,子类 B 当中的 super.c()
,就是将 super
当作一个对象使用。这时,super
在普通方法之中,指向 A.prototype
,所以 super.c()
就相当于 A.prototype.c()
。
通过 super
调用父类的方法时,super
会绑定子类的 this
。
class A { constructor() { this.x = 1; } s() { console.log(this.x); } } class B extends A { constructor() { super(); this.x = 2; } m() { super.s(); } } let b = new B(); b.m(); // 2
上面代码中,super.s()
虽然调用的是 A.prototytpe.s()
,但是 A.prototytpe.s()
会绑定子类 B 的 this
,导致输出的是 2,而不是 1。也就是说,实际上执行的是 super.s.call(this)
。
由于绑定子类的 this
,所以如果通过 super
对某个属性赋值,这时 super
就是 this
,赋值的属性会变成子类实例的属性。
class A { constructor() { this.x = 1; } } class B extends A { constructor() { super(); this.x = 2; super.x = 3; console.log(super.x); // undefined console.log(this.x); // 3 } } let b = new B();
上面代码中,super.x
赋值为 3,这时等同于对 this.x
赋值为 3。而当读取 super.x
的时候,调用的是 A.prototype.x
,但并没有 x
方法,所以返回 undefined。
注意,使用 super
的时候,必须显式指定是作为函数,还是作为对象使用,否则会报错。
class A {} class B extends A { constructor() { super(); console.log(super); // 报错 } }
上面代码中,console.log(super);
的当中的 super
,无法看出是作为函数使用,还是作为对象使用,所以 JavaScript 引擎解析代码的时候就会报错。这是,如果能清晰的表明 super
的数据类型,就不会报错。
最后,由于对象总是继承其他对象的,所以可以在任意一个对象中,使用 super
关键字。
结语:
ES6 的 class 毕竟是一个“语法糖”,所以只要理解了 JavaScript 中对象的概念和面向对象的思想,class 就不难理解啦。
原文链接:https://www.cnblogs.com/Joe-and-Joan/p/10304178.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:js学习之路1 初识js函数
- 详解Webstorm 新建.vue文件支持高亮vue语法和es6语法 2020-02-07
- es6学习笔记(二) 2019-08-14
- Es6常用方法filter 2019-08-14
- es6学习笔记(一) 2019-08-14
- 前端笔记之React(六)ES6的Set和Map&immutable和Ra 2019-08-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash