JS面向對象的幾種寫法

JS 中，面向對象有幾種寫法。概括下，大概有下面這幾種：工廠模式，構造函數模式，原型模式，構造函數與原型模式的混合使用，原型鏈繼承，借用構造函數繼承。

    1、工廠模式

 function person (name,age,jpb){
    var o={};//定義o這個對象
    o.name=name;
    o.age=age;
    o.job=job;
    o.sayName=function(){
       console.log(this.name);
          }  
      return o;

}


  var demo=person('tj',22,'fe');

  console.log(demo);

   閉包使用的原理與之很類似，最後返回的

 2、構造函數模式

  構造函數自己也是函數，只不過是一個建立對象的函數

 

function Person(name,age){   //構造函數以大寫字母開頭，普通函數以小寫字母開頭
     this.name=name;
     this.age=age;
     this.sayName=function(){
            console.log(this.name)
   };
}

 var demo2=new Person('tj2',23)

   console.log(tj2)

 }

  使用構造函數有一些注意點：必須使用new操做符，調用構造函數會經歷如下四步：

     一、建立一個新的對象

     二、將構造函數的做用域給了新對象（this指向新對象），其中this 是全局變量，window.age  獲取的結果是同樣的。

     三、對新對象添加屬性

     四、返回新對象

 

  3、原型模式

  每一個函數都有一個prototype屬性，這個屬性是一直指針，指向一個對象，這個對象的用途是包含能夠由特定類型的實例共享的屬性和方法。

  使用原型對象的好處是可讓全部對象實例共享他所包含的屬性和方法。沒必要在構造函數中定義對象實例的信息，而是能夠將這些信息直接添加到原型對象中。

 function Person(){  }
   
 Person.prototype.name ='tj3';
 Person.prototype.age=24;
 Person.prototype.sayName= function(){
     alert(this.name)

}

 var demo3= new Person();
 console.log(demo3);

//更簡單的原型辦法
   
  function Person(){
  }

  Person.prototype={
     name:'tj4',
     age:25,
     sayName:function(){
       alert(this.name)
   }
};

  var demo4=new Person();
  console.log(demo4);

 

 4、組合使用構造函數和原型模式

   構造函數模式用於定義實例屬性，而原型模式定義方法和共享的屬性。這種混合模式還支持向構造函數傳遞參數。

   

 1     function Person(name,age,job){
 2           this.name=name;
 3           this.age=age;
 4           this.job=job;
 5           this.sayName=function(){
 6             alert(this.name)
 7        }
 8      }
 9 
10    Person.prototype ={
11          sayJob:function(){
12             console.log(this.job);
13         }
14      }
15 
16 
17     var person1=new Person('tj',22,'fe');

 

  5、原型鏈繼承

      原型鏈繼承的主要思想是利用原型讓一個引用類型繼承另外一個引用類型的屬性和方法。

      注意點：經過原型鏈繼承是不能使用對象字面量建立原型方法，這樣會重寫原型鏈！

        

     function SuperType(){
      this.color=['red','blue'];
       }
      
    function SubType(){

  }

  Subtype.prototype=new SuperType();//繼承了SuperType

    var instance1=new SubType();
       console.log(instance1);

 

 6、借用構造函數繼承

  其實就是用call和apply實現繼承

 1   function wanda(){
 2      this.money=[1,2,3]
 3    }
 4 
 5    function sicong(){
 6        wanda.call(this);
 7     }
 8 
 9    var sc = new sicong();
10     sc.money.push(666)
11     console.log(sc)

 

7、組合繼承

   將原型鏈和借用構造函數的技術組合起來一塊兒用，好處是既能實現函數的複用，又能保證每一個實例有本身的屬性。

 function SuperType(name) {
        this.name = name;
        this.color = ['red', 'blue'];
    }
    SuperType.prototype.sayName = function() {
        console.log(this.name);
    };
    function SubType(name, age) {
        SuperType.call(this, name);//繼承屬性
        this.age = age;
    }
    SubType.prototype = new SuperType();//繼承方法
    var instance1 = new SubType('tj', 22);
    instance1.sayName();