`

javascript 原型链继承方式的解析

阅读更多

在面向对象语言中,继承有两种形式:1.接口继承; 2.实现继承。在js中只有实现继承。

利用原型链来实现继承,基本思想是:利用原型让一个引用类型继承另一个引用类型的属性和方法。

代码如下:

  function superClass (){
        this.property1 = true;
    }  
    superClass.prototype.method1 = function (){
        console.log("superClass method1");
    }
    superClass.prototype.method2 = function (){
        console.log("superClass method2");
    }
    function subClass (){
        this.property2 = false;
    }
    subClass.prototype = new superClass();
    subClass.prototype.method1 = function (){
        console.log("subClass method1");
    }
    subClass.prototype.method3 = function () {
        console.log("subClass method3");
    }
    var superclass = new superClass ();
    superclass.method1();                        //superClass method1
    superclass.method2();                        //superClass method2
    var subclass = new subClass ();
    subclass.method1();                          //subClass method1
    subclass.method2();                          //superClass method2
    subclass.method3();                          //subClass method3 

 

上面的例子中subClass继承了superClass中的method1 和method2 两个方法,并且重写了method1方法。增加了自己的method3 方法。

 

subClass 继承的时候其实是重写了原型对象,使prototype指向了superClass 的一个实例。

 

原来存在与superclass的实例中的属性和方法,现在也存在与subClass.prototype中。
 即:原来在superClass中为实例属性和方法,现在为subClass中为原型属性和方法。

 

他们的关系如图:

 

上面的代码我们并没有使用 subClass 默认提供的原型,而是给它换成了一个新的原型。这个原型就是 superClass 的一个实例。

于是新的原型就有了 superClass 的实例所拥有的所有的属性和方法。而且内部还有一个指针指向了superClass 的原型。

最终的结果是:subclass 指向了 subClass 的原型,subClass 的原型指向了 superClass 的原型。 method2 方法还是存在于 superClass 方法中。但是 property1 存在于 subClass.prototype 中。这是因为 property1 是一个实例属性而 method2 为原型方法。

 

在 superClass 中的 method1 不能被 subclass 访问到,是因为原型的搜索机制导致的。

原型机制的搜索机制为:每当读取某个对象的属性或者方法的时候,都会先搜索实例中是否有该属性或者方法,如果没有继续搜索原型中的属性或者方法,如果还是没有则继续向下搜索,直到 Object。所以 subClass.prototype 中的 method1 覆盖了 superClass.prototype 中的 method1 。

 

原型链的问题:

    在原型链中出现了一个问题,就是本来在父类中为实例属性和方法,在继承类中却变成了原型属性和方法。例如上面的property1。

    解决这个问题需要使用原型链和构造函数组合的办法,即组合继承或者伪经典继承。

 

 

 

 

 

 

  • 大小: 19.2 KB
分享到:
评论

相关推荐

    js原型链与继承解析(初体验).docx

    JavaScript中的原型链和继承是理解JavaScript面向对象编程的关键概念。在JavaScript中,每个对象都有一个内部属性`[[Prototype]]`,通常可以通过`__proto__`或`Object.getPrototypeOf`来访问。这个属性链接了对象到...

    理解Javascript原型继承原理

    本文主要关注原型链继承,它是基于对象的`[[Prototype]]`属性和函数的`prototype`属性实现的。 1. **`prototype`**: - 每个函数对象都有一个`prototype`属性,该属性通常是一个对象,用于表示由该函数构造的对象...

    js原型链与继承解析(初体验)

    JavaScript中的原型链和继承是其面向对象编程的核心概念。它们允许对象之间共享属性和方法,实现代码的复用。在JavaScript中,每个对象都有一个内部属性`[[Prototype]]`,通常可以通过`__proto__`(非标准,但在很多...

    JavaScript — 原型链与作用域链1

    原型链是JavaScript实现对象继承的基础,它连接了一系列的对象,使得一个对象可以访问另一个对象的属性和方法。具体来说: 1. **原型对象默认指针**:每个函数都有一个`prototype`属性,这个属性指向了一个对象,这...

    浅析javascript原型继承机制

    ### 浅析JavaScript原型继承机制 #### 一、引言 JavaScript作为一种动态语言,其对象模型与传统的面向对象编程语言有所不同。在JavaScript中,并没有直接提供类的概念,而是通过原型来实现继承。本文将深入探讨...

    JavaScript对象原型链原理解析

    JavaScript对象原型链是JavaScript语言中的一个核心概念,它在实现继承和共享属性方面起到了关键作用。原型链基于原型(prototype)对象,通过一系列链接形成一个链式结构,使得一个对象可以访问到另一个对象的属性...

    javascript关于继承解析_.docx

    组合继承是JavaScript中最常用的继承模式,它结合了构造函数继承和原型链继承,但同时也存在两次调用父类构造函数的问题,导致了不必要的属性复制。为解决这个问题,我们使用寄生组合式继承: ```javascript ...

    js代码-JavaScript 原型链与继承

    虽然没有提供`main.js`的具体内容,但通常在这个文件中,可能会包含实现原型链继承的代码示例。可能的结构包括定义构造函数,设置原型,以及创建和操作对象的实例。 ```javascript // main.js 示例 function Animal...

    我所理解的this,闭包,原型链,继承及面向对象.zip

    在JavaScript编程语言中,"this"、闭包(Closure)、原型链(Prototype Chain)和继承是四个核心概念,它们构成了JavaScript面向对象编程的基础。这里,我将深入解析这些概念,并结合实际例子来帮助理解。 首先,让...

    我所理解的从原型到原型链.pdf

    ### 我所理解的从原型到原型链 在JavaScript中,理解原型(Prototype)与原型链(Prototype Chain)是至关重要的。这两个概念是语言的核心部分,对于...希望这篇解析能够帮助你更好地理解原型和原型链的概念及其应用。

    java script 继承的实现

    1. **原型链继承**:这是 JavaScript 最基本的继承方式,通过原型对象的引用实现。每个 JavaScript 对象都有一个 proto(在 ES5 中为 __proto__,在 ES6 中为 Object.getPrototypeOf())属性,指向其构造函数的 ...

    JS继承.txtJS继承.txt

    JavaScript支持多种继承机制,包括原型链继承、构造函数继承、组合继承、寄生式继承以及寄生组合继承等。接下来,我们将详细探讨这些继承方式。 ### 1. 原型链继承 原型链继承是通过将一个对象设置为另一个对象的...

    第六课 原型与原型链-011

    在JavaScript中,原型和原型链是理解对象继承和属性查找机制的关键概念。本文将深入探讨这两个概念,并通过实例解析它们的工作原理。 首先,我们要区分"显式原型"(prototype)和"隐式原型"(__proto__)。`...

    javascript关于继承解析

    寄生组合式继承是目前最理想的继承方式,它结合了组合继承(构造函数继承+原型链继承)和寄生式继承的优点,减少了原型链上重复的属性。它的基本思想是使用一个辅助函数来继承父构造函数的原型,并设置子构造函数的...

    JavaScript中的原型prototype完全解析

    JavaScript中的原型和prototype...__proto__属性和原型链的机制使得JavaScript的对象系统是基于原型继承的,这一点与传统的基于类的继承方式有所不同。了解和掌握原型和prototype对于深入掌握JavaScript编程至关重要。

    javaScript中的原型解析_.docx

    通过实例化对象并修改属性,我们可以观察到原型链的工作方式,以及如何通过`delete`、`hasOwnProperty()`等工具来操作这些属性。在实际开发中,掌握这些概念可以帮助我们更好地构建可维护和扩展的代码。

    javascript中类和继承(代码示例+prototype.js)

    `prototype.js`文件可能包含了对JavaScript原型链和继承的进一步封装和扩展。通常,这样的库可能会提供更方便的方式来创建类和实现继承,比如使用类语法糖,以及提供一些额外的功能,如方法重载、私有属性等。 例如...

    原型链污染漏洞+前后端实战案例

    在JavaScript编程中,原型链(Prototype Chain)是理解对象继承机制的关键。原型链污染漏洞是一种安全问题,它允许攻击者通过篡改或注入代码来操纵对象的原型,从而可能导致数据泄漏、逻辑错误甚至完全控制应用程序...

Global site tag (gtag.js) - Google Analytics