首页 > 编程语言 >第一百一十八篇: JavaScript 原型链式继承

第一百一十八篇: JavaScript 原型链式继承

时间:2022-12-28 20:23:41浏览次数:60  
标签:function instance JavaScript SubType 一百一十八篇 原型 链式 SuperType prototype

好家伙,好家伙,本篇为《JS高级程序设计》第八章“对象、类与面向对象编程”学习笔记

 

1.原型链

原型链是JS实现"继承"的方案之一

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

重温一下构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型有一个属性指回构造函数,而实例有一个内部指针指向原型。

如果原型是另一个类型的实例呢?那就意味着这个原型本身有一个内部指针指向另一个原型,相应地另一个原型也有一个指针指向另一个构造函数。

这样就在实例和原型之间构造了一条原型链。这就是原型链的基本构想。

function SuperType() {
    this.property = true;
  }
  SuperType.prototype.getSuperValue = function() {
    return this.property;
  };
  function SubType() {
    this.subproperty = false;
  }
  // 继承SuperType
  SubType.prototype = new SuperType();
  SubType.prototype.getSubValue = function () {
    return this.subproperty;
  };
  let instance = new SubType();
  console.log(instance.getSuperValue()); // true

 

 

 

 

 

 

 

这个例子中实现继承的关键,是SubType没有使用默认原型,而是将其替换成了一个新的对象。

这个新的对象恰好是SuperType的实例。

这样一来,SubType的实例不仅能从SuperType的实例中继承属性和方法,而且还与SuperType的原型挂上了钩。

 

于是我们可以来看看他们的关系网

 

 

 

 实际上,原型链中还有一环。默认情况下,所有引用类型都继承自Object,这也是通过原型链实现的。完整的继承链

 

 

 

 

 

这样做有什么好处?

1.实现了继承

2.实例可以使用这个"链"上的所有内容,

特点:

1.就近原则,在读取实例上的属性时,首先会在实例上搜索这个属性。

如果没找到,则会继承搜索实例的原型。在通过原型链实现继承之后,搜索就可以继承向上,搜索原型的原型。

对属性和方法的搜索会一直持续到原型链的末端。

 

 

 

2.instanceof()方法和isPrototypeOf()方法

原型与实例的关系可以通过instanceof()方法和isPrototypeOf()方法来确定。

使用instanceof()方法检测实例的原型链中出现过相应的构造函数

使用isPrototypeOf()方法判断当前对象是否为另外一个对象的原型

function SuperType() {
    this.property = true;
}

function SubType() {
    this.subproperty = false;
}

// 继承SuperType
SubType.prototype = new SuperType();

let instance = new SubType();

console.log(instance instanceof Object);      
console.log(instance instanceof SuperType);   
console.log(instance instanceof SubType);     

console.log(Object.prototype.isPrototypeOf(instance));      
console.log(SuperType.prototype.isPrototypeOf(instance));  
console.log(SubType.prototype.isPrototypeOf(instance));     

 

 

 

 (全对✔)

 

 

 

3.方法覆盖

子类有时需要增加父类没有的方法 (不然为什么会需要子类...)

也可以进行方法覆盖

function SuperType() {
    this.property = true;
}
SuperType.prototype.getSuperValue = function () {
    return this.property;
};

function SubType() {
    this.subproperty = false;
}
// 继承SuperType
SubType.prototype = new SuperType();
//新方法
SubType.prototype.getSuperValue = function () {
    return this.subproperty;
};
//覆盖已有的方法
SubType.prototype.getSuperValue = function () {
    console.log("getSubValue()方法已被覆盖")
};

let instance = new SubType();

console.log(instance.getSuperValue()); // false

 

 

 

 

 

4.其它的继承方法

JavaScript继承(图解笔记) - 简书 (jianshu.com)

(写的挺好的,一篇直接看懂JS剩下的几种实现继承的方式)

 

标签:function,instance,JavaScript,SubType,一百一十八篇,原型,链式,SuperType,prototype
From: https://www.cnblogs.com/FatTiger4399/p/17010946.html

相关文章

  • 分享20个Javascript中的数组方法,收藏
    什么是数组?与其他编程语言中的数组一样,Array对象允许在一个变量名称下存储多个项的集合,并且具有用于执行常见数组操作的成员。 声明数组我们可以用两种不同的方式......
  • Web前端期末大作业--马尔代夫旅游网页设计(HTML+CSS+JavaScript+)实现
    目录​​前言介绍:​​​​网站首页:​​​​关于马尔代夫:​​​​酒店信息介绍:​​​​最新优惠政策:​​​​旅游须知模块:​​​​关于我们模块:​​​​主要源码结构:​​​......
  • .NET和JavaScript控件丨Infragistics功能简介
    使用InfragisticsUltimateUI/UX工具包简化开发,提供综合的企业级UI控件库和使用Indigo.Design的UX设计-开发协作工具-一个完整的设计到代码系统-集成原型、设计系统......
  • JavaScript 内存泄露问题
     内存泄露是每个开发者最终都不得不面对的问题。即便使用自动内存管理的语言,你还是会碰到一些内存泄漏的情况。内存泄露会导致一系列问题,比如:运行缓慢,崩溃,高延迟,甚至一些与......
  • javascript 事件循环
    JavaScript的运行顺序就是完全单线程的异步模型:同步在前,异步在后。所有的异步任务都要等待当前的同步任务执行完毕之后才能执行。JavaScript是单线程执行内容分为普通代......
  • JavaScript普通函数与箭头函数有怎样的区别?
     比较点普通函数箭头函数具体案例简写/箭头函数如果没有参数,同时函数体的返回值只有一句,则{}和return都可以省略。1、函数简写......
  • 理解JavaScript中的“面向对象”
    理解JavaScript中的“面向对象”一引子面向对象,是程序开发者再熟悉不过的一个概念。一说到它,你首先会想到的是什么?类?继承?方法与属性?不同技术栈的开发者或许有不同的第一反......
  • SpiderMonkey-让你的C++程序支持JavaScript脚本
    译序有些网友对为什么D2JSP能运行JavaScript脚本程序感到奇怪,因此我翻译了这篇文章,原文在​​这里​​​。这篇教程手把手教你如何利用SpiderMonkey创建一个能执行JavaScri......
  • JavaScript-C/C++ (SpiderMonkey) 引擎嵌入开发指南(中文向导)
    JavaScript-C/C++引擎概览本文档提供了一个JavaScript(JS)引擎的C语言实现的概述,他介绍了你如何在你的应用程序中嵌入脚本引擎来让它们可以使用JS。有两大理由让你在应用程......
  • JavaScript 深拷贝的循环引用问题
    如果说道实现深拷贝最简单的方法,我们第一个想到的就是JSON.stringify()方法,因为JSON.stringify()后返回的是字符串,所以我们会再使用JSON.parse()转换为对象,如下代码:let......