前端开发必须知道的JS（一）原型和继承

2024-04-27 14:38:08

字体：大中小

来源：转载

供稿：网友

原型和闭包是Js语言的难点，此文主要讲原型及原型实现的继承，在（二）中会讲下闭包，希望对大家有所帮助。若有疑问或不正之处，欢迎提出指正和讨论。

一、原型与构造函数

Js所有的函数都有一个PRototype属性，这个属性引用了一个对象，即原型对象，也简称原型。这个函数包括构造函数和普通函数，我们讲的更多是构造函数的原型，但是也不能否定普通函数也有原型。譬如普通函数：

以下为引用的内容：

function F(){
　　;
}
alert(F.prototype instanceof Object) //true

构造函数，也即构造对象。首先了解下通过构造函数实例化对象的过程。

以下为引用的内容：

function A(x){
　　this.x=x;
}
var obj=new A(1);

实例化obj对象有三步：

1. 创建obj对象：obj=new Object();

2. 将obj的内部__proto__指向构造他的函数A的prototype，同时，obj.constructor===A.prototype.constructor(这个是永远成立的，即使A.prototype不再指向原来的A原型，也就是说：类的实例对象的constructor属性永远指向"构造函数"的prototype.constructor)，从而使得obj.constructor.prototype指向A.prototype（obj.constructor.prototype===A.prototype，当A.prototype改变时则不成立，下文有遇到）。obj.constructor.prototype与的内部_proto_是两码事，实例化对象时用的是_proto_，obj是没有prototype属性的，但是有内部的__proto__，通过__proto__来取得原型链上的原型属性和原型方法，Firefox公开了__proto__，可以在FireFox中alert（obj.__proto__）；

3. 将obj作为this去调用构造函数A，从而设置成员（即对象属性和对象方法）并初始化。

当这3步完成，这个obj对象就与构造函数A再无联系，这个时候即使构造函数A再加任何成员，都不再影响已经实例化的obj对象了。此时，obj对象具有了x属性，同时具有了构造函数A的原型对象的所有成员，当然，此时该原型对象是没有成员的。

原型对象初始是空的，也就是没有一个成员（即原型属性和原型方法）。可以通过如下方法验证原型对象具有多少成员。

以下为引用的内容：

var num=0;
for(o in A.prototype) {
　　alert(o);//alert出原型属性名字
　　num++;
}
alert("member: " + num);//alert出原型所有成员个数。

但是，一旦定义了原型属性或原型方法，则所有通过该构造函数实例化出来的所有对象，都继承了这些原型属性和原型方法，这是通过内部的_proto_链来实现的。

譬如

A.prototype.say=function(){alert("Hi")};

那所有的A的对象都具有了say方法，这个原型对象的say方法是唯一的副本给大家共享的，而不是每一个对象都有关于say方法的一个副本。

二. 原型与继承

首先，看个简单的继承实现。

以下为引用的内容：