zoukankan      html  css  js  c++  java
  • 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()语句看起来不是很友好而已。

  • 相关阅读:
    Go语言之Go 语言函数
    Go语言之Go 语言循环语句
    Go语言之Go 语言条件语句
    Go语言之Go 语言运算符
    Go语言之GO 语言注释
    Go语言之Go 语言类型别名
    7.19 PDO(php data object-php数据对象)数据库抽象层
    7.15 原生js写ajax
    7.15 文件打开后点击打开下级文件
    6.28 js和php数组去重
  • 原文地址:https://www.cnblogs.com/y5042/p/2140728.html
Copyright © 2011-2022 走看看