js面向对象

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > js面向对象 > 构造函数 动态原型

javascript 混合的构造函数和原型方式，动态原型方式

作者：

JS编程中最常用两种对象类定义的方式。不管是利用下面2种方式的那一种，都可以达到相同的效果！
我们日常JS编程中最常用的方式 有下面2种：
1.混合的构造函数和原型方式 （重点）
复制代码 代码如下:

function car (sColor,iNumbers){ // 构造函数只用来定义对象的所有非函数属性，即对象的属性
this.color = sColor;
this.numbers = iNumbers;
this.dirvers = new Array ("Jone","Leon");
}
car.prototype.showColor = function (){ // 原型方式只用来定义对象的所有函数属性，即对象的方法
alert(this.color);
}
var car1 = new car("red");
var car2 = new car("yellow");
car1.showColor)();
car2.showColor)();

总结：当你创建（new）一个新的对象实例car1和car2的时候，car1和car2都继承函数对象car的所有的非函数属性；此时在car函数外面给car函数对象的原型里面生成一个showColor方法,此时car1和car2都会引用car的原型里面的showColor方式，如果把原型方法放进car函数体里面，那么此时car1和car2不是引用的关系，而是每执行一次函数，就构建一次showColor函数，如果有100个car，那么就要重复构造100个函数。所以要把非函数属性和函数属性分开来写。
2.动态原型方式 （重点）
复制代码 代码如下:

function car (sColor,iNumbers){ // 构造函数只用来定义对象的所有非函数属性，即对象的属性
this.color = sColor;
this.numbers = iNumbers;
this.dirvers = new Array ("Jone","Leon");
if(typeof car._initialized=="undefined"){ //此时此刻，这里的car._initialized成立，继续执行下面的函数
car.prototype.showColor = function (){
alert(this.color);
}
}
car._initialized = true; //
执行到这里就停止再也不在执行第二次，因为此时此刻，car._initialized只是函数的属性，而不是函数对象的原型属性，如果是原型属性的话，new一个函数对象的实例，就会改变函数里面原型对象的属性，那么就会重复构造showColor这个函数。正因为是这个原因，当car._initialized等于undefined的时候，执行一次showColor，最后得到的car._initialized=true，这个时候改变的是函数的属性，而不是函数原型的属性，所以外部new一个对象实例根本无法改变函数的属性，所有红色部分的代码就是为了做一件事情：只执行红色代码之间的方法，并且每种方法只有一次，不会重复执行！
}
var car1 = new car ("red");
var car2 = new car ("yellow");
car1.showColor();
car2.showColor();

总结：不管是利用上面2种方式的那一种，都可以达到相同的效果！
方法1：混合的构造函数和原型方式，相当于把非函数属性和一般属性分开来写，这样new 新对象的时候，不会重复构造新函数，此时引用的知识函数对象的原型方法和函数对象的属性。但是，代码看起来没有封装起来而且，不影响任何东西。
方法2：完全利用JAVA的编程代码风格来实现JS的编程。这样的好处是让整个函数看起来像是把属性和方法都“封装”在一个函数体内，看起来更像一个“类”。（温故知新：JS中其实没有类，你要说有类，就可以把它看做一个function类），缺点是在于利用if()语句看起来不是很友好而已。
您可能感兴趣的文章:
阅读全文