这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

先从面向对象讲起,本瓜认为:面向对象编程,它的最大能力就是:复用!

咱常说,面向对象三大特点,封装、继承、多态。

这三个特点,以“继承”为核心。封装成类,是为了继承,继承之后再各自发展(重写),可理解为多态。所以,根本目的是为了继承,即“复用“!

如果你用 JavaScript 面向对象的能力来编程的话,能想到的,也只供使用的就是:基于原型

因为这门语言设计就是这样,我们之前也提过:JavaScript的语言设计主要受到了Self(一种基于原型的编程语言)和 Scheme(一门函数式编程语言)的影响;

它复用的能力就是来自原型!

好了,有这个认知基础,我们再看原型继承。

原型链继承

原型继承最直接的一种实现就是:原型链继承

ECMA-262 把原型链定义为 ECMAScript 的主要继承方式。其基本思想就是通过原型继承多个引用类型的属性和方法。

我们来看看原型链继承的代码实现:

function SuperType() {
this.property = true;
}
function SubType() {
this.subproperty = false;
} SuperType.prototype.getSuperValue = function() {
return this.property;
};
SubType.prototype.getSubValue = function () {
return this.subproperty;
}; SubType.prototype = new SuperType(); // 对 SubType 得原型链重新指定,是原型链继承
let instance = new SubType(); console.log(instance.getSuperValue()); // true

还需要再额外说明查找关系吗??不懂得工友可见这篇 《歪理解?原型链中的函数和对象》

这里还是用代码展示下它们的指向关系吧:

上面例子中有 1 个对象 instance , 两个函数,SuperType 和 SubType 。函数是上帝,对象是基本物质。继承来自两方面:1. 继承自祖先(遗产);2. 继承自上帝(天赋);

//  继承自祖先(遗产)

instance.__proto__ === SubType.prototype // true

SubType.prototype.__proto__ === SuperType.prototype // true

// 继承自上帝(天赋)

SuperType.__proto__  === Function.prototype // true

SubType.__proto__  === Function.prototype // true

SuperType.prototype.__proto__ === Object.prototype // true

Object.prototype.__proto__ === null // true

当然,我们并不是来讲原型链的。重点是:点出原型链继承的“问题”!!

它的主要问题出现在:原型中包含引用值的时候,原型中包含的引用值会在所有实例间共享。

function SuperType() {
this.colors = ["red", "blue", "green"];
} function SubType() {} SubType.prototype = new SuperType() // 原型链继承 let s1 = new SubType()
let s2 = new SubType()
s1.colors.push("yellow") console.log(s1.colors) // ['red', 'blue', 'green', 'yellow']
console.log(s2.colors) // ['red', 'blue', 'green', 'yellow']

colors 是个数组,引用值,当它共享给 SubType 的时候,用的是引用值,当我们实例化的时候,如果其中一个实力对它做出了修改,将会影响到其它实例的引用。

其实,我们也知道,很少在业务代码中这样去写继承:SubType.prototype = new SuperType() ,原型链继承会造成复用的混乱,所以它基本不会被单独使用。

构造函数继承

构造函数继承,也叫做:“盗用构造函数”,“对象伪装”或“经典继承”。

基本思路:在子类构造函数中用 apply()和 call()方法调用父类构造函数。

上一小节的例子改造为:

function SuperType() {
this.colors = ["red", "blue", "green"];
} function SubType() {
SuperType.call(this) // 构造函数继承
} let s1 = new SubType()
let s2 = new SubType()
s1.colors.push("yellow") console.log(s1.colors) // ['red', 'blue', 'green', 'yellow']
console.log(s2.colors) // ['red', 'blue', 'green']

完美解决原型链继承的问题,但是它也有它的问题,也是使用构造函数模式自定义类型的问题,

即:必须在构造函数中定义方法(在原型上定义方法,子类是访问不到的),函数不能重用。

