摘要:簡單工廠模式特點通過來創建一個對象實例,并為其添加屬性和方法并返回優點工廠類集中了所有對象的創建,便于對象創建的統一管理且可以大量創建缺點工廠模式卻無從識別對象的類型,因為它們直接由構造函數創建,原型鏈上只有對象,不像等每創建一個對象實例
1.簡單工廠模式
// 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("spademan", 26, "front-end"); var person2 = createPerson("ivan", 27, "seller"); person1.sayName(); //"spademan" person2.sayName(); //"ivan"
特點: 通過 new Object() 來創建一個對象實例,并為其添加屬性和方法并返回
優點: 工廠類集中了所有對象的創建,便于對象創建的統一管理,且可以大量創建
缺點:(1).工廠模式卻無從識別對象的類型,因為它們直接由 Object() 構造函數創建,原型鏈上只有 Object.prototype 對象,不像Date、Array等 .
(2).每創建一個對象實例,就會為每個對象實例創建一遍相同功能但是是不同函數實例的方法,它們并不相等。這顯然是不可取的
另外在相應的業務方面,除非是適用場景,否則不可濫用工廠模式,會造成代碼的復雜度(參考)
注意:除了簡單工廠模式之外還有抽象工廠模式
2.構造函數模式function GitHub(name, url) { this.name = name; this.url = url; this.alertUrl = function() { alert(this.url); } } var git = new GitHub("spademan", "https://github.com/spademan"); console.log(git instanceof GitHub); // true, 判斷git是否是GitHub的實例,即解決了工廠模式中不能識別對象的類型的問題
特點: 需要使用new,并且沒有return關鍵字
優點: 可以識別對象的類型
缺點:使用構造函數的最大的問題在于每次創建實例的時候都要重新創建一次方法(理論上每次創建對象的時候對象的屬性均不同,而對象的方法是相同的),然而創建兩次完全相同的方法是沒有必要的,因此,我們可以將函數移到對象外面(這一點和工廠模式相同)
3.原型模式function Person() {} Person.prototype.name = "spademan" Person.prototype.age = 23 Person.prototype.getName = function () { return this.name } Person.prototype.setName = function () { this.name = name } var spademan_1 = new Person() var spademan_2 = new Person() console.log(spademan_1.getName === spademan_2.getName) // => true
特點: 構造函數內不定義屬性和方法,把屬性和方法都定義在構造函數的原型上。這樣所有的對象實例都共享對象原型上的屬相和方法
優點: 多個實例可以共享原型上的屬性和方法
缺點: 修改原型上的一些引用屬性,所有實例對應的屬性也將被改變,這樣可能帶來一些問題
4.構造函數模式 + 原型模式(也叫混合模式)// 寫法1 function Person(name, age) { this.name = name this.age = age this.getAge = function () { return this.age } } Person.prototype.country = "China" Person.prototype.getName = function () { return this.name } Person.prototype.setName = function (name) { this.name = name } var spademan = new Person("spademan", 26) var spademan_2 = new Person("spdeman_2", 27)
//寫法2 function Person(name, age) { this.name = name this.age = age this.getAge = function () { return this.age } } Person.prototype.country = "China" Person.prototype.getName = function () { return this.name } Person.prototype.setName = function (name) { this.name = name } var spademan = new Person("spademan", 26) var spademan_2 = new Person("spdeman_2", 27)
優點: 構造函數內定義私有的屬性和方法,構造函數的原型上定義共有的屬性和方法。是目前最常用的方式之一
5.模塊模式(參考)// 寫法1 var MODULE = (function () { var my = {}, privateVariable = 1; function privateMethod() { // ... } my.moduleProperty = 1; my.moduleMethod = function () { // ... }; return my; }());
// 寫法2 var MODULE = (function (my) { var privateVariable = 1; function privateMethod() { // ... } my.moduleProperty = 1; my.moduleMethod = function () { // ... }; return my; }(MODULE|| {}));
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86781.html
摘要:面試題來源于網絡,看一下高級前端的面試題,可以知道自己和高級前端的差距。 面試題來源于網絡,看一下高級前端的面試題,可以知道自己和高級前端的差距。有些面試題會重復。 使用過的koa2中間件 koa-body原理 介紹自己寫過的中間件 有沒有涉及到Cluster 介紹pm2 master掛了的話pm2怎么處理 如何和MySQL進行通信 React聲明周期及自己的理解 如何...
摘要:面試的公司分別是阿里網易滴滴今日頭條有贊挖財滬江餓了么攜程喜馬拉雅兌吧微醫寺庫寶寶樹海康威視蘑菇街酷家樂百分點和海風教育。 (關注福利,關注本公眾號回復[資料]領取優質前端視頻,包括Vue、React、Node源碼和實戰、面試指導) 本人于7-8月開始準備面試,過五關斬六將,最終抱得網易歸,深深感受到高級前端面試的套路。以下是自己整理的面試題匯總,不敢藏私,統統貢獻出來。 面試的公司分...
閱讀 1260·2021-10-11 10:57
閱讀 2045·2021-09-02 15:15
閱讀 1607·2019-08-30 15:56
閱讀 1195·2019-08-30 15:55
閱讀 1157·2019-08-30 15:44
閱讀 977·2019-08-29 12:20
閱讀 1321·2019-08-29 11:12
閱讀 1066·2019-08-28 18:29