首先我們需要知道JavaScript與傳統的面向對象編程（oop）不同，它沒有傳統意義上的類，該語言的一切都是基于對象，依靠的是一套原型（prototype）系統。JavaScript通過原型委托的方式實現對象與對象之間的繼承，而不是傳統面向對象語言中的類式繼承。

　　動態類型語言的變量類型要到程序運行時，待變量賦值后，才能確定某種類型，而JavaScript就是一門典型的動態類型語言。

一、原型模式

　　原型模式是用于創建對象的一種模式，可通過克隆來創建一個對象，最新的ECMAScript5提供了Object.create 方法來克隆對象：

<script> var fruit={price:15,name:"apple"} var demo=Object.create(fruit); alert(demo.name);//apple
//或者： function sch(){this.name="hube";this.age=100;
} var tt=new sch(); var t=Object.create(tt);alert(t.age);//100

//在不支持的該方法的瀏覽器中，則可以使用如下polyfill代碼： Object.create=function(obj){var F=function(){};//定義了一個隱式的構造函數F.prototype=obj;return new F(); //還是通過new來實現的 } </script>

　　Object.create()方法會使用指定的原型對象及其屬性去創建一個新的對象。事實上JavaScript有一個根對象的存在，它就是Object.prototype對象，Object.prototype是一個空對象，我們創建的每一個對象都是從Object.prototype克隆而來：

var t={};// 以字面量方式創建的空對象就相當于:var t= Object.create(Object.prototype); var s=new Object(); alert(Object.getPrototypeOf(t)===Object.prototype);//true alert(Object.getPrototypeOf(s)===Object.prototype);//true

　　上面創建二個”空“對象，利用了ECMAScript5的Object.getPrototypeOf方法查看到了二個對象的原型。這里的”空“加引號不是真正的空對象，它還繼承了Object的一些屬性及方法。創建一個空對象使用Object.create()即可：

var o = Object.create(null);//創建一個原型為null的空對象

　　該模式不限于此，它更多的是提供了一種便捷的方式去創建某個類型的對象。

原型繼承：

　　實際上通過對對象構造器的原型動態賦值給其他對象來實現”類“與”類“之間的原型繼承：

var A=function(){}; A.prototype.sayName=function(){alert("hi");}
var B=function(){}; B.prototype=new A();//這是核心代碼：它重寫了B的原型，它和把B.prototype直接賦值給字面量對象相比沒有本質區別，//都是將對象構造器的原型指向另一個對象，而繼承總是發生在對象與對象之間。 var b=new B(); b.sayName();//hi

?二、單例模式

　　單例模式定義：保證一個類只有一個實例，并提供一個訪問它的全局訪問點。

　　不過在js中并無“類”這一說，單例模式的核心是確保只有一個實例，并提供全局訪問。我們經常會把全局變量當成單例來使用，例如這樣的形式：

　var d={};

　　不過這樣使用全局變量會很容易造成命名空間的污染。我們有必要盡量減少全局變量的使用，將污染降低到最低為止。

以下二種方法可以相對降低全局變量帶來的命名污染：

1、使用命名空間

　　最簡單的方式是使用對象字面量的形式：

var nameSpace={a:"jack",b:function(){} };

　　這里我們將a和b作為nameSpace的屬性，這樣可以減少變量和全局作用域碰面的機會。此外我們還可以動態的創建命名空間。

2、使用閉包來封裝私有變量

　　我們可以使用立即執行函數，來模擬塊級作用域，把變量封裝在閉包的內部，只暴露一些接口跟外界通信：

<button id="btn">click</button>

var demo=(function(){var name="jack",age=18;return {getInfo:function(){ return name+"-"+age; } }})();alert(demo.getInfo());//jack-18

　　惰性單例：是指只在需要的時候才創建對象的實例。比較實用。

下面是一個惰性單例的例子：

<button id="btn">click</button> <script>var creatediv=(function(){var div;return function(){if(!div){div=document.createElement("div");div.style.width="200px";div.style.height="200px";div.style.border="1px solid red";div.style.display="none";document.body.appendChild(div);}return div;}})();document.getElementById("btn").οnclick=function(){var show=creatediv();show.style.display="block";}; </script>

?

三、策略模式

四、代理模式

待續

轉載于:https://www.cnblogs.com/rain-null/p/7803005.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的js 设计模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。