关于JS继承

关于继承这个概念,是由面向对象衍生出来的。而JS身为一种基于面向对象而设计的语言,它和正统的面向对象语言又是有差别的。

面向对象语言

身为面向对象语言需要对开发者提供四种能力:

①:封装 - 把相关的信息(无论数据或方法)存储在对象中的能力;

②:聚集 - 把一个对象存储在另一个对象内的能力;

③:多态 - 编写能以多种方法运行的函数或方法的能力;

④:继承 - 有另一个或多个类得来类的属性和方法的能力;

虽然JS都具备这种能力,然而它却和正统的面向对象语言有差异,具体表现主要在第③、④点。

多态

多态主要有两种实现形式:

①:重载(编译时多态性) - 方法名相同,形参个数或类型不同;

②:重写(运行时多态性) - 在继承中,子类重写父类的方法;

这两种形式上JS和java/C#是表现形式是不一样的。

重载:

// java代码示例
public void sum(int n, float m){ }
public void sum(int n, float m, int t){ }
public void sum(int n, float m, String t){ }

在java中这sum方法会分别在不同情况下调用。

// js代码示例
function sum(n,m){ }
function sum(n,m,t){ }

在JS中sum方法在前面定义的会被后面定义的覆盖,因此JS用相同方法处理不用情况只能在sum方法内部对数据做识别判断了。

重写:

//java代码示例
public class Main { public static void main(String[] args) {
Student a = new Student();
a.say();
}
} class person{
public void say(){
System.out.println("11111");
}
} class Student extends person{
public void say(){
System.out.println("22222");
}
}

这里Student继承了person,对say方法进行了重写,虽然重写了say方法,但是父类方法不会被改变。

//js代码示例
function A(m){
this.m = m;
}
A.prototype.getM = function(){
console.log(100,this.m)
} function B(n){
this.n = n;
}
B.prototype = new A(100);
B.prototype.getN = function(){
console.log(this.n)
} let b = new B(200);
b.getM(); //打印 100,100 b.getM = function(){
console.log(1)
}
b.getM(); //打印 1
A.prototype.getM(); //打印 100,undefined b.__proto__.__proto__.getM = function(){
console.log(0,this.m)
};
b.getM(); //打印 1
A.prototype.getM(); //打印 0,undefined

而JS对继承的父类的重写就有点不一样了,JS是基于原型链的继承。调用方法或对象时会在原型链中追溯,而当在实例b中添加了getM方法时,其实是拦截了原型链上的getM,因此这种拦截不会改动到A.prototype.getM,然而A.prototype.getM又不是绝对的私密的,在示例中可以看到利用b.__proto__.__proto__.getM重写getM是会导致A.prototype.getM也被重写的,所以js原型链继承中是没有完整意义上的私密属性的。

继承

和其他正统的面向对象语言不一样,其他语言的继承一般都是拷贝继承,也就是子类会把父类中的方法和属性拷贝的子类中实现继承,而JS的继承是把父类的原型放在子类的原型链上,利用原型链的查找机制实现继承的。

而且JS的继承方式也是很多的,下面列举一下比较常见的继承方式。

一、原型链继承
function A(m){
this.m = m;
}
A.prototype.getM = function(){
console.log(this.m)
} function B(n){
this.n = n;
}
B.prototype = new A(100);
B.prototype.getN = function(){
console.log(this.n)
} let b = new B(200);
b.getN(); //输出 200
b.getM(); //输出 100

特点:

1、非常纯粹的继承关系,实例是子类的实例,也是父类的实例;

2、父类新增属性或其原型新增属性,子类都能访问;

缺点:

1、子类能重写父类方法,如:b.__proto__.__proto__.getM = null,可以改写父类方法;

2、父类的私有属性和公有属性都变成子类的公有属性;

3、继承时方法B原型上原有的方法或属性会丢失,如:constructor构造函数;(解决:B.prototype = B);

4、子类创建实例时无法向父类传参;

5、无法实现多继承;

二、构造函数继承
function A(m, n){
this.m=m;
this.n=n;
}
function B(m, n, t){
A.call(this, m, n);
this.t=t;
}
var b = new B(1, 2, 3);
console.log(b.m, b.n, b.t);

特点:

1、能在子类创建实例时向父类传递参数;

2、可以实现多继承;

缺点:

1、只能继承父类的属性(不继承原型链);

2、创建的实例携带着父类属性,臃肿;

三、寄生组合继承
function B(n){
this.n = n;
}
B.prototype.getB = function(name){
console.log(this.n, name);
} function A(m){
B.call(this,200)
this.m = m;
} // 我是旧时代的残党,新时代没有适合承载我的船
// (function(){
// // 创建一个没有实例方法的类
// var Super = function(){};
// Super.prototype = B.prototype;
// //将实例作为子类的原型
// A.prototype = new Super();
// })(); // ECMAScript 5 通过新增 Object.create()方法规范化了原型式继承。
A.prototype = Object.create(B.prototype); A.prototype.constructor = A;
A.prototype.getA = function(name){
console.log(this.m, name)
} var aa = new A(100);
aa.getA("A");
aa.getB("B");

特点:

1、可以继承父类的属性及其原型上的属性;

2、既是子类的实例,也是父类的实例;

3、不存在引用属性共享问题;

