JS 实现继承的方法 ES6 and ES5
继承
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的更多相关文章
- js中继承的方法总结(apply,call,prototype)
一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 代码如下: <SPAN style="<SPAN style="FONT-SIZE ...
- Js实现继承的方法
原型的作用:1.将公共部分放入原型中,这样构造出的多个实例对象的公共部分只会占用一个公共空间,实现数据共享和节省内存空间 2.通过原型实现继承:构造函数模拟 "类"这个面向对象的概 ...
- es6转es5
一.在没有IDE情况下的转换 在"我的电脑->D盘”新建个文件夹es6,文件夹里新建一个文件es6.js. 打开命令行窗口 1.先全局安装babel-cli,输入命令 npm inst ...
- es6继承 vs js原生继承(es5)
最近在看es2015的一些语法,最实用的应该就是继承这个新特性了.比如下面的代码: $(function(){ class Father{ constructor(name, age){ this.n ...
- 各种实现js继承的方法总结
昨天主要介绍了原型,在js中,原型,原型链和继承是三个很重要的概念,而这几个概念也是面试中经常会被问到的问题,今天,就把昨天还没总结的原型链和继承继续做一个整理,希望大家一起学习,一起进步呀O(∩_∩ ...
- JS创建对象、继承原型、ES6中class继承
面向对象编程:java中对象的两个基本概念:1.类:类是对象的模板,比如说Leader 这个是泛称领导,并不特指谁.2:实例:实例是根据类创建的对象,根据类Leader可以创建出很多实例:liyi,y ...
- ES6+转ES5(webpack+babel、指定多个js文件、自动注入)
接续上篇ES6+转ES5,本篇将使用webpack和babel将多个不同目录下指定的多个ES6+语法的js文件编译为ES5,并将编译后的文件配置注入对应的html文件. 所需环境node.npm.设置 ...
- js 继承 对象方法与原型方法
js函数式编程确实比很多强语言使用灵活得多,今天抽了点时间玩下类与对象方法调用优先级别,顺便回顾下继承 暂时把原型引用写成继承 先看看简单的两个继承 var Parent = function(){} ...
- JS中通过call方法实现继承
原文:JS中通过call方法实现继承 讲解都写在注释里面了,有不对的地方请拍砖,谢谢! <html xmlns="http://www.w3.org/1999/xhtml"& ...
随机推荐
- Event---事件详解
1.焦点事件 焦点:使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入. 可以通过以下方式给元素设置焦点: 点击.tab.js 不是所有元素都能够接收焦点的,能够响应用 ...
- redhat 7.6下如何更新YUM源(仓库)?
1. 安装epel-release yum install epel-release 2. 安装webstatic-release rpm -Uvh https://mirror.we ...
- 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 ...
- tomcat配置使用log4j管理日志
从tomcat官网下载和tomcat对应的tomcat-juli.jar和tomcat-juli-adapters.jar,从log4j官网下载log4j的jar包(我用的是log4j-1.2.17. ...
- Json_DataMember签名作用
[DataContract] public class ApiResponse { [DataMember] public string Time { get; set; } } 序列化和反序列,如果 ...
- 前端如何避免bug的产生?
项目环境:react生态圈 界面功能基本和:增(新增一条数据).删(删除一条数据).查(展示列表).改(修改数据)挂钩. 一.展示数据列表相关[判空,控制显示距离,分页是否有效,搜索是否有效] 1.渲 ...
- 使用微软的WinAppDriver进行Windows客户端自动化测试
一.WinAppDriver简介: 参见:https://github.com/microsoft/WinAppDriver Windows Application Driver(WinAppDriv ...
- manjaro-VM虚拟机vmmon错误
1.安装AUR : vmware-systemd-serverices 2.启动服务: systemctl enable vmware.service systemctl start vmware.s ...
- java_guide_类加载器
类加载器总结 JVM 中内置了三个重要的 ClassLoader,除了 BootstrapClassLoader 其他类加载器均由 Java 实现且全部继承自java.lang.ClassLoader ...
- 多路径IO
多路径IO(MPIO)是一个微软架构,通过在存储设备和windows操作系统之间提供一个备用数据路径,来减轻主机总线适配器(HBA)故障的影响,MPIO能够支持多达32个备用路径,来增加Windows ...