继承

  • ES6 方法  (类的继承)

ES6中有一个属性的 extends

语法:

• class Father {}

• class Son extends Father{}

注意:是子类继承父类

super关键字

我们应用的过程中会遇到父类子类都有的属性,此时,没必要再写一次,可以直接调用父类的方法就可以了

super关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数,也可以调用父类的普通函数

当子类没有constructor的时候可以随意用父类的,但是如果子类也含有的话,constructor会返回实例,this的指向不同,不可以再直接使用父类的东西

调用父类构造函数

class F {
constructor(name, age) {}
}

class S extends F {
constructor(name, age) {
super(name, age);
}
}

//注意: 子类在构造函数中使用super, 必须放到this 前面(必须先调用父类的构造方法,在使用子类构造方法

调用父类普通函数

class F {
constructor(name, age) {}
say() {}
}

class S extends F {
constructor(name, age) {
super(name, age);
}
say() {
super.say()
}
}

//注意:如果子类也有相同的方法,优先指向子类,就近原则

总结:super调用父类的属性和方法,那么查找属性和方法的原则就近原则

如果子类不写东西,那么直接继承父类就可以用

但是如果子类有自己的构造函数和父类同名的方法,此时不可以直接用父类的东西,需要用super调用父类的方法和构造函数

附案例

class Father {
constructor(uname, age) {
this.uname = uname;
this.age = age;
}

qian() {
console.log('赚他一个亿');
}

}
// 子类
class Son extends Father {
constructor(uname, age, score) {
// super:可以调用父类的构造函数和方法
super(uname, age);
this.score = score;
}


say() {
console.log('哇哈哈');
}


qian() {
super.qian();
console.log('zt两毛钱');
}

}

var obj = new Son('张三', 22, 99);
console.log(obj);
// obj.qian();
obj.qian();

  • ES5 继承 又称为组合继承

ES6之前并没有给我们提供extends 继承。我们可以通过构造函数+原型对象模拟实现继承,被称为组合继承。

call() 方法 继承属性

调用这个函数, 并且修改函数运行时的this 指向

这个方法里面有参数 第一个参数是谁继承 就写谁 后面跟着属性

function Father (uname, age) {
this.uname = uname;
this.age = age;
}
Father.prototype.say = function () {
console.log('唱歌');
}


// 属性,方法
function Son (uname, age, score) {
// this 指的是调用者
Father.call(this, uname, age);
this.score = score;

}

var obj = new Son('张三', 22, 99);
console.log(obj);

继承方法

就是把父亲的原型对象 赋给子类的实例对象;

function Father () {

}
Father.prototype.say = function () {
console.log('new哇哈哈');
}


function Son () {}

// 继承方法
// Son.prototype = Father.prototype;
// 把父类的实例对象赋值给子类的原型,让子类的原型对象指回构造函数
Son.prototype = new Father();
Son.prototype.constructor = Son


var obj = new Son();

obj.say();

注意 一定要让子类指回构造函数 因为在赋值的时候 会把子类给覆盖掉

Son.prototype = new Father();

Son.prototype.constructor = Son;
 

总结 用构造函数继承属性 用原型对象继承方法

