javascript面向对象技术基础(四)

类、构造函数、原型

先来说明一点:在上面的内容中提到,每一个函数都包含了一个prototype属性,这个属性指向了一个prototype对象(Every
function has a prototype property that refers to a predefined prototype object  --section8.6.2).注意不要
搞混了.

构造函数:
new操作符用来生成一个新的对象.new后面必须要跟上一个函数,也就是我们常说的构造函数.构造函数的工作原理又是怎样的呢?
先看一个例子:

function Person(name,sex) {
    this.name = name;
    this.sex = sex;
}
var per = new Person("sdcyst","male");
alert("name:"+per.name+"_sex:"+per.sex); //name:sdcyst_sex:male

 

下面说明一下这个工作的步骤:
开始创建了一个函数(不是方法,只是一个普通的函数),注意用到了this关键字.以前我们提到过this关键字表示调用该方法的对象,也就
是说通过对象调用"方法"的时候,this关键字会指向该对象(不使用对象直接调用该函数则this指向整个的script域,或者函数所在的域,在此
我们不做详细的讨论).当我们使用new操作符时,javascript会先创建一个空的对象,然后这个对象被new后面的方法(函数)的this关键字引用!然后在方法中
通过操作this,就给这个新创建的对象相应的赋予了属性.最后返回这个经过处理的对象.这样上面的例子就很清楚:先创建一个空对象,然后
调用Person方法对其进行赋值,最后返回该对象,我们就得到了一个per对象.

prototype(原型)--在这里会反复提到"原型对象"和"原型属性",注意区分这两个概念.
在javascript中,每个对象都有一个prototype属性,这个属性指向了一个prototype对象.
上面我们提到了用new来创建一个对象的过程,事实上在这个过程中,当创建了空对象后,new会接着操作刚生成的这个对象的prototype属性.
每个方法都有一个prototype属性(因为方法本身也是对象),new操作符生成的新对象的prototype属性值和构造方法的prototype属性值是一致的.构造方
法的prototype属性指向了一个prototype对象,这个prototype对象初始只有一个属性constructor,而这个constructor属性又指向了prototype属性所在的方
法(In the previous section, I showed that the new operator creates a new, empty object and then invokes a constructor
function as a method of that object. This is not the complete story, however. After creating the empty object,
new sets the prototype of that object. The prototype of an object is the value of the prototype property of its
constructor function. All functions have a prototype property that is automatically created and initialized when
the function is defined. The initial value of the prototype property is an object with a single property. This property
is named constructor and refers back to the constructor function with which the prototype is associated. this is why every
object has a constructor property. Any properties you add to this prototype object will appear to be properties of
objects initialized by the constructor. -----section9.2)
有点晕,看下面的图:

 

这样,当用构造函数创建一个新的对象时,它会获取构造函数的prototype属性所指向的prototype对象的所有属性.对构造函数对应的prototype对象
所做的任何操作都会反应到它所生成的对象身上,所有的这些对象共享构造函数对应的prototype对象的属性(包括方法).
看个具体的例子吧:

function Person(name,sex) {  //构造函数
    this.name = name;
    this.sex = sex;
}
Person.prototype.age = 12;   //为prototype属性对应的prototype对象的属性赋值
Person.prototype.print = function() { //添加方法
    alert(this.name+"_"+this.sex+"_"+this.age);
};

var p1 = new Person("name1","male");
var p2 = new Person("name2","male");
p1.print();  //name1_male_12
p2.print();  //name2_male_12

Person.prototype.age = 18;  //改变prototype对象的属性值,注意是操作构造函数的prototype属性
p1.print();  //name1_male_18
p2.print();  //name2_male_18

 

到目前为止,我们已经模拟出了简单的类的实现,我们有了构造函数,有了类属性,有了类方法,可以创建"实例".
在下面的文章中,我们就用"类"这个名字来代替构造方法,但是,这仅仅是模拟,并不是真正的面向对象的"类".
在下一步的介绍之前,我们先来看看改变对象的prototype属性和设置prototype属性的注意事项:
给出一种不是很恰当的解释,或许有助于我们理解:当我们new了一个对象之后,这个对象就会获得构造函数的prototype属
性(包括函数和变量),可以认为是构造函数(类)继承了它的prototype属性对应的prototype对象的函数和变量,也就是说,
prototype对象模拟了一个超类的效果.听着比较拗口,我们直接看个实例吧:

