摘要:一工廠模式創建對象交給一個工廠方法來實現,可以傳遞參數,但主要缺點是無法識別對象類型,因為創建對象都是使用的原生構造函數來完成的。此外,組合模式還支持向構造函數傳遞參數,可謂是集兩家之所長。
原文鏈接
面向對象的語言有一個標志,即擁有類的概念,抽象實例對象的公共屬性與方法,基于類可以創建任意多個實例對象,一般具有封裝、繼承、多態的特性!
但JS中對象與純面向對象語言中的對象是不同的,ECMA標準定義JS中對象:無序屬性的集合,其屬性可以包含基本值、對象或者函數。
可以簡單理解為JS的對象是一組無序的值,其中的屬性或方法都有一個名字,根據這個名字可以訪問相映射的值(值可以是基本值/對象/方法)。
一、工廠模式創建對象交給一個工廠方法來實現,可以傳遞參數,但主要缺點是無法識別對象類型,因為創建對象都是使用Object的原生構造函數來完成的。
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");二、構造函數模式
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");
構造函數模式與工廠方法區別在于:
沒有顯式地創建對象
直接將屬性和方法賦值給this對象
沒有return語句
上述由Person構造函數生成的兩個對象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;
雖然構造函數方式比較不錯,但也存在缺點,那就是在創建對象時,特別針對對象的屬性指向函數時,會重復的創建函數實例,以上述代碼為基礎,可以改寫為:
function Person(name,age,job){ this.name = name; this.age = age; this.job = job; this.getName = getName; } function getName() { return this.name; }三、原型模式
JS中每個函數都有一個prototype(原型)屬性,這個屬性是一個指針,指向一個對象,它是所有通過new操作符使用函數創建的實例的原型對象。
原型對象最大特點是,所有對象實例共享它所包含的屬性和方法,也就是說,所有在原型對象中創建的屬性或方法都直接被所有對象實例共享。
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;四、組合構造函數及原型模式
目前最為常用的定義類型方式,是組合構造函數模式與原型模式。
構造函數模式用于定義實例的屬性,而原型模式用于定義方法和共享的屬性。
這樣,每個實例都會有自己的一份實例屬性的副本,但同時又共享著對方方法的引用,最大限度的節約內存。此外,組合模式還支持向構造函數傳遞參數,可謂是集兩家之所長。
function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.lessons = ["Math", "Physics"]; } Person.prototype = { constructor: Person, // 原型字面量方式會將對象的constructor變為Object,需要強制指回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五、動態原型模式
組合模式中實例屬性與共享方法(由原型定義)是分離的,這與純面向對象語言不太一致。
動態原型模式將所有構造信息都封裝在構造函數中,同時又保持了組合的優點。
其原理就是通過判斷構造函數的原型中是否已經定義了共享的方法或屬性,如果沒有則定義,否則不再執行定義過程。
該方式只定義一次原型上方法或屬性,且將所有構造過程都封裝在構造函數中,對原型所做的修改能立即體現所有實例中:
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變為Object,需要強制指回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
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/81854.html
摘要:構造函數模式是中最常用的模式之一,用于創建給定類型的新對象。原型模式這是基于對象的創造型設計模式。它通常用于目標對象受到約束且可能無法有效地處理其所有職責的情況。它不是構造函數其靜態方法用于可攔截的操作。 showImg(https://segmentfault.com/img/bVbwdpt?w=700&h=340); 原文:https://medium.com/better-pro...
摘要:想繼續了解設計模式必須要先搞懂面向對象編程,否則只會讓你自己更痛苦。創建型設計模式主要有簡單工廠模式,工廠方法模式,抽象工廠模式,建造者模式,原型模式和單例模式,下面一一道來。而工廠方法模式本意是將實際創建對象的工作推遲到子類中。 接觸前端兩三個月的時候,那時候只是聽說設計模式很重要,然后我就去讀了一本設計模式的書,讀了一部分,也不知道這些設計模式到底設計出來干嘛的,然后就沒再看了。后...
摘要:使用構造函數的原型繼承相比使用原型的原型繼承更加復雜,我們先看看使用原型的原型繼承上面的代碼很容易理解。相反的,使用構造函數的原型繼承像下面這樣當然,構造函數的方式更簡單。 五天之前我寫了一個關于ES6標準中Class的文章。在里面我介紹了如何用現有的Javascript來模擬類并且介紹了ES6中類的用法,其實它只是一個語法糖。感謝Om Shakar以及Javascript Room中...
摘要:個人前端文章整理從最開始萌生寫文章的想法,到著手開始寫,再到現在已經一年的時間了,由于工作比較忙,更新緩慢,后面還是會繼更新,現將已經寫好的文章整理一個目錄,方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理 從最開始萌生寫文章的想法,到著手...
閱讀 2976·2021-09-22 15:18
閱讀 3397·2019-08-30 15:54
閱讀 3276·2019-08-30 15:53
閱讀 594·2019-08-30 14:12
閱讀 819·2019-08-29 17:01
閱讀 2204·2019-08-29 14:04
閱讀 1390·2019-08-29 13:09
閱讀 867·2019-08-26 17:40