亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Javascript學習之創(chuàng)建對象

jollywing / 2210人閱讀

摘要：在中，除了幾種原始類型外，其余皆為對象，，既然對象如此重要，那就列舉一下在中如何創(chuàng)建對象通過構(gòu)造函數(shù)創(chuàng)建對象實例對象字面量對象字面量是對象定義的一種簡寫形式，目的在于簡化創(chuàng)建包含大量屬性的對象的過程。

在Javascript中，除了幾種原始類型外，其余皆為對象（Object，Array ...），既然對象如此重要，那就列舉一下在Javascript中如何創(chuàng)建對象：

通過Object構(gòu)造函數(shù)創(chuàng)建對象實例
var person = new Object();
person.name = "krew";
person.age = 26;
對象字面量

對象字面量是對象定義的一種簡寫形式，目的在于簡化創(chuàng)建包含大量屬性的對象的過程。

var person = {
  name : "krew",
  age : 26
}
工廠模式

工廠模式是一種設計模式，通過對創(chuàng)建具體對象的過程進行抽象。使用函數(shù)來封裝創(chuàng)建對象的細節(jié)，可以無數(shù)次地調(diào)用用該函數(shù)，每次都可以得到包含制定內(nèi)容的對象。

function personFactory(name, age){
  var obj = new Object();
  obj.name = name;
  obj.age = age;
  obj.sayName = function(){
    console.log(this.name);
  }
  return obj;
}

var person1 = personFactory("krew", 26);  
var person2 = personFactory("john", 20);
構(gòu)造函數(shù)模式

基于工廠模式創(chuàng)建對象雖然方便，但是創(chuàng)建出來的對象沒有特定的對象類型（比如原生對象Object, Array的實例都有自己的類型），所以就采用構(gòu)造函數(shù)模式來創(chuàng)建對象，就能解決識別對象類型的問題。

function Person(name, age){
  this.name = name;
  this.age = age;
  this.sayName = function() {
    console.log(this.name);
  }
}

var person1 = new Person("krew", 26);
var person2 = new Person("john", 20);

person1.sayName();  // "krew"
person2.sayName();  // "john"

person1.constructor == Person  // true
person2.constructor == Person  // true
原型模式

每個函數(shù)在創(chuàng)建的時候，就會根據(jù)特定的規(guī)則為該函數(shù)創(chuàng)建一個prototype屬性，這個屬性是指向函數(shù)的原型對象的指針。這個原型對象的包含可以由特定類型的所有實例共享的屬性和方法。所以，在構(gòu)造函數(shù)的prototype屬性上添加屬性與方法，該構(gòu)造函數(shù)的所有實例都會在原型鏈上查找到這些屬性與方法。

function Person() {
}
Person.prototype.name = "krew";
Person.prototype.age = 26;
Person.prototype.sayName = function() {
  console.log(this.name);
}

var person1 = new Person();
var person2 = new Person();

person1.sayName();  // "krew"
person2.sayName();  // "krew"
組合構(gòu)造函數(shù)和原型模式

由于原型對象中的屬性是被很多實例所共享的，對于引用類型的屬性值，將會存在實例間無法隔離的問題：

function Person() {
}
Person.prototype = {
  constructor : Person,
  name : "krew",
  age : 26,
  friends : ["john", "kitty"],
  showFriends : function() {
    console.log(this.friends);
  }
}
var person1 = new Person();
var person2 = new Person();

person1.friends.push("petter");

person1.showFriends()  // ["john", "kitty", "petter"]
person2.showFriends()  // ["john", "kitty", "petter"]

可以看到，僅是在實例person1的friends屬性上添加值，但person2也跟著變化。這是因為friends數(shù)組存在于Person.prototype而非person1中，person1與person2中的friends皆為引用Person.prototype中的friends，所以當通過person1來改變friends的時候，person2中的friends也會反映出來。
通過組合構(gòu)造函數(shù)與原型模式可以解決上面出現(xiàn)的問題，構(gòu)造函數(shù)模式用于定義實例屬性，而原型模式用于定義方法和共享的屬性，每個實例會有自己的一份實例屬性，同時又共享著方法的引用，極大的節(jié)省了內(nèi)存。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayName = function() {
  console.log(this.name);
}

var person1 = new Person("krew", 26);
var person2 = new Person("john", 20);

