JavaScript原型与构造函数详解：prototype、constructor及__proto__机制

prototype与constructor基础概念

通过prototype属性，可以为对象定义一组基础功能。新创建的实例会自动继承赋予该对象原型的操作。

所有JavaScript内置对象都拥有只读的prototype属性。虽然可以向这些内置对象的原型中添加新功能，但不能将它们重新赋给不同的原型。

然而，用户自定义的对象可以被赋予新的原型。

constructor属性用于表示创建该对象的函数。

constructor属性是所有拥有prototype属性的对象的成员，它涵盖了除Global和Math对象之外的所有JavaScript内置对象。

constructor属性保存了对构造特定对象实例的函数的引用。

利用prototype添加对象属性的方法

A 利用prototype添加对象的属性 [方式一]

示例：

 
<script type="text/javascript">
//方式一
var myObj = function(){
this.study = "JavaScript";
} 
myObj.prototype.hobby = function()
{ 
this.hobby = "See girl";
} 
var newObj = new myObj();
for ( var attr in newObj )
{ 
document.write( attr +"<br/>" );
} 
</script>

B 利用prototype添加对象的属性 [方式二]

示例：

 
<script type="text/javascript">
//方式二
var superObj = { name:"xugang" };
var subObj = { age:20 };
function extend(superObj,subObj){
//获得父对象的原型对象
subObj.getSuper = superObj.prototype;
//将父对象的属性给子对象
for(var i in superObj){
subObj[i] = superObj[i];
} 
} 
extend(superObj,subObj);
for ( var s in subObj )
{ 
document.write( s +"<br/>" ); //遍历子对象的属性
} 
</script>

利用prototype实现原型继承

C 利用prototype继承父类的原型属性

示例：

 
<script>
function Person(_name){
this.name = _name;
} 
//创建对象(用于更改 prototype 原型对象)
function addSex(_sex){
this.sex = _sex;
} 
//更改原型对象
Person.prototype = new addSex('男');
var p = new Person('xugang');
alert("p 的原型为：" + p.constructor);
//打印所有属性
for(var i in p){
//alert(p[i]);
} 
// ================= 继承 =================
//创建子对象 Student
function Student(_study){
this.study = _study;
} 
// 通过 prototype 让 Student 继承 Person
Student.prototype = new Person('刘德华');
var stu1 = new Student('JS');
alert("stu1 的原型为：" + stu1.constructor);
for(var i in stu1){
alert(stu1[i]);
} 
</script>

由于Student对象的原型被更改为Person对象，而Person对象的原型又被更改为addSex，因此Student对象最终指向addSex的原型。

注意：一个对象的原型是在new对象的那一刻确定的，如果在new对象之后更改原型，则对已存在的实例无效！

设置对象的原型与构造函数

D 如何设置对象的原型对象和构造函数

示例：

 
<script type="text/javascript">
function B(){
this.name = "刘德华";
return "B方法";
} 
function C(){
this.age = 42;
return "C方法";
} 
B.prototype = new C();
var b = new B();
b.constructor = B; //重写b的构造方法为B本身
document.write("b 的构造方法：");
document.write(b.constructor() + "<br/>");
document.write("b 的原型对象的构造方法：");
document.write(b.constructor.prototype.constructor() + "<br/>");
for ( var m in b )
{ 
document.write("属性：" + m );
document.write(" 值：" + b[m] +"<br/>");
} 
</script>

结果如下：

b 的构造方法：B方法

b 的原型对象的构造方法：C方法

属性：age 值：42

属性：name 值：刘德华

__proto__变量与对象创建过程

E 对象中用来保存原型的 __proto__ 变量

示例：

 
<script type="text/javascript">
function myObject(){}
var my = new myObject();
//任何对象都会有一个隐藏的 __proto__ 变量用来保存原型
document.write(my.__proto__ + "<br/>");
//在 Internet Explorer 下显示为：undefined
//在 Mozilla Firefox 下显示为：[object Object]
function Person(){
this.name = "刘德华";
return "Person 方法";
} 
/* 
定义方法后，在内存中相当于：
Person.prototype = { constructor:Person }
*/ 
//改变 Person 对象的原型对象
function Super_Person(){
this.hobby = "唱歌";
return "Super_Person 方法";
} 
Person.prototype = new Super_Person();
var newObj = new Person();
/* 使用 new 创建对象过程：
var o = {};
Person.prototype.constructor.call(o);
o = {__proto__:Person.prototype,name = "刘德华"};
return o;
*/ 
document.write(newObj.constructor.prototype.constructor() + "<br/>");
//打印newObj原型对象(在 IE 下无效！)
document.write(newObj.__proto__.constructor() + "<br/>");
</script>

在 Firefox 中的结果如下：

[object Object]

Super_Person 方法

Super_Person 方法