ES6中的super

Stella981
• 阅读 604

对象方法中的super

原型对于javascript来说非常重要,甚至可以说是javascript中最为重要的知识点。然而,很多人一看到原型就懵逼。ES5我们可以使用Object.getPrototypeOf()来返回原型对象,使用Object.setPrototypeOf()来设置原型对象。 看下面的例子:

let person = {
    getSay() {
        return 'hello'
    }
}

let tom = {
    getSay() {
        return Object.getPrototypeOf(this).getSay.call(this) + ',jack'
    }
}

Object.setPrototypeOf(tom, person); 
console.log(tom.getSay())       // hello,jack

以上代码通过 Object.setPrototypeOf(tom, person) 设置tom的原型对象为person,通过Object.getPrototypeOf(this)返回tom的原型对象person,所以Object.getPrototypeOf(this).getSay 实际上就是person.getSay,在通过call()方法将peoson中的this指向tom作用域,实现tom继承peoson。

相信很多人在看到Object.getPrototypeOf()和call()来调用原型时已经由懵逼遍傻逼的了。好在ES6中引入了super关键字来解除我们的痛苦。super引用相当于指向原型对象的指针,实际上也就是Object.getPrototypeOf(this)的值。废话少说,我们将上面的例子改变以下:

let person = {
    getSay() {
        return 'hello'
    }
}

let tom = {
    getSay() {
               // 相当于Object.getPrototypeOf(this).getSay.call(this)
        return super.getSay() + ',jack';
    }
}

Object.setPrototypeOf(tom, person);
console.log(tom.getSay());          //  hello,jack

怎么样,是不是感觉爽了很多。不过得注意,super只能在简写的对象方法中使用。可是还有同学说我看到Object.setPrototypeOf(tom, person)我也恶心,别急,ES6都为你准备好了,请继续往下看。

class中的super

在ES6之前,javascript都不支持类的概念,开发者都是通过原型实现类似类的结构。

ES5中,我们通过在继承的函数中调用call()或者apply()方法实现继承。

function SuperType(name) {
    this.name = name;
    this.color = ["red", "blue"];
}
SuperType.prototype.sayName = function() {
    alert(this.name);
}
function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;

var s1 = new SubType('ren');
s1.sayName();
console.log(s1.color);           //  ["red", "blue"]

ES6中我们可以通过类,我们使用extends实现基类(SuperType)与派生类(SubType)之间的继承。在派生类的constructor中调用super()即可访问基类的构造函数。super()负责初始化this,相当于ES5中的call和apply方法。

class SuperType {
    constructor(name) {
        this.name = name;
        this.color = ["red", "blue"];
    }
    sayName() {
        alert(this.name);
    }
}
class SubType extends SuperType {
    constructor(name, age) {
    // 相当于SuperType.call(this, name);
        super(name);
        this.age = age;
    }
}
var s1 = new SubType('ren', 19);
s1.sayName();
console.log(s1.color);       //  ["red", "blue"]

Tips:

- 只可在派生类的构造函数中使用super()
- 在构造函数中访问this之前一定要调用super(),它负责初始化this。
点赞
收藏
评论区
推荐文章
灯灯灯灯 灯灯灯灯
3年前
「超全超细」Java设计模式图文详解!!!
java设计模式—原型模式Java原型模式1、概述  啥是原型模式?  原型模式属于设计模式中的创建型中的一员,  原型模式:使用原型实例指定待创建对象的类型,并且通过复制这个原型来创建新的对象!  说大白话就是自己复制自己,通过原生对象复制出一个新的对象,这两个对象结构相同且相似;  需要注意的是,原型对象自己不仅是个对象还是个工厂!并且通过克隆方式创
晴空闲云 晴空闲云
3年前
JavaScript中isPrototypeOf函数详解
有时看一些框架源码的时候,会碰到isPrototypeOf()这个函数,那么这个函数有什么作用呢?isPrototypeOf()isPrototypeOf()是Object函数(类)的下的一个方法,用于判断当前对象是否为另外一个对象的原型,如果是就返回true,否则就返回false。这个函数理解的关键是在原型链上,这个据说是JavaScript
Stella981 Stella981
3年前
JavaScript prototype原型用法
JavaScript对象原型所有JavaScript对象都从原型继承属性和方法。<!DOCTYPEhtml<html<metacharset"utf8"<titlejs</title<body<h2JavaScript对象</h2
Stella981 Stella981
3年前
JavaScript学习总结(十七)——Javascript原型链的原理
一、JavaScript原型链ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。在JavaScript中,用__proto__属性来表示一个对象的原型链。当查找一个对象的属性时,JavaScript会向上遍历原型
Wesley13 Wesley13
3年前
JS原型、原型链深入理解
原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有”prototype”属性,函数对象有”prototype”属性,原型对象有”constructor”属性。原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有”prototype”属性,函数对象有”prototype”属性,原型对
Stella981 Stella981
3年前
JavaScript 原型和原型链的定义和使用
目录JavaScript原型和原型链的定义和使用01原型原型定义原型实例理解书写方法1:属性单个定义书写方法2:属性多个定义02原型链原型链定义原型链实例理解最终原型问题03原型和原型链的使用应用举例Ja
Stella981 Stella981
3年前
JavaScript 基于原型链的继承
JavaScript对象是动态的属性“包”(指其自己的属性)。JavaScript对象有一个指向一个原型对象的链。当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾。遵循ECMAScript标准,someObject.Prototype
Wesley13 Wesley13
3年前
ES6面向对象
ES6面向对象js中的面向对象functionUser(name,age){this.namename;//定义属性this.ageage;}//通过原型添加方法User.prototype.showNamefuncti
Wesley13 Wesley13
3年前
Java原型模式
原型模式  原型模式也称克隆模式。原型模式jianmingzhiyi,就是先创造出一个原型,然后通过类似于Java中的clone方法,对对象的拷贝,克隆类似于new,但是不同于new。new创造出来的对象采用的是默认值。克隆出来的对象与原型对象相同,同时不会影响原型对象,然后在修改克隆出来的对象。实现  继承Cloneable接口,重写cl
Stella981 Stella981
3年前
JavaScript基础之原型对象和原型链
!(https://oscimg.oschina.net/oscnet/64fbb850bccf434ebbf033f599907fb3.png)原型对象!(https://oscimg.oschina.net/oscnet/9994724f3f4d47db8b0e07b93c3250e7.jpg)原型对象简单来说就是