js中的super
1.this和super的区别:
this关键词指向函数所在的当前对象
super指向的是当前对象的原型对象
2.super的简单应用
const person = {
name:'jack'
} const man = {
sayName(){
return super.name;
}
} Object.setPrototypeOf( man, person ); let n = man.sayName(); console.log( n ) //jack
3.super的另类实现
super.name
等同于
Object.getPrototypeOf(this).name【属性】
等同于
Object.getPrototypeOf(this).name.call(this)【方法】
4.super中的this指向(易混淆)
super.name指向的是原型对象person 中的name,但是绑定的this还是当前的man对象。
ES6 规定,在子类普通方法中通过super
调用父类的方法时,方法内部的this
指向当前的子类实例。
const person = {
age:'20多了',
name(){
return this.age;
}
} const man = {
age:'18岁了',
sayName(){
return super.name();
}
} Object.setPrototypeOf( man, person ); let n = man.sayName(); console.log( n ) //18岁了
Object.getPrototypeOf(this).name指向的是person的name,绑定的this也是person
const person = {
age:'20多了',
name(){
return this.age;
}
} const man = {
age:'18岁了',
sayName(){
return Object.getPrototypeOf(this).name();
}
} Object.setPrototypeOf( man, person ); let n = man.sayName(); console.log( n ) //20多了
Object.getPrototypeOf(this).name.call(this)指向的是person的name,不过通过call改变了函数的执行上下文,所以this指向的还是man
const person = {
age:'20多了',
name(){
return this.age;
}
} const man = {
age:'18岁了',
sayName(){
return Object.getPrototypeOf(this).name.call(this)
}
} Object.setPrototypeOf( man, person ); let n = man.sayName(); console.log( n ) //18岁了
4.Class中的super
(1)Class中的 super(),它在这里表示父类的构造函数,用来新建父类的 this 对象
super()相当于Parent.prototype.constructor.call(this)
class Demo{ constructor(x,y) {
this.x = x;
this.y = y;
} customSplit(){
return [...this.y]
} } class Demo2 extends Demo{
constructor(x,y){
super(x,y);
} customSplit(){
return [...this.x]
} task1(){
return super.customSplit();
} task2(){
return this.customSplit();
}
} let d = new Demo2('hello','world');
d.task1() //["w", "o", "r", "l", "d"]
d.task2() //["h", "e", "l", "l", "o"]
(2)子类没有自己的this对象,而是继承父亲的this对象,然后进行加工。如果不调用super,子类就得不到this对象
class Demo2 extends Demo{
constructor(x,y){
this.x = x; //this is not defined
}
}
ES5的继承,实质上是先创造子类的实例对象this,然后再将父类的方法添加到this上(Parent.call(this)).
ES6的继承,需要先创建父类的this,子类调用super继承父类的this对象,然后再加工。
如果子类没有创建constructor,这个方法会被默认添加:
class Demo{
constructor(x) {
this.x = x;
}
} class Demo2 extends Demo{} let d = new Demo2('hello'); d.x //hello
(3) super 在静态方法之中指向父类,在普通方法之中指向父类的原型对象
class Parent {
static myMethod(msg) {
console.log('static', msg);
}
myMethod(msg) {
console.log('instance', msg);
}
}
class Child extends Parent {
static myMethod(msg) {
super.myMethod(msg);
}
myMethod(msg) {
super.myMethod(msg);
}
} Child.myMethod(1); // static 1 var child = new Child();
child.myMethod(2); // instance 2
---------------------
作者:TianyuCool
来源:CSDN
原文:https://blog.csdn.net/qq_35087256/article/details/82669618
js中的super的更多相关文章
- 不会JS中的OOP,你也太菜了吧!(第二篇)
一.你必须知道的 1> 原型及原型链在继承中起到了关键的作用.所以你一定要理解他们.2> 不会JS中的OOP,你也太菜了吧!(第一篇) 二.继承的6种方法 1> 原型链继承 原型链继 ...
- 小结JS中的OOP(下)
关于JS中OOP的具体实现,许多大神级的JS专家都给出了自己的方案. 一:Douglas Crockford 1.1 Douglas Crockford实现的类继承 /** * 原文地址:http:/ ...
- JS中的this 指向问题
我发现在对JS的学习中有很多朋友对this的指向问题还是有很大的误区或者说只是大致了解,但是一旦遇到复杂的情况就会因为this指向问题而引发各种bug. 对于之前学习过c或者是Java的朋友来说可能这 ...
- 【js实例】js中的5种基本数据类型和9种操作符
js中的5中基本数据类型 js标识符 第一个字符必须为字母,下划线,或美元符 其他字符可以是字母,下划线,美元符,数字 js标识符区分大小写 标识符不能使关键字和保留字 关键字: break do i ...
- 关于js中原生构造函数的继承
前言 在如今快节奏的工作当中,很多基础的东西会渐渐地被丢掉.就如继承这个话题,写React的同学应该都是class xxx extends React.Component,然而这可以理解为es5的一个 ...
- node.js中通过stream模块实现自定义流
有些时候我们需要自定义一些流,来操作特殊对象,node.js中为我们提供了一些基本流类. 我们新创建的流类需要继承四个基本流类之一(stream.Writeable,stream.Readable,s ...
- JS中的继承实现方式
第一种:通过prototype来实现 prototype.html <!DOCTYPE html><html lang="en"><head> ...
- js中不能做变量名的字符
JavaScript中不能作为变量名的关键字和保留字总结: 1.js中的关键字: break case catch continue default delete do else finally fo ...
- js中的new操作符与Object.create()的作用与区别
js中的new操作符与Object.create()的作用与区别 https://blog.csdn.net/mht1829/article/details/76785231 2017年08月06日 ...
随机推荐
- 在Visual Studio 中使用 <AutoGenerateBindingRedirects> 来解决引用的程序集版本冲突问题
问题: https://stackoverflow.com/questions/42836248/using-autogeneratebindingredirects-in-visual-studio ...
- Spring源码系列 — BeanDefinition
一.前言 回顾 在Spring源码系列第二篇中介绍了Environment组件,后续又介绍Spring中Resource的抽象,但是对于上下文的启动过程详解并未继续.经过一个星期的准备,梳理了Spri ...
- MySQL for OPS 08:MHA 高可用
写在前面的话 主从架构在一般情况下只能满足我们小公司业务并非一刻都不能中断服务.但是对于大型公司而言,对然数据丢失,数据库挂了,我们可以通过技术找回,修复.但是其中修复过程所消耗的时间是不被允许的.此 ...
- 用ASP.NET创建数据库
小白的第一次使用: 程序员写程序,就好比一个物品的慢慢诞生,我们今天的这个例子就可以想象成一个物品慢慢的在编译的过程中,让我们所看到 一.创建我们所测试的项目 1.创建一个简单的带有模型层(Model ...
- 如何使用Charles让手机访问PC自定义域名?
需求:移动端访问PC上的自定义域名,如在Nginx上配置的域名 如vv.zzcloud.com这个域名在pc上是通过host映射的方式访问,现在需要在手机上访问到这个域名. 工具:Charles代 ...
- Java编程基础——标识符和关键字
Java编程基础——标识符和关键字 摘要:本文主要介绍标识符和关键字. 标识符 是什么 Java语言中,为各种变量.方法.类和包等起的名字,统统称之为Java标识符. 命名规则 ◆ 应以字母.下划线. ...
- Flask补充--threading.local对象
目录 Local 局部变量 全局变量 使用threading.local() 自定义threading.local 函数版 面向对象版 通过setattr和getattr实现 每个对象有自己的存储空间 ...
- UML与设计模式
这个在大中华区不知道是否重视,反正我是接触的人中谈的少,除了想起大学有个博士级别的老师,给我们上课天天老拿着一本外文翻译的UML书外,可真要重视起来的. 加深一个单词,模式pattern,patter ...
- 【Java】简体中文、繁体中文转换
项目中用到繁体中文语言适配,目前已经有开源的框架可以将简体中文转换成繁体中文,在此基础上封装了一个工具类,可以直接将简体中文的strings.xml转换成繁体中文的strings.xml. 引用Jar ...
- Django 练习班级管理系统四 -- 编辑班级
修改 classes.html {% extends "layout.html" %} {% block css %} {% endblock %} {% block conten ...