function SuperType() {
} function SubType() {
SuperType.call(this) // 构造函数继承
} SuperType.prototype.fn = ()=>{} let s1 = new SubType() console.log(s1.fn) // undefined
function SuperType() {
this.fn=()=>{}
} function SubType() {
SuperType.call(this) // 构造函数继承
} let s1 = new SubType()
let s2 = new SubType() console.log(s1.fn === s2.fn) // false

而这一点,在原型链继承中,又是可以的。。。

function SuperType() {}
function SubType() {} SuperType.prototype.fn = ()=>{}
SubType.prototype = new SuperType() // 原型链继承 let s1 = new SubType()
console.log(s1.fn) // ()=>{}
function SuperType() {
this.fn=()=>{}
}
function SubType() {} SubType.prototype = new SuperType() // 原型链继承 let s1 = new SubType()
let s2 = new SubType() console.log(s1.fn === s2.fn) // true

所以,综上,原型链继承和构造函数继承的 “毛病” 分别是:

  1. 原型链继承:所有继承的属性和方法都会在对象实例间共享,无法做到实例私有。
  2. 构造函数继承:子类不能访问父类原型上的方法。

咱就是说,这东西怎么这么拧巴呢。。。

于是乎一个规避二者“毛病”的继承方式出现了:组合继承~~

组合继承

目前最流行的继承模式是组合继承!

思路是:使用原型链继承原型上的属性和方法,而通过构造函数继承实例属性。

function SuperType(name){
this.name = name;
this.colors = ["red", "blue", "green"];
} function SubType(name, age){
SuperType.call(this, name) // 构造函数继承
this.age = age;
} SuperType.prototype.sayName = function() {
console.log(this.name);
}
SubType.prototype = new SuperType() // 原型链继承 SubType.prototype.sayAge = function() {
console.log(this.age);
} let s1 = new SubType("Nicholas", 29)
let s2= new SubType("Greg", 27) s1.colors.push("yellow")
console.log(s1.colors) // ['red', 'blue', 'green', 'yellow']
console.log(s2.colors) // ['red', 'blue', 'green'] s1.sayName() // Nicholas
s2.sayName() // Greg s1.sayAge() // 29
s2.sayAge() // 27

组合继承,总结起来就是,属性(特别是引用值)通过构造函数去继承,而公用的、需要复用的方法用原型链去继承!!

说实话,JS 继承真的很奇怪。。。并不是面向对象语言,又要通过原型链去模拟面向对象,真的很多小坑的点需要去注意。(哈哈哈,想想还是函数式好,清晰)

本文转载于:

https://juejin.cn/post/7107779239281164301

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

