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

150 阅读 0 评论 99 点赞

我是靠谱客的博主知性棒棒糖，最近开发中收集的这篇文章主要介绍javascript 混合的构造函数和原型方式，动态原型方式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

我们日常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()语句看起来不是很友好而已。