成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript創(chuàng)建對象的5種模式

wemallshop / 1839人閱讀

摘要:一工廠模式創(chuàng)建對象交給一個工廠方法來實現(xiàn),可以傳遞參數(shù),但主要缺點是無法識別對象類型,因為創(chuàng)建對象都是使用的原生構(gòu)造函數(shù)來完成的。此外,組合模式還支持向構(gòu)造函數(shù)傳遞參數(shù),可謂是集兩家之所長。

原文鏈接

面向?qū)ο蟮恼Z言有一個標志,即擁有類的概念,抽象實例對象的公共屬性與方法,基于類可以創(chuàng)建任意多個實例對象,一般具有封裝、繼承、多態(tài)的特性!

但JS中對象與純面向?qū)ο笳Z言中的對象是不同的,ECMA標準定義JS中對象:無序?qū)傩缘募?,其屬性可以包含基本值、對象或者函?shù)。

可以簡單理解為JS的對象是一組無序的值,其中的屬性或方法都有一個名字,根據(jù)這個名字可以訪問相映射的值(值可以是基本值/對象/方法)。

一、工廠模式

創(chuàng)建對象交給一個工廠方法來實現(xiàn),可以傳遞參數(shù),但主要缺點是無法識別對象類型,因為創(chuàng)建對象都是使用Object的原生構(gòu)造函數(shù)來完成的。

function createPerson(name, age, job) {
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.getName = function () {
    return this.name;
  }
  return o; // 使用return返回生成的對象實例
}
var person = createPerson("Jack", 19, "SoftWare Engineer");
二、構(gòu)造函數(shù)模式
function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.getName = function () {
    return this.name;
  }
}
var person1 = new Person("Jack", 19, "SoftWare Engineer");
var person2 = new Person("Liye", 23, "Mechanical Engineer");

構(gòu)造函數(shù)模式與工廠方法區(qū)別在于:

沒有顯式地創(chuàng)建對象

直接將屬性和方法賦值給this對象

沒有return語句

上述由Person構(gòu)造函數(shù)生成的兩個對象person1與person2都是Person的實例,因此可以使用instanceof判斷,并且因為所有對象都繼承Object,因此person1 instanceof Object也返回真:

console.log(person1 instanceof Person); // true;
console.log(person2 instanceof Person); // true;
console.log(person1 instanceof Object); // true;
console.log(person2 instanceof Object); // true;
console.log(person1.constructor === person2.constructor); // ture;

雖然構(gòu)造函數(shù)方式比較不錯,但也存在缺點,那就是在創(chuàng)建對象時,特別針對對象的屬性指向函數(shù)時,會重復的創(chuàng)建函數(shù)實例,以上述代碼為基礎(chǔ),可以改寫為:

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.getName = getName;
}
function getName() {
  return this.name;
}
三、原型模式

JS中每個函數(shù)都有一個prototype(原型)屬性,這個屬性是一個指針,指向一個對象,它是所有通過new操作符使用函數(shù)創(chuàng)建的實例的原型對象。

原型對象最大特點是,所有對象實例共享它所包含的屬性和方法,也就是說,所有在原型對象中創(chuàng)建的屬性或方法都直接被所有對象實例共享。

function Person() {}

Person.prototype.name = "Jack";
Person.prototype.age = 29;
Person.prototype.getName = function () {
  return this.name;
}

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

console.log(person1.getName === person2.getName); // ture;
四、組合構(gòu)造函數(shù)及原型模式

目前最為常用的定義類型方式,是組合構(gòu)造函數(shù)模式與原型模式。

構(gòu)造函數(shù)模式用于定義實例的屬性,而原型模式用于定義方法共享的屬性。

這樣,每個實例都會有自己的一份實例屬性的副本,但同時又共享著對方方法的引用,最大限度的節(jié)約內(nèi)存。此外,組合模式還支持向構(gòu)造函數(shù)傳遞參數(shù),可謂是集兩家之所長。

function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.lessons = ["Math", "Physics"];
}
Person.prototype = {
  constructor: Person, // 原型字面量方式會將對象的constructor變?yōu)镺bject,需要強制指回Person
  getName: function () {
    return this.name;
  }
}

var person1 = new Person("Jack", 19, "SoftWare Engneer");
person1.lessons.push("Biology");