JS 实现继承的方法 ES6 and ES5的更多相关文章

  1. js中继承的方法总结(apply,call,prototype)

    一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 代码如下: <SPAN style="<SPAN style="FONT-SIZE ...

  2. Js实现继承的方法

    原型的作用:1.将公共部分放入原型中,这样构造出的多个实例对象的公共部分只会占用一个公共空间,实现数据共享和节省内存空间 2.通过原型实现继承:构造函数模拟 "类"这个面向对象的概 ...

  3. es6转es5

    一.在没有IDE情况下的转换 在"我的电脑->D盘”新建个文件夹es6,文件夹里新建一个文件es6.js. 打开命令行窗口 1.先全局安装babel-cli,输入命令 npm inst ...

  4. es6继承 vs js原生继承(es5)

    最近在看es2015的一些语法,最实用的应该就是继承这个新特性了.比如下面的代码: $(function(){ class Father{ constructor(name, age){ this.n ...

  5. 各种实现js继承的方法总结

    昨天主要介绍了原型,在js中,原型,原型链和继承是三个很重要的概念,而这几个概念也是面试中经常会被问到的问题,今天,就把昨天还没总结的原型链和继承继续做一个整理,希望大家一起学习,一起进步呀O(∩_∩ ...

  6. JS创建对象、继承原型、ES6中class继承

    面向对象编程:java中对象的两个基本概念:1.类:类是对象的模板,比如说Leader 这个是泛称领导,并不特指谁.2:实例:实例是根据类创建的对象,根据类Leader可以创建出很多实例:liyi,y ...

  7. ES6+转ES5(webpack+babel、指定多个js文件、自动注入)

    接续上篇ES6+转ES5,本篇将使用webpack和babel将多个不同目录下指定的多个ES6+语法的js文件编译为ES5,并将编译后的文件配置注入对应的html文件. 所需环境node.npm.设置 ...

  8. js 继承 对象方法与原型方法

    js函数式编程确实比很多强语言使用灵活得多,今天抽了点时间玩下类与对象方法调用优先级别,顺便回顾下继承 暂时把原型引用写成继承 先看看简单的两个继承 var Parent = function(){} ...

  9. JS中通过call方法实现继承

    原文:JS中通过call方法实现继承 讲解都写在注释里面了,有不对的地方请拍砖,谢谢! <html xmlns="http://www.w3.org/1999/xhtml"& ...

随机推荐

  1. Event---事件详解

    1.焦点事件 焦点:使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入. 可以通过以下方式给元素设置焦点: 点击.tab.js 不是所有元素都能够接收焦点的,能够响应用 ...

  2. redhat 7.6下如何更新YUM源(仓库)?

    1. 安装epel-release     yum install epel-release 2. 安装webstatic-release     rpm -Uvh https://mirror.we ...

  3. springboot之kafka安装与实践

    环境:腾讯云centos7 1.下载 http://mirror.bit.edu.cn/apache/kafka/2.3.0/kafka_2.11-2.3.0.tgz 2.解压 tar -xvf ka ...

  4. tomcat配置使用log4j管理日志

    从tomcat官网下载和tomcat对应的tomcat-juli.jar和tomcat-juli-adapters.jar,从log4j官网下载log4j的jar包(我用的是log4j-1.2.17. ...

  5. Json_DataMember签名作用

    [DataContract] public class ApiResponse { [DataMember] public string Time { get; set; } } 序列化和反序列,如果 ...

  6. 前端如何避免bug的产生?

    项目环境:react生态圈 界面功能基本和:增(新增一条数据).删(删除一条数据).查(展示列表).改(修改数据)挂钩. 一.展示数据列表相关[判空,控制显示距离,分页是否有效,搜索是否有效] 1.渲 ...

  7. 使用微软的WinAppDriver进行Windows客户端自动化测试

    一.WinAppDriver简介: 参见:https://github.com/microsoft/WinAppDriver Windows Application Driver(WinAppDriv ...

  8. manjaro-VM虚拟机vmmon错误

    1.安装AUR : vmware-systemd-serverices 2.启动服务: systemctl enable vmware.service systemctl start vmware.s ...

  9. java_guide_类加载器

    类加载器总结 JVM 中内置了三个重要的 ClassLoader,除了 BootstrapClassLoader 其他类加载器均由 Java 实现且全部继承自java.lang.ClassLoader ...

  10. 多路径IO

    多路径IO(MPIO)是一个微软架构,通过在存储设备和windows操作系统之间提供一个备用数据路径,来减轻主机总线适配器(HBA)故障的影响,MPIO能够支持多达32个备用路径,来增加Windows ...