function Person(name,sex) {  //Person类的构造函数
    this.name = name;
    this.sex = sex;
}
Person.prototype.age = 12;   //为Person类的prototype属性对应的prototype对象的属性赋值,
                             //相当于为Person类的父类添加属性
Person.prototype.print = function() { //为Person类的父类添加方法
    alert(this.name+"_"+this.sex+"_"+this.age);
};

var p1 = new Person("name1","male"); //p1的age属性继承子Person类的父类(即prototype对象)
var p2 = new Person("name2","male");

p1.print();  //name1_male_12
p2.print();  //name2_male_12

p1.age = 34; //改变p1实例的age属性
p1.print();  //name1_male_34
p2.print();  //name2_male_12

Person.prototype.age = 22;  //改变Person类的超类的age属性
p1.print();  //name1_male_34(p1的age属性并没有随着prototype属性的改变而改变)
p2.print();  //name2_male_22(p2的age属性发生了改变)

p1.print = function() {  //改变p1对象的print方法
    alert("i am p1");
}

p1.print();  //i am p1(p1的方法发生了改变)
p2.print();  //name2_male_22(p2的方法并没有改变)

Person.prototype.print = function() { //改变Person超类的print方法
    alert("new print method!");
}

p1.print();  //i am p1(p1的print方法仍旧是自己的方法)
p2.print();  //new print method!(p2的print方法随着超类方法的改变而改变)

 

看过一篇文章介绍说javascript中对象的prototype属性相当于java中的static变量,可以被这个类下的所有对象
共用.而上面的例子似乎表明实际情况并不是这样:
在JS中,当我们用new操作符创建了一个类的实例对象后,它的方法和属性确实继承了类的prototype属性,类的prototype属性
中定义的方法和属性,确实可以被这些实例对象直接引用.但是,当我们对这些实例对象的属性和方法重新赋值或定义后,那么
实例对象的属性或方法就不再指向类的prototype属性中定义的属性和方法,此时,即使再对类的prototype属性中相应的方法或
属性做修改,也不会反应在实例对象身上.这就解释了上面的例子:
一开始,用new操作符生成了两个对象p1,p2,他们的age属性和print方法都来自(继承于)Person类的prototype属性.然后,我们
修改了p1的age属性,后面对Person类的prototype属性中的age重新赋值(Person.prototype.age = 22),p1的age属性并不会
随之改变,但是p2的age属性却随之发生了变化,因为p2的age属性还是引自Person类的prototype属性.同样的情况在后面的
print方法中也体现了出来.

通过上面的介绍,我们知道prototype属性在javascript中模拟了父类(超类)的角色,在js中体现面向对象的思想,prototype属性
是非常关键的.

评论

25 楼 有女未长成 2012-05-23  

正在学习这方面的知识，非常感谢博主及各位的讨论评论

24 楼 有女未长成 2012-05-23  

司徒正美 写道

引用

看过一篇文章介绍说javascript中对象的prototype属性相当于java中的static变量,可以被这个类下的所有对象
共用.而上面的例子似乎表明实际情况并不是这样:

结论错了吧，学过java的都知道，当子类拥有与父类相同的属性（或方法）时，父类的属性（或方法）就会被隐藏！看下面一段代码！


function Person(name,sex) {  //Person类的构造函数 
    this.name = name; 
    this.sex = sex; 
} 
Person.prototype.age = 12;  //为Person类的prototype属性对应的prototype对象的属性赋值, 
                             //相当于为Person类的父类添加属性 
Person.prototype.print = function() { //为Person类的父类添加方法
    alert(this.name+"_"+this.sex+"_"+this.age); 
}; 
 
var p1 = new Person("name1","male"); //p1的age属性继承子Person类的父类(即prototype对象) 
var p2 = new Person("name2","male"); 
 
p1.print();  //name1_male_12 
p2.print();  //name2_male_12 
 
