`

JavaScript 原型 继承

 
阅读更多

在上一遍我们简单的介绍了怎么样使用JavaScript进行构造函数的书写,现在来认识下JavaScript的构造函数其原理,主要是关注与原型的概念,首先看如下代码。

function A(x) { this.x = x; } alert(A.prototype); alert(A.prototype.constructor);

根据弹出的结果,我们可以得到:原型对象是由函数的构造函数创建,它所拥有的属性能被所有对象共享,初始时原型对象指向一个Object对象,并且定义了一个constructor属性,该属性指向定义该原型对象的构造函数本身,再看如下代码。


function A(x) { A.prototype.x = x; } var obj = new A(10); alert(obj.x); alert(obj.constructor);

因为原型对象的所有属性能被构造函数创建对象共享,所以创建的对象可以访问这里的constructor属性,同时obj对应的就是原型对象(prototype)所创建出来的一个实例,那么重写constructor属性会出现什么样的结果呢?


function A(x) { A.prototype.x = x; } var objA = new A(10); objA.constructor =
function(x){ alert("重写obj的constructor属性");this.x = 20 }; objA.constructor(); alert(objA.x); var objB = new A(10); alert(objB.x);

根据结果我们可以看到,首先弹出的是“重写obj的constructor属性”,然后弹出20,在弹出10,可见,我们在书写重写objA这个对象的constructor之后,objB并没有被改变,因此无论在一个对象加入或修改多少属性这都不影响其原型对象中属性的本来面目,其实很容易理解js为什么这样做,因为一个对象的行为不能影响到其他对象,否则将会造成混乱。

在这里,我们可以总结一下,上面代码的规则:

  1.当我们调用某个对象的时候,首先检查该对象本身的自己定义的属性,如果存在则调用。

  2.当自己本身的属性不存在的时候,则调用其构造函数所定义的原型对象的引用。

那么根据这个规则,就形成了JavaScript中的一个原型链,我们就可以根据这个规则来定义继承关系。


function A(x) { A.prototype.x = x; } function B(x,y) { B.prototype.y = y; A.call(this,x); }

这段代码显示了两个函数,B函数继承与A函数,A.call(this.x)表示,将B的对象this传递到A函数中进行执行。然后,我们同样需要由B函数构造出来的对象需要包含A函数的所有特性,因此需要加上这么一句话。

B.prototype = new A(); alert(B.prototype.constructor);

先我们指定B的原型为A,因此,B函数继承了A函数的特性,根据弹出的结果,我们可以看到,其constructor指向的是A函数,那么我们的B函数的特性是不是丢失了呢?因此,我们需要在加上一句话,最后给出继承的整合代码。


function A(x) { A.prototype.x = x; A.prototype.ShowA = function(){ alert("A的Show方法!"); }; } function B(x,y) { B.prototype.y = y; A.call(this,x); B.prototype.ShowB = function(){ alert("B的Show方法!"); }; } B.prototype = new A(); B.prototype.constructor = B; var obj = new B(10,5); alert(obj.x); alert(obj.y); obj.ShowA(); obj.ShowB();

分享到:
评论

相关推荐

    理解Javascript原型继承原理

    ### 理解Javascript原型继承原理 #### 一、引言 在JavaScript中,原型继承是一种非常核心且独特的机制,它使得对象能够继承其他对象的属性和方法。本文旨在深入探讨这一机制,并通过具体的示例代码帮助读者更好地...

    javascript原型继承代码案例

    javascript原型继承,prototype的使用,可以像java一样继承

    浅析javascript原型继承机制

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

    javascript原型继承工作原理和实例详解_.docx

    ### JavaScript原型继承工作原理及实例详解 #### 一、引言 JavaScript作为一种广泛使用的脚本语言,在Web开发中扮演着重要角色。其独特的面向对象机制是通过原型继承来实现的,这种机制使得JavaScript能够灵活地...

    再谈javascript原型继承

    Javascript原型继承是一个被说烂掉了的话题,但是自己对于这个问题一直没有彻底理解,今天花了点时间又看了一遍《Javascript模式》中关于原型实现继承的几种方法,下面来一一说明下,在最后我根据自己的理解提出了一...

    Javascript原型继承

    JavaScript原型继承是面向对象编程在JavaScript中的实现方式之一,它基于原型(Prototype)和对象的特性,使得一个对象可以继承另一个对象的属性和方法。在JavaScript中,每个对象都有一个特殊的内部属性`[...

    javascript原型继承机制参考.pdf

    javascript原型继承机制参考.pdf

    javascript原型继承机制借鉴.pdf

    javascript原型继承机制借鉴.pdf

    javascript原型继承机制归类.pdf

    javascript原型继承机制归类.pdf

    javascript原型继承工作原理和实例详解.doc

    javascript原型继承工作原理和实例详解.doc

    浅析Javascript原型继承 推荐第1/2页

    在深入探讨JavaScript的原型继承之前,首先要明确的是JavaScript中并没有类似其他编程语言中的类继承的概念。虽然有传言JavaScript 2.0将加入类继承机制,但考虑到要让所有浏览器支持新特性可能需要很长时间,因此...

    javascript原型继承机制[整理].pdf

    javascript原型继承机制[整理].pdf

    深入探索JavaScript的原型继承:机制、实现与最佳实践

    本文将深入探讨JavaScript原型继承的工作原理、实现方式以及在现代Web开发中的应用。 JavaScript的原型继承是一种强大且灵活的机制,它允许对象之间共享功能和行为。通过深入理解原型继承的工作原理和实现方式,...

    JavaScript原型继承和原型链原理详解

    这篇文章主要介绍了JavaScript原型继承和原型链原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在讨论原型继承之前,先回顾一下关于创建自定义类型的...

    浅析JavaScript原型继承的陷阱

    总之,理解JavaScript原型继承的陷阱对于编写可维护和高效的代码至关重要。在设计对象模型时,应谨慎处理引用类型的属性,以防止不必要的共享状态,同时利用原型链来优化方法的继承。通过正确地划分数据属性和方法,...

    JavaScript 原型继承之构造函数继承

    上回说到《JavaScript 原型继承之基础机制》,这一篇将具体说说构造函数的继承。 从一个简单的示例开始,创建描述人类的 People 构造函数: 代码如下: function People(){ this.race = ‘愚蠢的人类’; } 然后,创建...

    浅析JavaScript实现基于原型对象的“继承”.pdf

    本文将对JavaScript原型继承的方式进行介绍,并结合实例进行分析。 基于类的继承 面向对象编程语言是基于类的语言,以Java为例,Java是基于类的语言。在基于类的语言中,对象是类的实例,并且一个类可以从另一个类...

    javascript原型继承工作原理和实例详解

    JavaScript原型继承的工作原理可以通过`__proto__`属性来理解。当尝试访问对象的属性时,如`p.print()`,JavaScript首先检查`p`对象自身是否有`print`属性,如果没有,则查找`p.__proto__`(即`Point`对象),如果`...

    JavaScript原型继承_动力节点Java学院整理

    本文将深入探讨JavaScript原型继承的概念、实现方式及其应用场景。 首先,理解原型和原型链的概念至关重要。每个JavaScript对象都有一个名为`__proto__`的内部属性,它指向该对象的原型,即创建该对象的构造函数的`...

Global site tag (gtag.js) - Google Analytics