學習javascript物件導向 掌握建立對象的9種方式,javascript9種

來源:互聯網
上載者:User

學習javascript物件導向 掌握建立對象的9種方式,javascript9種

本文為大家分享了javascript建立對象的9種方式,供大家參考,具體內容如下

【1】使用Object建構函式
[缺點]使用同一個介面建立很多個物件,會產生大量重複代碼

var person = new Object();  person.name = "Nicholas";  person.age = 29;  person.job = "Software Engineer";  person.sayName = function(){    alert(this.name);  }

【2】使用對象字面量
[缺點]使用同一個介面建立很多個物件,會產生大量重複代碼

var person = {  name: "Nicholas",  age : 29,  job: "Software Engineer",  sayName: function(){    alert(this.name);  }};

【3】原廠模式:抽象了建立具體對象的過程,考慮到ECMAScript中無法建立類,開發人員就發明了一種函數,用函數來封裝以特定介面建立對象的細節
  [缺點]解決了建立多個相似對象的問題,但沒有解決對象識別的問題

function createPerson(name,age,job){  var o = new Object();  o.name = name;  o.age = age;  o.job = job;  o.sayname = function(){    alert(this.name);  }  return o;}var person1 = createPerson('Nicholas',29,'software Engineer');var person2 = createPerson('greg',27,'doctor');

【4】建構函式模式:沒有顯式地建立對象,直接將屬性和方法賦給了this對象,沒有return語句
  [缺點]每個方法都要在每個執行個體上重新建立一遍