p1.age = 34; //这时子类拥有与父类同名的属性了，父类的相应属性就被临时隐藏起来！ 
p1.print();  //name1_male_34 
p2.print();  //name2_male_12 
delete p1.age //删除子类与父类同名的属性，从父类那里继承过来的属性就被暴露出来了！
p1.print();  //name1_male_12！！！！！！！
p2.print();  //name2_male_12 

期望司徒能多写些这样简单易懂的javascript方面的博客

23 楼 ylsuccess 2009-05-21  

学习学习学习

22 楼 司徒正美 2009-05-09  

引用

看过一篇文章介绍说javascript中对象的prototype属性相当于java中的static变量,可以被这个类下的所有对象
共用.而上面的例子似乎表明实际情况并不是这样:

结论错了吧，学过java的都知道，当子类拥有与父类相同的属性（或方法）时，父类的属性（或方法）就会被隐藏！看下面一段代码！


function Person(name,sex) {  //Person类的构造函数 
    this.name = name; 
    this.sex = sex; 
} 
Person.prototype.age = 12;  //为Person类的prototype属性对应的prototype对象的属性赋值, 
                             //相当于为Person类的父类添加属性 
Person.prototype.print = function() { //为Person类的父类添加方法
    alert(this.name+"_"+this.sex+"_"+this.age); 
}; 
 
var p1 = new Person("name1","male"); //p1的age属性继承子Person类的父类(即prototype对象) 
var p2 = new Person("name2","male"); 
 
p1.print();  //name1_male_12 
p2.print();  //name2_male_12 
 
p1.age = 34; //这时子类拥有与父类同名的属性了，父类的相应属性就被临时隐藏起来！ 
p1.print();  //name1_male_34 
p2.print();  //name2_male_12 
delete p1.age //删除子类与父类同名的属性，从父类那里继承过来的属性就被暴露出来了！
p1.print();  //name1_male_12！！！！！！！
p2.print();  //name2_male_12 

21 楼 司徒正美 2009-05-09  

引用

var obj = {}; 
alert(obj.prototype);    // undefinded 

javascript的类是用函数来模拟的！应该这样才对！
var obj = new Function(); 
alert(obj.prototype);    // undefinded 

20 楼 yjcoffee 2009-04-23  

问一个问题，使用var Person = function(name) {...}可以创建匿名函数，但是如果我想创建非匿名函数能不能这样写，看看下面的代码：

var p1 = function Person(name) {  // 这里我不想创建匿名函数
  this.name = name;
}
var p2 = Person;
alert(p1 == p2);      // --> false
alert(p1 == Person);  // --> false
不明白为什么？继续：

Case1：
Person.prototype.getName = function() {...};
new p2("John").getName();  // --> John
new p1("John").getName();  // getName is not a function!

Case2：
p1.prototype.getName = function() {...};
new p1("Anna").getName();  // --> Anna
new Person("Anna").getName();  // getName is not a function!

My Conclusion：
感觉var p1 = function Person(name) {...}分别创建了两个函数对象，等价于
var p1 = function(name) {...};
function Person(name) {...};

因此p1 == Person会是false
但是：
alert(new p1("John").constructor);     // --> function Person(name) {...}
alert(new Person("Anna").constructor); // --> function Person(name) {...}
这里又是一样的，因此p1不是一个匿名函数？

——不知道我这里说清楚了没有，这些代码都是在FF上试过的

19 楼 jesse_zzj 2009-02-12  

hanjs 写道

对应lz的最后一个例子，很精彩，看完明白多了。

我个人感觉，通过对象Person.prototype.age来修改，是改了所有引用这个属性的值。而通过某个实例来改，如p1.age = 34 仅仅是覆盖了父类的方法，使之不依赖于父类了，这个引用的关系不存在了，所此p2的age属性没有被更改。

这样说来，和java的多态和继承就很像了，这样比喻起来更通俗些。谢谢

18 楼 fornever 2009-01-04  

hanjs 写道

对应lz的最后一个例子，很精彩，看完明白多了。

我个人感觉，通过对象Person.prototype.age来修改，是改了所有引用这个属性的值。而通过某个实例来改，如p1.age = 34 仅仅是覆盖了父类的方法，使之不依赖于父类了，这个引用的关系不存在了，所此p2的age属性没有被更改。

