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"& ...
随机推荐
- Android 显示系统:OpenGL简介和Gralloc代码分析
一.OpenGL ES与EGL Android的GUI系统是基于OpenGL/EGL来实现的. 由于OpenGL是通用函数库,在不同平台系统上需要被“本土化”——把它与具体平台的窗口系统建立起关联,F ...
- Robot Framework 学习资源汇总
学习网站 http://robotframework.org/ http://www.testtao.cn/?cat=43 https://www.jianshu.com/c/483e8ffcbc79 ...
- [Bayes] Maximum Likelihood estimates for text classification
Naïve Bayes Classifier. We will use, specifically, the Bernoulli-Dirichlet model for text classifica ...
- python中星号变量的几种特殊用法
python中星号变量的几种特殊用法 不知道大家知不知道在Python中,星号除了用于乘法数值运算和幂运算外,还有一种特殊的用法"在变量前添加单个星号或两个星号",实现多参数的传入 ...
- 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 ……最近遇到了个问题,上午 ...
- python 时间类型
- 以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 ...
- 《精通并发与Netty》学习笔记(10 - 详解NIO (一) Channel、Buffer )
一.Java NIO 概述 Java NIO 由以下几个核心部分组成:ChannelsBuffersSelectors虽然Java NIO 中除此之外还有很多类和组件,但在我看来,Channel,Bu ...
- 后端根据查询条件生成excel文件返回给前端,vue进行下载
一.HTML代码 <el-col :xs="2" :md="2" :sm="3"> <el-button type=&qu ...
- prometheus 监控 redis + rabbitmq
1.安装部署 1.1 wget https://github.com/oliver006/redis_exporter/releases/download/v0.15.0/redis_exporter ...