继承

  • 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. Android 显示系统:OpenGL简介和Gralloc代码分析

    一.OpenGL ES与EGL Android的GUI系统是基于OpenGL/EGL来实现的. 由于OpenGL是通用函数库,在不同平台系统上需要被“本土化”——把它与具体平台的窗口系统建立起关联,F ...

  2. Robot Framework 学习资源汇总

    学习网站 http://robotframework.org/ http://www.testtao.cn/?cat=43 https://www.jianshu.com/c/483e8ffcbc79 ...

  3. [Bayes] Maximum Likelihood estimates for text classification

    Naïve Bayes Classifier. We will use, specifically, the Bernoulli-Dirichlet model for text classifica ...

  4. python中星号变量的几种特殊用法

    python中星号变量的几种特殊用法 不知道大家知不知道在Python中,星号除了用于乘法数值运算和幂运算外,还有一种特殊的用法"在变量前添加单个星号或两个星号",实现多参数的传入 ...

  5. C-Lodop提示Access violation at address ...in module 'CLodopPrint32.exe' write of address

    C-Lodop提示 Access violation at address ……in module 'CLodopPrint32.exe' write of address ……最近遇到了个问题,上午 ...

  6. python 时间类型

  7. 以rpm安装包的方式安装MySQL

    rpm -vif MySQL-server-5.6.26-1.linux_glibc2.5.x86_64.rpm MySQL-client-5.6.26-1.linux_glibc2.5.x86_64 ...

  8. 《精通并发与Netty》学习笔记(10 - 详解NIO (一) Channel、Buffer )

    一.Java NIO 概述 Java NIO 由以下几个核心部分组成:ChannelsBuffersSelectors虽然Java NIO 中除此之外还有很多类和组件,但在我看来,Channel,Bu ...

  9. 后端根据查询条件生成excel文件返回给前端,vue进行下载

    一.HTML代码 <el-col :xs="2" :md="2" :sm="3"> <el-button type=&qu ...

  10. prometheus 监控 redis + rabbitmq

    1.安装部署 1.1 wget https://github.com/oliver006/redis_exporter/releases/download/v0.15.0/redis_exporter ...