JavaScript 原型与继承说明

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

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

Code

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

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

Code

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();

若有疑问或不正之处，欢迎提出指正和讨论。

赞 (0)

相关推荐

  • javascript面向对象之Javascript 继承

    上几节讲了 JavaScript 面向对象之命名空间 . javascript 面向对象的JavaScript类 . JavaScript 面向对象的之私有成员和公开成员 与 Javascript 面向对象之重载,大家可以先看上面的再继续往下看. 在JavaScript中实现继承可以有多种方法,下面说两种常见的. 一,call 继承,先看代码: 先定义一个"人"类 复制代码 代码如下: //人类 Person=function(){ this.name="草泥马";

  • JavaScript中使用构造函数实现继承的代码

    复制代码 代码如下: //首先创建父类 function Person(name, age, address) { this.name = name; this.age = age; this.address = address; } //创建子类 function Student(score) { this.score = score; //可以用call方法或者是apply方法调用函数的构造函数 //调用父类的构造函数,通过call方法调用Person类的构造函数.这样就会在student中

  • JavaScript类和继承 constructor属性

    constructor属性始终指向创建当前对象的构造函数.比如下面例子:比如下面例子: 复制代码 代码如下: // 等价于 var foo = new Array(1, 56, 34, 12); var arr = [1, 56, 34, 12]; console.log(arr.constructor === Array); // true // 等价于 var foo = new Function(); var Foo = function() { }; console.log(Foo.co

  • javascript中最常用的继承模式 组合继承

    复制代码 代码如下: <script type="text/javascript"> //创建基类 function Person(name, age) { this.name = name; this.age = age; } //通过原型方式给基类添加函数(这样可以服用此函数) Person.prototype.showName = function () { alert(this.name); } //创建子类 function Student(name, age,

  • javascript原型链继承用法实例分析

    本文实例分析了javascript原型链继承的用法.分享给大家供大家参考.具体分析如下: 复制代码 代码如下: function Shape(){   this.name = 'shape';   this.toString = function(){    return this.name;   }  }    function TwoDShape(){   this.name = '2D shape';  }  function Triangle(side,height){   this.n

  • JavaScript 原型与继承说明

    function A(x) { this.x = x; } alert(A.prototype); alert(A.prototype.constructor); 根据弹出的结果,我们可以得到:原型对象是由函数的构造函数创建,它所拥有的属性能被所有对象共享,初始时原型对象指向一个Object对象,并且定义了一个constructor属性,该属性指向定义该原型对象的构造函数本身,再看如下代码. Code function A(x) { A.prototype.x = x; } var obj =

  • Javascript 原型和继承(Prototypes and Inheritance)

    Javascript 原型和继承(Prototypes and Inheritance)

    JavaScript 对象从一个原形对象(prototype object) 继承属性.所有对象都有原型:原型的所有属性看上去就像使用它作为原型的那些对象的属性一样.简单的说就是:所有对象都从他的原型继承属性. (each object inherits properties from its prototype). 对象的 prototype 通过它的 constructor function 来定义.JavaScript 里所有的 function 都有一个 prototype 属性.这个属

  • 浅谈JS的原型和继承

    参考文献 JavaScript原型与继承的秘密 __proto__ 除null和undefined,JS中的所有数据类型都有这个属性: 它表示当我们访问一个对象的某个属性时,如果该对象自身不存在该属性, 就从它的__proto__属性上继续查找,以此类推,直到找到,若找到最后还是没有找到,则结果为undefined 我们把一个对象的__proto__属性所指向的对象叫该对象的原型:我们可以修改一个对象的原型来让这个对象拥有某种属性或某个方法 // 修改一个Number类型的值的原型 const

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

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

    在传统的基于Class的语言如Java.C++中,继承的本质是扩展一个已有的Class,并生成新的Subclass. 由于这类语言严格区分类和实例,继承实际上是类型的扩展.但是,JavaScript由于采用原型继承,我们无法直接扩展一个Class,因为根本不存在Class这种类型. 但是办法还是有的.我们先回顾Student构造函数: function Student(props) { this.name = props.name || 'Unnamed'; } Student.prototyp

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

    先为大家分享JS原型继承实例,供大家参考,具体内容如下 一.JS原型继承 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS原型继承</title> </head> <body> <!--原型继承--> <script type="text/javascript"> //cl

  • 再谈javascript原型继承

    再谈javascript原型继承

    真正意义上来说Javascript并不是一门面向对象的语言,没有提供传统的继承方式,但是它提供了一种原型继承的方式,利用自身提供的原型属性来实现继承. 原型与原型链 说原型继承之前还是要先说说原型和原型链,毕竟这是实现原型继承的基础. 在Javascript中,每个函数都有一个原型属性prototype指向自身的原型,而由这个函数创建的对象也有一个__proto__属性指向这个原型,而函数的原型是一个对象,所以这个对象也会有一个__proto__指向自己的原型,这样逐层深入直到Object对象的

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

    上回说到<JavaScript 原型继承之基础机制>,这一篇将具体说说构造函数的继承. 从一个简单的示例开始,创建描述人类的 People 构造函数: 复制代码 代码如下: function People(){ this.race = '愚蠢的人类'; } 然后,创建描述黄种人的 Yellow 构造函数: 复制代码 代码如下: function Yellow(name, skin){ this.name = name; this.skin = skin; } 要使得黄种人 Yellow 能继承

  • JavaScript原型继承之基础机制分析

    这一语言功能的本质依赖于 JavaScript 特有的原型链(prototype chain)模式. 所以严格意义上说,JavaScript 是基于原型的面向对象语言.也就是说,每个实例对象都具有一个原型.对象从该原型中继承属性和方法. 1.构造函数 利用构造函数,可以简单地创建对象.构造函数内的 this 关键字指向实例对象本身: 复制代码 代码如下: function People(name){ this.name = name; } 使用 new 运算符和构造函数创建实例对象: 复制代码

  • JavaScript中的原型和继承详解(图文)

    JavaScript中的原型和继承详解(图文)

    请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans 原型车.这些车虽然是由"奥迪"或"标致"这些厂商制造的,可它们并不是你在街上或速公路上所见到的那类汽车.它们是专为参加高速耐力赛事而制造出来的. 厂家投入巨额资金,用于研发.设计.制造这些原型车,而工程师们总是努力尝试将这项工程做到极致.他们在合金.生物燃料.制动技术

随机推荐