function Person(name,age,job){  this.name = name;  this.age = age;  this.jog = job;  this.sayName = function(){    alert(this.name);  };  //與聲明函數在邏輯上是等價的  //this.sayName = new Function('alert(this.name)');}var person1 = new Person("Nicholas",29,"software Engineer");var person2 = new Person("Greg",27,"doctor");

【4.1】建構函式拓展模式:把函數定義轉移到建構函式外部
[缺點1]在全域範圍中定義的函數實際上只能被某個對象調用,這讓全域範圍有點名不副實
[缺點2]若對象需要定義很多方法,就要定義很多全域函數,這個自訂參考型別就沒有封裝性可言

function Person(name,age,job){  this.name = name;  this.age = age;  this.job = job;  this.sayName = sayName;}function sayName(){  alert(this.name);}var person = new Person('小火柴','20','student')person.sayName();console.log(Person);

【5】原型模式:我們建立的每個函數都有一個prototype(原型)屬性,這個屬性是一個指標,指向一個對象,而這個對象的用途是包含可以由特定類型的所有執行個體共用的屬性和方法。如果按照字面意思來理解,prototype就是通過調用建構函式而建立的對象執行個體的原型對象

function Person(){  Person.prototype.name = "Nicholas";  Person.prototype.age = 29;  Person.prototype.job = "software Engineer";  Person.prototype.sayName = function(){    alert(this.name);  }}var person1 = new Person();person1.sayName();//"Nicholas"var person2 = new Person();person2.sayName();//"Nicholas"alert(person1.sayName == person2.sayName);//true

【5.1】更簡單的原型模式:為了減少不必要的輸入,也為了從視覺上更好地封裝原型的功能,用一個包含所有屬性和方法的對象字面量來重寫整個原型對象。
[缺點]以這種方式重設constructor屬性會導致它的[[Enumerable]]特性被設定為true,預設情況下原生的constructor屬性是不可枚舉的

function Person(){};Person.prototype = {  constructor : Person,  name: "Nicholas",  age: 29,  job: "software Engineer",  sayName : function(){    alert(this.name);  }};

【5.2】解決enumerable問題的原型模式

function Person(){};Person.prototype = {  name: "Nicholas",  age: 29,  job: "software Engineer",  sayName : function(){    alert(this.name);  }};Object.defineProperty(Person.prototype,"constructor",{  enumerable : false,  value : Person});

[原型模式缺點1]重寫原型對象切斷了現有原型與已存在對象執行個體之間的聯絡,它們引用的仍是最初的原型。

function Person(){}var friend = new Person();Person.prototype = {  constructor: Person,  name: "Nicholas",  age: 29,  job: "Software Engineer",  sayName: function(){    alert(this.name);  }};friend.sayName();//error

[原型模式缺點2]參考型別屬性的共用性問題突出

function Person(){}Person.prototype = {  constructor: Person,  name: "Nicholas",  age: 29,  job: "Software Engineer",  friend : ["shelby","Court"],  sayName: function(){    alert(this.name);  }};var person1 = new Person();var person2 = new Person();person1.friends.push("Van");alert(person1.friends);//["shelby","Court","Van"];alert(person2.friends);//["shelby","Court","Van"];alert(person1.friends === person2.friends);//true

【6】組合模式:組合使用建構函式模式和原型模式是建立自訂類型的最常見方式。建構函式模式用於定義執行個體屬性,而原型模式用於定義方法和共用的屬性。這種混成模式還支援向建構函式傳遞參數,是用來定義參考型別的一種預設模式

function Person(name,age,job){  this.name = name;  this.age = age;  this.job = job;  this.friends = ["shelby","Court"];}Person.prototype = {  constructor: Person,  sayName : function(){    alert(this.name);  }  }var person1 = new Person("Nicholas",29,"Software Engineer");var person2 = new Person("Greg",27,"Doctor");person1.friends.push("Van");alert(person1.friends);// ["shelby","Court","Van"];alert(person1.friends);// ["shelby","Court"];alert(person1.friends === person2.friends);//falsealert(person1.sayName === person2.sayName);//true

【7】動態原型模式:把所有資訊都封裝在建構函式中,通過在建構函式中初始化原型(僅在必要情況下),又保持了同時使用建構函式和原型的優點。換句話說,可以通過檢查某個存在的方法是否有效,來決定是否要初始化原型。
  [注意]使用動態原型模式時,不能使用對象字面量重寫原型。如果在已經建立了執行個體的情況下重寫原型,那麼就會切斷現有執行個體與新執行個體之間的聯絡

function Person(name,age,job){  //屬性  this.name = name;  this.age = age;  this.job = job;  //方法  if(typeof this.sayName != "function"){    Person.prototype.sayName = function(){      alert(this.name);    };  }}var friend = new Person("Nicholas",29,"Software Engineer");friend.sayName();

【8】寄生建構函式模式:建立一個函數,該函數的作用僅僅是封裝建立對象的代碼,然後再返回新建立的對象

function Person(name,age,job){  var o = new Object();  o.name = name;  o.age = age;  o.job = job;  o.sayName = function(){    alert(this.name);  };  return o;}var friend = new Person("Nicholas",29,"Software Engineer");friend.sayName();//"Nicholas"

【寄生建構函式模式應用】建立一個具有額外方法的特殊數組。由於不能直接修改Array建構函式,因此可以使用這個模式

function SpecialArray(){  //建立數組  var values = new Array();  //添加值  values.push.apply(values,arguments);  //添加方法  values.toPipedString = function(){    return this.join('|');  };  //返回數組  return values;}var colors = new SpecialArray("red","blue","green");alert(colors.toPipedString());//"red|blue|green"  

【9】穩妥建構函式模式:所謂穩妥對象指沒有公用屬性,而且其方法也不引用this的對象。穩妥對象最適合在一些安全環境中(這些環境會禁止使用this和new)或者在防止資料被其他應用程式改動時使用。

function Person(name,age,job){  //建立要返回的對象  var o = new Object();  //可以在這裡定義私人變數和函數  //添加方法  o.sayName = function(){    alert(name);  };  //返回對象  return o;}//在穩妥模式建立的對象中,除了使用sayName()方法之外,沒有其他方法訪問name的值var friend = Person("Nicholas",29,"Software Engineer");friend.sayName();//"Nicholas"

以上就是javascript建立對象的九種方式,希望對大家的學習有所協助。

您可能感興趣的文章:
  • js使用對象直接量建立對象的代碼
  • JS 建立對象(常見的幾種方法)
  • JavaScript 建立對象
  • JavaScript 三種建立對象的方法
  • js建立對象的幾種常用方式小結(推薦)
  • javascript的函數、建立對象、封裝、屬性和方法、繼承
  • 從面試題學習Javascript 物件導向(建立對象)
  • JavaScript建立對象的寫法
  • js中建立對象的幾種方式樣本介紹

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.