天天看點

js中面向對象(建立對象的幾種方式) js中面向對象(建立對象的幾種方式)

js中面向對象(建立對象的幾種方式)

1、面向對象程式設計(OOP)的特點:

  抽象:抓住核心問題

  封裝:隻能通過對象來通路方法

  繼承:從已有的對象下繼承出新的對象

  多态:多對象的不同形态

一、建立對象的幾種方式

javascript 建立對象簡單的來說,無非就是使用内置對象或各種自定義對象,當然還可以使用JSON,但寫法有很多,也能混合使用。

1、工廠方式建立對象:面向對象中的封裝函數(内置對象)

js中面向對象(建立對象的幾種方式) js中面向對象(建立對象的幾種方式)
function createPerson(name){
   //1、原料
    var obj=new Object();
   //2、加工
    obj.name=name;
    obj.showName=function(){
       alert(this.name);
    }     
    //3、出場
     return obj; 
} 
var p1=createPerson('小米');
p1.showName();      
js中面向對象(建立對象的幾種方式) js中面向對象(建立對象的幾種方式)

與系統對象的差別:

    var arr=new Array();//生成一個系統數組對象

    1、系統對象是直接用 new 在外面生成,而工廠定義的是在函數内部生成

    2、工廠定義的函數名稱第一個是小寫開頭,而系統定義的是大寫開頭

工廠模式的優缺點:雖然解決了建立相似對象的問題,但是卻沒有解決對象識别問題(即怎樣知道一個對象的類型)。

2、構造函數建立對象

  當new去調用一個函數,這個時候函數中的this就是建立出來的對象,而且函數的傳回值就是this(隐式傳回)

  new後面的函數叫做構造函數

  <1>有參數的構造函數

js中面向對象(建立對象的幾種方式) js中面向對象(建立對象的幾種方式)
function CreatePerson(name){
  this.name=name;
  this.showName=function(){
    alert(this.name);
  }
}
    var p1=new CreatePerson('小米');      
js中面向對象(建立對象的幾種方式) js中面向對象(建立對象的幾種方式)

  <2>無參數的構造函數

js中面向對象(建立對象的幾種方式) js中面向對象(建立對象的幾種方式)
  function CreatePerson(){}
    var p1=new CreatePerson();
    p1.name="小米";
    p1.showName=function(){
     alert(p1.name);
    }
    p1.showName();      
js中面向對象(建立對象的幾種方式) js中面向對象(建立對象的幾種方式)

構造函數模式的優缺點:

  1、優點:建立自定義函數意味着将來可以将它的執行個體辨別為一種特定的類型,這是構造函數勝過工廠模式的地方

  2、缺點:每個方法都要在每個執行個體上重新建立一遍

3、對象字面量方式建立對象

person={
  name:"小米",
  age:23
};      

4、用原型方式 

  1、原型對象:隻要建立了一個新函數,就會為該函數建立一個prototype屬性,這個屬性指向函數的原型對象。在預設情況下,所有的原型對象都會自動獲得一個constructor(構造函數)屬性,這個屬性是一個指向prototype屬性所在函數的指針

  2、可以通過isPrototypeOf()方法來确定對象之間是否存在這種關系

js中面向對象(建立對象的幾種方式) js中面向對象(建立對象的幾種方式)
function Person(){}
Person.prototype.name="小米";
Person.prototype.showName=function(){
alert(this.name);
}
var p1=new Person();
p1.showName();      
js中面向對象(建立對象的幾種方式) js中面向對象(建立對象的幾種方式)

原型模式的優缺點:

  1、優點:可以讓所有的對象執行個體共享它所包含的屬性和方法

  2、缺點:原型中是所有屬性都是共享的,但是執行個體一般都是要有自己的單獨屬性的。是以一般很少單獨使用原型模式。

5.混合模型

  構造函數模式定義執行個體屬性,而原型模式用于定義方法和共享的屬性

js中面向對象(建立對象的幾種方式) js中面向對象(建立對象的幾種方式)
function CreatePerson(name){
  this.name=name;
}
  Create.prototype.showName=function(){
    alert(this.name);
  }
    var p1=new CreatePerson('小米');
    p1.showName();
      
var p2=new CreatePerson('小米');
    p2.showName();      
  alert(p1.showName==p2.showName);//true;原因:都是在原型下面,在記憶體中隻存在一份,位址相同      
js中面向對象(建立對象的幾種方式) js中面向對象(建立對象的幾種方式)

  總結:

  function 構造函數(){

    this.屬性;

  }

  構造函數.原型.方法=function(){};

  var 對象1=new 構造函數();

  對象1.方法();

原型:去改寫對象下面公用的的方法或屬性,讓公用的方法或屬性在記憶體中存在一份(提高性能)

原型:prototype:要寫在構造函數的下面

var  arr=[];
arr.number=10;
Array.prototype.number=20;
alert(arr.number);//10,
//原因:普通定義的要比原型定義的權重大,先會找自身的,自身沒有的話再沿着原型鍊找原型上是否有
      

屬性是否要放在原型下面,就要看該屬性是否是可變的,如果不是可變的,就可以放在原型下面,用來公用屬性,可變的話放在構造函數下面。

繼續閱讀