记录--JS精粹,原型链继承和构造函数继承的 “毛病”的更多相关文章

  1. JS原型,原型链,类,继承,class,extends,由浅到深

    一.构造函数和原型 1.构造函数.静态成员和实例成员 在ES6之前,通常用一种称为构造函数的特殊函数来定义对象及其特征,然后用构造函数来创建对象.像其他面向对象的语言一样,将抽象后的属性和方法封装到对 ...

  2. JavaScript继承基础讲解,原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承

    说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象J ...

  3. 探索js原型链和vue构造函数中的奥妙

    这篇文章首先会讲到原型链以及原型链的一些概念,然后会通过分析vue的源码,来看一下vue的构造函数是如何被创建的,now we go! 一.什么是原型链? 简单回顾下构造函数,原型和实例的关系:   ...

  4. 怎么理解js的原型链继承?

    前言 了解java等面向对象语言的童鞋应该知道.面向对象的三大特性就是:封装,继承,多态. 今天,我们就来聊一聊继承.但是,注意,我们现在说的是js的继承. 在js的es6语法出来之前,我们想实现js ...

  5. js原型链理解(4)-经典继承

    经典继承就是组合继承,就是组合构造函数和原型链的优点混合继承. 1.避免引用类型的属性初始化 2.避免相同方法的多次初始化 function Super(name){ this.ages = [100 ...

  6. 前端基本知识(二):JS的原型链的理解

    之前一直对于前端的基本知识不是了解很详细,基本功不扎实,但是前端开发中的基本知识才是以后职业发展的根基,虽然自己总是以一种实践是检验真理的唯一标准,写代码实践项目才是唯一,但是经常遇到知道怎么去解决这 ...

  7. JS中原型链的理解

    new操作符具体干了什么呢?其实很简单,就干了三件事情. var obj = {}; obj.__proto__ = Base.prototype; Base.call(obj); 第一行,我们创建了 ...

  8. JS高级——原型链

    构造函数 构造函数是特殊的函数,里面没有returen返回值 new的过程中,会自动将对象返回,不需要return new的过程中,会执行函数中的代码,会将创建的对象赋值给构造函数中的this 基本概 ...

  9. js javascript 原型链详解

    看了许多大神的博文,才少许明白了js 中原型链的概念,下面给大家浅谈一下,顺便也是为了巩固自己 首先看原型链之前先来了解一下new关键字的作用,在许多高级语言中,new是必不可少的关键字,其作用是为了 ...

  10. js对象原型链

    JavaScript 规定,每一个构造函数都有一个 prototype 属性,指向另一个对象.这个对象的所有属性和方法,都会被构造函数的所拥有. 这也就意味着,我们可以把所有对象实例需要共享的属性和方 ...

随机推荐

  1. 遍历用for还是foreach?

    遍历用for还是foreach?这篇文章帮你轻松选择! 在编程的世界里,我们经常需要对数据进行循环处理,常用的两种方法就是:for循环和foreach循环.想象你站在一条装满宝贝的传送带前,你要亲手检 ...

  2. 二进制安装Kubernetes(k8s) v1.27.1 IPv4/IPv6双栈 可脱离互联网

    二进制安装Kubernetes(k8s) v1.27.1 IPv4/IPv6双栈 可脱离互联网 https://github.com/cby-chen/Kubernetes 开源不易,帮忙点个star ...

  3. nginx 配置stream模块代理并开启日志配置

    前言 nginx 1.20.1nginx从1.9.0开始,新增加了一个stream模块确保nginx 安装时开启stream模块 ./configure \ -- \--with-stream \ - ...

  4. InnoDB中不同SQL语句设置的锁

    锁定读(locking read).更新(UPDATE)或删除(DELETE)通常会在SQL语句处理过程中扫描的每个索引记录上设置记录锁.语句中是否存在排除行的WHERE条件并不重要.InnoDB不记 ...

  5. Ubuntu20.04安装记录

    在Ubuntu下将iso文件刻录到U盘, 可以使用系统自带的Startup Disk Creator. 分区方式 使用整个硬盘, 一个512G SSD, 使用默认的分区方式, 会创建一个512M的EF ...

  6. 【framework】View添加过程

    1 前言 WMS启动流程 中介绍了 WindowManagerService 的启动流程,本文将介绍 View 的添加流程,按照进程分为以下2步: 应用进程:介绍从 WindowManagerImpl ...

  7. 单例模式五种实现方式以及在JDK中的体现

    单例模式五种实现方式以及在JDK中的体现 一.五种实现方式 1.饿汉式 构造私有 提供一个静态私有的成员常量,类型就是单例类型,值是用私有构造创造出来的唯一实例 提供公共的静态方法获取上述的静态成员常 ...

  8. LVM精简卷(Thinly-Provisioned Logical Volumes)

    可能LVM大家都比较熟悉,那么精简卷又是干什么的呢?相比于普通LVM有什么优势,又会带来哪些新的问题?带着这些我们来一探究竟: 工作原理 在创建Thin"瘦"卷时,预分配一个虚拟的 ...

  9. 使用 MSYS2 编译 exe 可执行程序

    MSYS2 是一个在 Windows上 运行的软件环境,它提供了一种在 Windows 上使用 GNU 工具链的方式,包括 GCC 编译器和 GNU Make 构建系统. 在 MSYS2 中,你可以使 ...

  10. Direct2D CreateBitmap的使用

    当需要设置位图的混合模式时,应该使用ID2D1DeviceContext而不是ID2D1RenderTarget. 代码如下: #define WIN32_LEAN_AND_MEAN #include ...