es6 class 中 constructor 方法 和 super
function Point(x, y) {
this.x = x;
this.y = y;
//console.log("初始化自动执行");
}
Point.prototype.toString = function() {
return '(' + this.x + ',' + this.y + ')';
} var p = new Point();
console.log(p); 等同于
class Point{
constructor(x, y) {
this.x = x; //在new Point()对象自身属性
this.y = y;
// console.log("初始化自动执行");
} hello() { //在new Point()对象prototype上的属性
return '(' + this.x + ',' + this.y + ')';
}
} var class_p = new Point();
console.log(class_p)
class A {
constructor() {
console.log("父类构造函数")
}
}
class B extends A {
constructor() {
super(); //注意:ES6 要求,子类的构造函数constructor 必须执行一次 super 函数,否则会报错!!!!!!!
}
}
1.在普通方法中,指向父类的原型对象;在静态方法中,指向父类。
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()。 2.通过 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(); //通过 super 调用父类的方法时,super 会绑定子类的 this。
}
} let b = new B();
b.m(); // 2 上面代码中,super.s() 虽然调用的是 A.prototytpe.s(),但是 A.prototytpe.s()会绑定子类 B 的 this,导致输出的是 2,而不是 1。
也就是说,实际上执行的是 super.s.call(this)。 3.由于绑定子类的 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。 《3》注意
1.由于对象总是继承其他对象的,所以可以在任意一个对象中,使用 super 关键字。 2.ES6 要求,子类的构造函数constructor 《必须执行一次》 super 函数,否则会报错!!!!!!! 3.使用 super 的时候,《必须显式》指定是作为函数,还是作为对象使用,否则会报错
class A {}
class B extends A {
constructor() {
super(); //注意点1,必须执行一次super()函数 console.log(super); // 报错
}
}
es6 class 中 constructor 方法 和 super的更多相关文章
- ES6之class 中 constructor 方法 和 super 的作用
首先,ES6 的 class 属于一种“语法糖”,所以只是写法更加优雅,更加像面对对象的编程,其思想和 ES5 是一致的. function Point(x, y) { this.x = x; thi ...
- 详解es6 class语法糖中constructor方法和super的作用
大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,这种状态一直延续到了ES5.由于类似的库层出不穷,最终还是在ECMAScript 6中 ...
- ES6中class方法及super关键字
ES6 class中的一些问题 记录下class中的原型,实例,super之间的关系 //父类 class Dad { constructor(x, y) { this.x = 5; this.y = ...
- react中constructor()和super()的具体含义以及如何使用
1.constructor()---super( )的基本含义 constructor()--构造方法 这是ES6对类的默认方法,通过new命令生成对象实例时自动调用该方法.并且,该方法是类中必须有的 ...
- react中constructor和super()以及super(props)的区别。
react中这两个API出镜率超级高,但是一直不太懂这到底是干嘛的,有什么用:今天整理一下,方便自己查看同时方便大家. 1.constructor( )-----super( )的基本含义 const ...
- ES6语法中的class、extends与super的原理
class 首先, 在JavaScript中, class类是一种函数 class User { constructor(name) { this.name = name; } sayHi ...
- [ES6]react中使用es6语法
前言 不论是React还是React-native,facebook官方都推荐使用ES6的语法,没在项目中使用过的话,突然转换过来会遇到一些问题,如果还没有时间系统的学习下ES6那么注意一些常见的写法 ...
- InvocationHandler中invoke()方法的调用问题
转InvocationHandler中invoke()方法的调用问题 Java中动态代理的实现,关键就是这两个东西:Proxy.InvocationHandler,下面从InvocationHandl ...
- constructor()方法
在做微信小程序的时候,需要对传输的数据进行加密,大牛给我介绍constructor()方法,不是很懂这个但是用了一次,今天来用自己的想法来理解这个方法 ———————————————————————— ...
随机推荐
- NOIP2017 Day2 T3 列队(treap)
可以直接用treap上大模拟...n+1个treap维护n行的前m-1个点和最后一列. 需要支持删除一个点或者一段区间,而空间并不支持存下所有的点的时候,可以用一个点代替一个区间,记录区间首项的值和区 ...
- 【SQL优化】MySQL官网中可优化的层次结构
正如上一篇中我翻译的那篇文章,关于MySQL数据库优化的宏观介绍,了解到了从大体上来讲,优化MySQL可以从3个角度来讲.那么这一篇文章,则从一个个优化点出发,统计出究竟有多少个地方我们可以来优化My ...
- 认识Java标识符
标识符定义 认识Java标识符 在编程语言中,标识符就是程序员自己规定的具有特定含义的词,比如类名称,属性名称,变量名等. 问:标识符是神马? 答:标识符就是用于给 Java 程序中变量.类.方法等命 ...
- 二次封装bootstrap-table及功能优化
/** * 设置bootstrat-table * @param params */ function setBootstrapTable (target, params) { // 默认设置表格内容 ...
- 2017 Multi-University Training Contest - 1
hdu 6033 pragma comment(linker, "/STACK:102400000,102400000") #include <cstdio> #inc ...
- python编码问题FAQ
http://note.youdao.com/noteshare?id=2cfb0ac4da042c2550aa3918beda81ec
- git分支管理图
- python---Scrapy模块的使用(二)
出处:http://www.cnblogs.com/wupeiqi/ 一:去除重复URL scrapy默认使用 scrapy.dupefilter.RFPDupeFilter 进行去重,相关配置有: ...
- CF767 C.Garland DFS
LINK 题意:给定一棵树,每个节点拥有权值,问能否找到两个点,断开它们与父节点的边能使树分成权值和相等的三部分.权值可以为负 思路:进行两遍DFS,第一遍找最深的子树和为sum/3的节点,标记掉找到 ...
- 在ASP.NET中备份和还原数据库
昨天看了<C#项目实录>中的进销存管理系统,和其他书里讲的案例一样,无非也就是数据库增删查改,但是这个进销存系统中有一个备份和还原数据库的功能,蛮有兴趣的,看了一下代码,原来如此, ...