var person2 = new Person("Lily", 39, "Mechanical Engneer");

console.log(person1.lessons); // ["Math", "Physics", "Biology"]
console.log(person2.lessons); // ["Math", "Physics"]
console.log(person1.getName === person2.getName); // true
五、動態(tài)原型模式

組合模式中實例屬性與共享方法(由原型定義)是分離的,這與純面向?qū)ο笳Z言不太一致。

動態(tài)原型模式將所有構(gòu)造信息都封裝在構(gòu)造函數(shù)中,同時又保持了組合的優(yōu)點。

其原理就是通過判斷構(gòu)造函數(shù)的原型中是否已經(jīng)定義了共享的方法或?qū)傩?,如果沒有則定義,否則不再執(zhí)行定義過程。

該方式只定義一次原型上方法或?qū)傩裕覍⑺袠?gòu)造過程都封裝在構(gòu)造函數(shù)中,對原型所做的修改能立即體現(xiàn)所有實例中:

function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.lessons = ["Math", "Physics"];
}
if (typeof this.getName) {
  Person.prototype = {
    constructor: Person, // 原型字面量方式會將對象的constructor變?yōu)镺bject,需要強制指回Person
    getName: function () {
      return this.name;
    }
  }
}
var person1 = new Person("Jack", 19, "SoftWare Engneer");
person1.lessons.push("Biology");

var person2 = new Person("Lily", 39, "Mechanical Engneer");

console.log(person1.lessons); // ["Math", "Physics", "Biology"]
console.log(person2.lessons); // ["Math", "Physics"]
console.log(person1.getName === person2.getName); // true

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

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/81854.html

相關(guān)文章

  • 常用JavaScript設(shè)計模式你都知道嗎?

    摘要:構(gòu)造函數(shù)模式是中最常用的模式之一,用于創(chuàng)建給定類型的新對象。原型模式這是基于對象的創(chuàng)造型設(shè)計模式。它通常用于目標對象受到約束且可能無法有效地處理其所有職責的情況。它不是構(gòu)造函數(shù)其靜態(tài)方法用于可攔截的操作。 showImg(https://segmentfault.com/img/bVbwdpt?w=700&h=340); 原文:https://medium.com/better-pro...

    Jochen 評論0 收藏0
  • JavaScript設(shè)計模式》讀后感 覺很復雜

    摘要:想繼續(xù)了解設(shè)計模式必須要先搞懂面向?qū)ο缶幊蹋駝t只會讓你自己更痛苦。創(chuàng)建型設(shè)計模式主要有簡單工廠模式,工廠方法模式,抽象工廠模式,建造者模式,原型模式和單例模式,下面一一道來。而工廠方法模式本意是將實際創(chuàng)建對象的工作推遲到子類中。 接觸前端兩三個月的時候,那時候只是聽說設(shè)計模式很重要,然后我就去讀了一本設(shè)計模式的書,讀了一部分,也不知道這些設(shè)計模式到底設(shè)計出來干嘛的,然后就沒再看了。后...

    e10101 評論0 收藏0
  • [譯] 為什么原型繼承很重要

    摘要:使用構(gòu)造函數(shù)的原型繼承相比使用原型的原型繼承更加復雜,我們先看看使用原型的原型繼承上面的代碼很容易理解。相反的,使用構(gòu)造函數(shù)的原型繼承像下面這樣當然,構(gòu)造函數(shù)的方式更簡單。 五天之前我寫了一個關(guān)于ES6標準中Class的文章。在里面我介紹了如何用現(xiàn)有的Javascript來模擬類并且介紹了ES6中類的用法,其實它只是一個語法糖。感謝Om Shakar以及Javascript Room中...

    xiao7cn 評論0 收藏0
  • 【連載】前端個人文章整理-從基礎(chǔ)到入門

    摘要:個人前端文章整理從最開始萌生寫文章的想法,到著手開始寫,再到現(xiàn)在已經(jīng)一年的時間了,由于工作比較忙,更新緩慢,后面還是會繼更新,現(xiàn)將已經(jīng)寫好的文章整理一個目錄,方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理 從最開始萌生寫文章的想法,到著手...

    madthumb 評論0 收藏0

發(fā)表評論

0條評論

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