我想这个覆盖和子作用域覆盖掉父作用域的同名变量的值的道理是一个的，或差不多，可能我说的不太规范，大概就是这个意思。类似p1.age是给p1对象赋了一个属性age，“属于本身的东西总比别人的东西要近”，哈，我通俗点就这样理解，因此p1.age的优先级更高了。。

17 楼 hanjs 2008-12-30  

对应lz的最后一个例子，很精彩，看完明白多了。

我个人感觉，通过对象Person.prototype.age来修改，是改了所有引用这个属性的值。而通过某个实例来改，如p1.age = 34 仅仅是覆盖了父类的方法，使之不依赖于父类了，这个引用的关系不存在了，所此p2的age属性没有被更改。

16 楼 srdrm 2008-12-30  

是的 prototype 应该是仅有函数拥有的. 这个概念搞清楚就行了.

prototype中的属性跟对象实例的属性关系应该是个copy-on-write的东西. 除非修改了,要不就只会使用它的prototype属性.

温故而知新, 第二遍看,想详细研究prototype,又收获不少.

15 楼 lusee 2008-12-29  

学习，支持

14 楼 56071925 2008-12-19  

谢谢，我理解了，prototype就是js多态的根源

13 楼 ttleezhaoyu 2008-12-17  

基礎學習很重要，不過的文章，置頂！！

12 楼 zhuxinyu 2008-12-16  

sdcyst 写道

zhuxinyu 写道
希望能提供电子书下载，很好支持自己从itpub论坛搜搜吧，不敢公开的给你提供.

我是说你可以用 javaeye 的博客导出功能将你的博客导出，挺喜欢写的好

11 楼 sdcyst 2008-12-16  

zhuxinyu 写道

希望能提供电子书下载，很好支持

自己从itpub论坛搜搜吧，不敢公开的给你提供.

10 楼 zhuxinyu 2008-12-16  

希望能提供电子书下载，很好支持

9 楼 FengShen_Xia 2008-12-12  

不错，学习了

8 楼 sdcyst 2008-12-11  

walkman 写道

 
还有一句至关重要的你没有引用，见《JavaScript: The Definitive Guide, 5th Edition》之 9.2. Prototypes and Inheritance :
 
It turns out that every JavaScript object includes an internal reference to another object, known as its prototype object. Any properties of the prototype appear to be properties of an object for which it is the prototype. Another way of saying this is that a JavaScript object inherits properties from its prototype.
 注意是 internal reference，这个引用可能仅仅是种假想，也可能是“相当于”，但不变的事实是“除了 function 其他对象都没有 prototype 属性”。我说的这个“属性”是可以通过 . 或者 [] 操作符访问到的，而不是意识形态上的东西
 

正如你所说,确实是只有Function才有prototype属性.但是在javascript中,所有的构造函数都属于Function,而我们模拟的"类"本身就是构造函数.

用new操作函数生成对象后,对象获得了构造函数的属性,同时由于构造函数又继承了prototype属性对应的prototype对象的属性,所以每个对象又获取了构造函数的prototype属性.写得可能有问题,当时应该把Object(对象--函数)和object(对象实例--用new操作符生成的)分开或许更容易理解一些.

7 楼 walkman 2008-12-10  

<p> </p>
<div class='quote_div'>谢谢您提出的问题,原书中的句子在上面的文章中已经引到了. </div>
<p><br/>还有一句至关重要的你没有引用，见《JavaScript: The Definitive Guide, 5th Edition》之 9.2. Prototypes and Inheritance :</p>
<p> </p>
<div class='quote_div'>It turns out that every JavaScript object includes an internal reference to another object, known as its prototype object. Any properties of the prototype appear to be properties of an object for which it is the prototype. Another way of saying this is that a JavaScript object inherits properties from its prototype. <br/></div>
<p> <br/><br/>注意是 internal reference，这个引用可能仅仅是种假想，也可能是“相当于”，但不变的事实是“除了 function 其他对象都没有 prototype 属性”。我说的这个“属性”是可以通过 . 或者 [] 操作符访问到的，而不是意识形态上的东西</p>
<p> </p>

6 楼 seven_cuit 2008-12-10  

我还能说什么呢，无比感激！！！！