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

一百一十八篇,javascript,原型,链式,继承 · 浏览次数 : 87

小编点评

**JS高级程序设计第八章“对象、类与面向对象编程”学习笔记** **1.原型链原型链** 原型链是一种JS实现\"继承\"的方案之一,它通过原型继承多个引用类型的属性和方法。原型链的基本思想就是通过原型继承多个引用类型的属性和方法。 **2.构造函数、原型和实例的关系** * 构造函数创建一个新的实例对象。 *原型是一个指向构造函数的属性。 * 实例是一个指向原型对象的指针。 **3.原型链的基本构想** 原型链是一个指向原型对象的链表。默认情况下,所有引用类型都继承自Object,这也是通过原型链实现的。 **4.原型链的优点** * 实现继承。 * 实例可以使用这个\"链\"上的所有内容。 * 类似原则,在读取实例上的属性时,首先会在实例上搜索这个属性。 * 搜索到原型链的末端。 **5. instanceof()方法和isPrototypeOf()方法的原型关系** * instanceof()方法检测实例的原型链中出现过相应的构造函数使用isPrototypeOf()方法判断当前对象是否为另外一个对象的原型function SuperType() { this.property = true;} **6. 方法覆盖子类** * 父类有时需要增加子类没有的方法 (否则为什么会需要子类...)也可以进行方法覆盖。

正文

好家伙,好家伙,本篇为《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剩下的几种实现继承的方式)

 

与第一百一十八篇: JavaScript 原型链式继承相似的内容:

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

好家伙,好家伙,本篇为《JS高级程序设计》第八章“对象、类与面向对象编程”学习笔记 1.原型链 原型链是JS实现"继承"的方案之一 ECMA-262把原型链定义为ECMAScript的主要继承方式。其基本思想就是通过原型继承多个引用类型的属性和方法。 重温一下构造函数、原型和实例的关系:每个构造函数

第一百一十六篇: JavaScript理解对象

好家伙,本篇为《JS高级程序设计》第八章“对象、类与面向对象编程”学习笔记 1.关于对象 ECMA-262将对象定义为一组属性的无序集合。严格来说,这意味着对象就是一组没有特定顺序的值。 对象的每个属性或方法都由一个名称来标识,这个名称映射到一个值。正因为如此(以及其他还未讨论的原因),可以把 EC

第一百一十五篇: JS集合引用类型Map

好家伙,本篇为《JS高级程序设计》第六章“集合引用类型”学习笔记 1.Map ECMAScript6以前,在JavaScript中实现“键/值”式存储可以使用object来方便高效地完成,也就是使用对象属性作为键,再使用属性来引用值。 但这种实现并非没有问题,为此TC39委员会专门为“键/值”存储定

第一百一十一篇:基本引用类型Date

好家伙,本篇为《JS高级程序设计》第五章的学习笔记 1.基本引用类型 引用值(或者对象)是某个特定引用类型的实例,在ECMAScript中,引用类型是把数据和功能组织到一起的结构,(像极了“类”) 经常被人错误的称作“类”。 虽然从技术上讲JavaScript是一门面向对象语言,但是ECMAScri

第一百一十篇:内存泄漏和垃圾回收(JS)

好家伙,本篇内容为《JS高级程序设计》第四章的学习笔记 1.内存泄露 1.1.什么是内存泄漏? 内存泄漏(Memory Leak)是指程序中已动态分配的堆内存由于某种原因程序未释放或无法释放,造成系统内存的浪费,导致程序运行速度减慢甚至系统崩溃等严重后果。 内存泄漏缺陷具有隐蔽性、积累性的特征,比其

第一百一十二篇: JS数组Array(一)数组基本用法

好家伙, 1.数组 Array应该就是ECMAScript中最常用的类型了。ECMAScript数组跟其他编程语言的数组有很大区别。 跟其他语言中的数组一样,ECMAScript 数组也是一组有序的数据, 但跟其他语言不同的是,数组中每个槽位可以存储任意类型的数据。 这意味着可以创建一个数组,它的第

第一百一十四篇: JS数组Array(三)数组常用方法

好家伙,本篇为《JS高级程序设计》第六章“集合引用类型”学习笔记 1.数组的复制和填充 批量复制方法 copyWithin(),以及填充数组方法fill()。 这两个方法的函数签名类似,都需要指定既有数组实例上的一个范围,包含开始索引,不包含结束索引。 使用这个方法不会改变数组的大小。 1.1.fi

第一百零五篇:变量的原始值和引用值

好家伙,JS基础接着学, 本篇内容为《JS高级程序设计》第四章学习笔记 1.原始值和引用值 ECMAScript变量可以包含两种不同类型的数据:原始值和引用值。原始值(primitive value)就是最简单的数据,引用值(reference value)则是由多个值构成的对象。 在把一个值赋给变

第一百零六篇:变量的不同声明(var,let和const的不同)

JS关于变量的声明,变量提升,暂时性死区

第一百零七篇:基本数据类型(undefined,null,boolean类型)

好家伙, 本篇内容为《JS高级程序设计》第三章学习笔记 1.数据类型 ECMAScript有6种简单数据类型(称为原始类型): Undefined, Null, Boolean, Number, String和Symbol。 Symbol (符号)是ECMAScript6新增的。还有一种复杂数据类型