JS面向對象的幾種寫法


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

    一、工廠模式

 function person (name,age,job){
    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);

   閉包使用的原理與之很相似,最后返回的

 二、構造函數模式

  構造函數本身也是函數,只不過是一個創建對象的函數

 

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(demo2)
 }

  使用構造函數有一些注意點:必須使用new操作符,調用構造函數會經歷以下四步:

     1、創建一個新的對象

     2、將構造函數的作用域給了新對象(this指向新對象),其中this 是全局變量,window.age  獲取的結果是一樣的。

     3、對新對象添加屬性

     4、返回新對象

 

  三、原型模式

  每個函數都有一個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);

 

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

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

   

 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');

 

  五、原型鏈繼承

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

      注意點:通過原型鏈繼承是不能使用對象字面量創建原型方法,這樣會重寫原型鏈!

        

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

  }

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

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

 

 六、借用構造函數繼承

  其實就是用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)

 

七、組合繼承

   將原型鏈和借用構造函數的技術組合起來一起用,好處是既能實現函數的復用,又能保證每個實例有自己的屬性。

 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();

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM