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()方法,不是很懂这个但是用了一次,今天来用自己的想法来理解这个方法 ———————————————————————— ...
随机推荐
- Linux之选取信息命令介绍与应用20170331
在介绍选取信息命令之前,说一下管道符“|”与tr命令,因为在使用多个命令一起的时候经常用到它. 一.利用Linux所提供的管道符“|”将两个命令隔开,管道符左边命令的输出就会作为管道符右边命令的输入. ...
- 图像PNG格式介绍
1 图像png格式简介 PNG是20世纪90年代中期开始开发的图像文件存储格式,其目的是企图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性.流式网络图形格式(PortableN ...
- Codeforces Round #423 (Div. 2, rated, based on VK Cup Finals) C 并查集
C. String Reconstruction time limit per test 2 seconds memory limit per test 256 megabytes input sta ...
- windows下php扩展存在但无法加载的问题
1.可能存在多个php环境,扩展没有放对地方 2.扩展和php版本不对应,例如,php是32位,扩展是64位:或者php是nts版本,但是扩展不是nts版本.
- 修改ranger ui的admin用户登录密码踩坑小记
修改的ranger ui的admin用户登录密码时,需要在ranger的配置里把admin_password改成一样的,否则hdfs的namenode在使用admin时启动不起来,异常如下: Trac ...
- Tool1—安装配置Windows Live Writer
详细步骤请看:http://home.cnblogs.com/group/topic/8550.html . Windows Live Writer手工配置步骤(在博客园配置时输入用户名与密码会自动完 ...
- Liunx 下载文件夹下所有文件
136down voteaccepted You may use this in shell: wget -r --no-parent http://abc.tamu.edu/projects/tzi ...
- HDU 2516 取石子游戏 (找规律)
题目链接 Problem Description 1堆石子有n个,两人轮流取.先取者第1次可以取任意多个,但不能全部取完.以后每次取的石子数不能超过上次取子数的2倍.取完者胜.先取者负输出" ...
- Chrome浏览器任意修改网页内容
在Chrome浏览器按F12,打开开发者工具,切换到console选项卡: 在下面的输入行输入下面的命令回车: document.body.contentEditable="true&quo ...
- 好消息! 不用再羡慕Python有jupyter 我R也有Notebook了【附演示视频】
熟悉python的朋友可能知道jupyter notebook.它是一个Web应用程序,允许你创建和共享代码,方程,可视化和说明性文本文档.现在,我们可以在RStudio中实现R Notebook的功 ...