person1.sayName();  // "krew"
person2.sayName();  // "john"
動態(tài)原型模式
function Person(name, age){
  this.name = name;
  this.age = age;
  if (typeof this.sayName != "function") {
    Person.prototype.sayName = function() {
      console.log(this.name);
    }
  }
}

var person1 = new Person("krew", 26);
var person2 = new Person("john", 20);

person1.sayName();  // "krew"
person2.sayName();  // "john"
寄生構(gòu)造函數(shù)模式
function Person(name, age) {
  var obj = new Object();
  obj.name = name;
  obj.age = age;
  obj.sayName = function() {
    console.log(this.name);
  }
  return obj;
}

var person1 = new Person("krew", 26);
var person2 = new Person("john", 20);

person1.sayName();  // "krew"
person2.sayName();  // "john"
穩(wěn)妥構(gòu)造函數(shù)模式
function Person(name) {
  var obj = new Object();
  obj.sayName = function() {
    console.log(name);
  }
  return obj;
}

var person1 = Person("krew");
var person2 = Person("john");

person1.sayName();  // "krew"
person2.sayName();  // "john"

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/88229.html

相關(guān)文章

  • JavaScript學習之Object(下)new命令

    摘要：命令作用作用是執(zhí)行構(gòu)造函數(shù)，返回實例對象上面例子是自定義一個構(gòu)造函數(shù)，其最大的特點就是首字母大寫，用執(zhí)行構(gòu)造函數(shù)其中，在的執(zhí)行下，代表了實例化后的對象，這個也就有屬性注意點如果不用執(zhí)行構(gòu)造函數(shù)，那么指向的是全局有兩種方式可以避免內(nèi)部定義嚴格 new命令 new作用 作用是執(zhí)行構(gòu)造函數(shù)，返回實例對象 function F() { this.name = object } var ...

    Salamander 評論0 收藏0

  • JavaScript學習之零碎記憶點總結(jié)記錄(一)

    摘要：總結(jié)記錄常見的五種類型報錯語法解析錯誤變量未定義變量類型錯誤數(shù)組越界相關(guān)函數(shù)參數(shù)錯誤能防止報錯導致后面代碼不能執(zhí)行問題的未定義不影響后面函數(shù)的執(zhí)行注意點在報錯前，不執(zhí)行里的內(nèi)容不報錯也不執(zhí)行在報錯后，的內(nèi)容不會被執(zhí)行執(zhí)行完結(jié)束，如果有 總結(jié)記錄 try-catch-finally 常見的五種類型報錯 SyntaxError語法解析錯誤 ReferenceError變量未定義 Type...

    fou7 評論0 收藏0

  • JavaScript學習之對象原型及繼承

    摘要：原型要掌握這三者之間的關(guān)系，通過代碼例子記錄一下自身屬性的這里就是通過代碼看一下做了什么默認情況下，將的所有屬性包括繼承的賦值給有什么東西呢自己的原型鏈，添加一個屬性，用來指明對象的誰構(gòu)造的自身全部屬性，這邊構(gòu)建一個空對象原型，所以沒有自有 原型 要掌握這三者之間的關(guān)系prototype，constructor,__proto__通過代碼例子記錄一下 function F() { ...

    妤鋒シ 評論0 收藏0

  • JavaScript學習之Object(下)相關(guān)方法

    摘要：它不區(qū)分該屬性是對象自身的屬性，還是繼承的屬性。那么我們要遍歷對象所有屬性，包括繼承以及不可遍歷的屬性，用加原型遍歷實現(xiàn)類似的用遞歸 Object靜態(tài)方法 Object自身方法，必須由Object調(diào)用，實例對象并不能調(diào)用 Object.getPrototypeOf() 作用是獲取目標對象的原型 function F() {}; var obj = new F(); console.lo...

    amuqiao 評論0 收藏0

  • Javascript學習之繼承

    摘要：繼承是面向?qū)ο缶幊陶Z言中的一個重要的概念，繼承可以使得子類具有父類的屬性和方法或者重新定義追加屬性和方法等。但是在中沒有類的概念，是基于原型的語言，所以這就意味著對象可以直接從其他對象繼承。 繼承是面向?qū)ο缶幊陶Z言中的一個重要的概念，繼承可以使得子類具有父類的屬性和方法或者重新定義、追加屬性和方法等。但是在Javascript中沒有類的概念，是基于原型的語言，所以這就意味著對象可以直接...

    CHENGKANG 評論0 收藏0

發(fā)表評論

0條評論

jollywing

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<