4、父类可接收传参;

关于JS继承的更多相关文章

  1. js继承

    js继承有5种实现方式: 继承第一种方式:对象冒充 function Parent(username){ this.username = username; this.hello = function ...

  2. js继承之call,apply和prototype随谈

    在js中,call,apply和prototype都可以实现对象的继承,下面我们看一个例子: function FatherObj1() { this.sayhello = "I am jo ...

  3. js继承精益求精之寄生式组合继承

    一.混合/组合继承的不足 上一篇JS继承终于混合继承,认真思考一下,发现其还是有不足之处的: 空间上的冗余:在使用原型链的方法继承父类的原型属性(Animal.prototype)的同时,也在子类的原 ...

  4. 老生常谈--Js继承小结

    一直以来,对Js的继承有所认识,但是认识不全面,没什么深刻印象.于是,经常性的浪费很多时间重新看博文学习继承,今天工作不是特别忙,有幸看到了http://www.slideshare.net/stoy ...

  5. Js继承小结

    Js继承小结 一直以来,对Js的继承有所认识,但是认识不全面,没什么深刻印象.于是,经常性的浪费很多时间重新看博文学习继承,今天工作不是特别忙,有幸看到了http://www.slideshare.n ...

  6. js继承实现

    JS实现继承可以分为:对象冒充和原型链继承 其中对象冒充又包括:临时变量,call 和 apply 临时变量方法: function Person(name,sex){ this.name = nam ...

  7. js继承之借用构造函数继承

    我的上一篇文章介绍了,原型链继承模式.但是单纯的原型链模式并不能很好地实现继承. 一.原型链的缺点 1.1 单纯的原型链继承最大的一个缺点,来自于原型中包含引用类型的值. 本来,我们没有通过原型链实现 ...

  8. js继承之原型链继承

    面向对象编程都会涉及到继承这个概念,JS中实现继承的方式主要是通过原型链的方法. 一.构造函数.原型与实例之间的关系 每创建一个函数,该函数就会自动带有一个 prototype 属性.该属性是个指针, ...

  9. js继承的常用方法

    写在前面的话:这篇博客不适合对面向对象一无所知的人,如果你连_proto_.prototype...都不是很了解的话,建议还是先去了解一下JavaScript面向对象的基础知识,毕竟胖子不是一口吃成的 ...

  10. JS--我发现,原来你是这样的JS:面向对象编程OOP[3]--(JS继承)

    一.面向对象编程(继承) 这篇博客是面向对象编程的第三篇,JS继承.继承顾名思义,就是获取父辈的各种"财产"(属性和方法). 怎么实现继承? 我们的JavaScript比较特别了, ...

随机推荐

  1. 线程池之 newSingleThreadExecutor 介绍

    package com.aaa.threaddemo; import java.text.DateFormatSymbols; import java.util.concurrent.Executor ...

  2. 深入理解F1-score

    本博客的截图均来自zeya的post:Essential Things You Need to Know About F1-Score | by Zeya | Towards Data Science ...

  3. Redis 分布式锁使用不当,酿成一个重大事故,超卖了100瓶飞天茅台!!!(转)

    基于Redis使用分布式锁在当今已经不是什么新鲜事了. 本篇文章主要是基于我们实际项目中因为redis分布式锁造成的事故分析及解决方案.我们项目中的抢购订单采用的是分布式锁来解决的,有一次,运营做了一 ...

  4. EasyExcel小试牛刀

    原创:转载需注明原创地址 https://www.cnblogs.com/fanerwei222/p/12029411.html 某种偶然的机会遇到了这个插件, 听说很牛X, 我之前也不知道, 不过还 ...

  5. Spring中事务管理的两种方式

    spring支持编程式事务管理和声明式事务管理两种方式. 编程式事务管理使用TransactionTemplate或者直接使用底层的PlatformTransactionManager.对于编程式事务 ...

  6. KC705E增强版基于FMC接口的 Kintex-7 XC7K325T PCIeX8 接口卡

    一.板卡概述 本板卡基于Xilinx公司的FPGAXC7K325T-2FFG900 芯片,pin_to_pin兼容FPGAXC7K410T-2FFG900 ,支持PCIeX8.64bit DDR3容量 ...

  7. Solution Set - 《赏竹而格之》

    1.「GXOI / GZOI 2019」「洛谷 P5304」旅行者   Link & Submission.   经典二进制分组,没啥好说的. 2. 「SDOI 2019」「洛谷 P5361」 ...

  8. tomcat的基本使用及项目部署

    tomcat介绍 我们在学习Javaweb的时候,最普遍使用的服务器j就是阿帕奇的tomcat,主要是用来处理jsp和servlet的请求以及响应 tomcat的启动和关闭 在我们安装完tomcat后 ...

  9. php 利用 fsockopen GET/POST 提交表单及上传文件

    1.GET get.php <?php$host = 'demo.fdipzone.com';$port = 80;$errno = '';$errstr = '';$timeout = 30; ...

  10. JVM基础学习(一):JVM内存模型

    在Java进阶知识的学习中,JVM都是避不过去的一关,我个人对于JVM的理解其实就是相当于在操作系统的外层再加了一层中间层,从来屏蔽了具体硬件之间的不同实现,使得Java实现了最重要的特性:一次编译, ...