深入了解js面向对象中的prototype
日期：2014-05-16 浏览次数：20493 次
一、基本使用方法
prototype属性可算是JavaScript与其他面向对象语言的一大不同之处。prototype就是“一个给类的对象添加方法的方法”，使用prototype属性，可以给类动态地添加方法，以便在JavaScript中实现“继承”的效果。
具体来说，prototype 是在 IE 4 及其以后版本引入的一个针对于某一类的对象的方法，当你用prototype编写一个类后，如果new一个新的对象，浏览器会自动把prototype中的内容替你附加在对象上。这样，通过利用prototype就可以在JavaScript中实现成员函数的定义，甚至是“继承”的效果。
对于javascript本身而言是基于对象的，任何元素都可以看成对象。然而类型和对象是不同的，而我们所讲的prototype属性即是基于类型的一种属性。对于prototype的基本使用就如对象的创建及属性赋值一样的简单。直接通过赋值操作即可完成属性的创建。如：
var objectRef = new Object(); // 创建一个最基本的js对象
一个名为property的属性即可如下进行创建：
objectRef.property = 6; objectRef["property"] = 6;
对于prototype的赋值也是类似，如下所示：
//首先创建一个基本的AClass类型
var AClass = function() {
this.property = 5;
};
//可以通过prototype属性来为该类型新增属性或方法
AClass.prototype.Method = function() {
alert(5);
}
所有对象本身都可以有prototype属性，它本身也是对象。如此循环下去就形成一个prototype链，这个链当遇到链中的prototype为null时即中止。（Object的默认prototype是null）。
如上代码var objectRef = new Object()，这个对象的prototyp是null, 所以objectRef的prototype链只包含一个对象Object.prototype。
分析如下的代码结构，可以看出类型MyClass2本身并没有定义testNumber，但通过prototype属性将MyClass1的所有定义都继承下来了，而且还继承了Object中的toString方法。因此该prototype的链包含3个。
<script>
var MyClass1 =function(formalParameter) {
this.testNumber =formalParameter;
};
var MyClass2 = function(formalParameter){
this.testString = formalParameter;
};
MyClass2.prototype = newMyClass1(9);
var myObject2 = newMyClass2("Hello World!");
alert(myObject2.testString);//Hello World!
alert(myObject2.testNumber); //9
alert(myObject2.toString); //function toString() {}
</script>
二、JS中的面向对象
JS中最简单的对象即为内嵌型的Object数据类型，如下所示，我们可以新建一个新的对象，并为其添加几个属性。
var obj = new Object(); obj.x = 1; obj.y = 2;
可以用如下的图示来表示该对象。该对象中有两上属性，同时还包含一个隐含的prototype对象。
|
Obj |
|
|
x |
1 |
|
y |
2 |
|
Object.prototype |
|
|
constructor |
Object |
当然我们也可以构造如下带有构造函数的类，并生成其对象。
var AClass = function() {
this.x = 1;
this.y = 2;
}
var obj = new AClass();
此时，该对象的内部结构即如下图所示。其中包含了一个构造函数。
|
obj |
|
|
x |
1 |
|
y |
2 |
|
AClass.prototype |
|
|
constructor |
AClass<
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
|
