同系列友情連結:
1.設計模式之初體驗—精讀《JavaScript 設計模式》Addy Osmani著
3.Contructor(構造器)模式—精讀《JavaScript 設計模式》Addy Osmani著
有關類(Class)的要點
JavaScript 是一種無類語言,但是可以使用函式來模擬類。
最常用的實現方式是定義一個JavaScript 函式,然後使用 new關鍵字建立新物件。使用 this來定義物件的新屬性和方法,如下所示:
// 一個 Car 'class'
function Car(model){
this.model=model;
this.color='silver';
this.year="2012";
this.getInfo=function(){
return this.model+" "+this.year;
}
}
複製程式碼
然後可以像這樣使用我們上面定義的 car建構函式來例項化該物件:
var myCar=new Car("ford");
myCar.year="2010";
console.log(myCar.getInfo());
// 結果
// "ford 2010"
複製程式碼
欲瞭解更多使用 JavaScript 拉斯定義“類”的方法,請檢視斯托揚·斯蒂凡諾夫釋出的帖子三種定義JavaScript類的方法
下面彙總他的三種定義的 JavaScript 類的方法如下
// 1. using a function
// This is probably one of the most common ways.
// You define a normal JavaScript function and then
// create an object by using the new keyword. To define
// properties and methods for an object created using
// function(), you use the this keyword, as seen in the
// following example.
function Apple (type) {
this.type = type;
this.color = "red";
this.getInfo = getAppleInfo;
}
// anti-pattern! keep reading...
function getAppleInfo() {
return this.color + ' ' + this.type + ' apple';
}
// To instantiate an object using the Apple constructor
// function, set some properties and call methods you
// can do the following:
var apple = new Apple('macintosh');
apple.color = "reddish";
alert(apple.getInfo());
// result:'reddish macintosh apple'
// 1.1 Methods defined internally
// you can define your methods within
// the constructor function, like this:
function Apple (type) {
this.type = type;
this.color = "red";
this.getInfo = function() {
return this.color + ' ' + this.type + ' apple';
};
}
// 1.2 Methods added to the prototype
// The way to prevent pollution of the global namespace,
// you can define your methods within the constructor function, like this:
function Apple (type) {
this.type = type;
this.color = "red";
}
Apple.prototype.getInfo = function() {
return this.color + ' ' + this.type + ' apple';
};
// Again, you can use the new objects exactly
// the same way as in 1. and 1.1.
// 2. Using object literals
// Literals are shorter way to define objects
// and arrays in JavaScript. To create an empty
// object using you can do:
var o = {};
// instead of the "normal" way:
var o = new Object();
// For arrays you can do:
var a = [];
// instead of:
var a = new Array();
// So you can skip the class-like stuff and create an instance (object)
// immediately. Here's the same functionality as described in the previous
// examples, but using object literal syntax this time:
var apple = {
type: "macintosh",
color: "red",
getInfo: function () {
return this.color + ' ' + this.type + ' apple';
}
}
// In this case you don't need to (and cannot) create an instance of the class,
// it already exists. So you simply start using this instance.
apple.color = "reddish";
alert(apple.getInfo());
// Such an object is also sometimes called singleton.
// In "classical" languages such as Java, singleton means that
// you can have only one single instance of this class at any time,
// you cannot create more objects of the same class.
// In JavaScript (no classes, remember?) this concept makes no sense anymore
// since all objects are singletons to begin with.
// 3. Singleton using a function
// The third way presented in this article is a combination of the other
// two you already saw. You can use a function to define a singleton object.
// Here's the syntax:
var apple = new function() {
this.type = "macintosh";
this.color = "red";
this.getInfo = function () {
return this.color + ' ' + this.type + ' apple';
};
}
// So you see that this is very similar to 1.1. discussed above,
// but the way to use the object is exactly like in 2.
apple.color = "reddish";
alert(apple.getInfo());
// `new function(){...}` does two things at the same time:
// define a function (an anonymous constructor function) and
// invoke it with new. It might look a bit confusing
// if you're not used to it and it's not too common, but hey,
// it's an option, when you really want a constructor function that
// you'll use only once and there's no sense of giving it a name.
複製程式碼
23種設計模式
設計模式中比較著名的就是“四人組”提到的23種設計模式;
以下是原始表格(由艾麗絲·尼爾森在2004年總結):
總結:
今天分享了書中第八章 設計模式的分類,主要內容:
- JavaScript 中的 “類”
- JavaScript 中三種模擬類的實現方式
- 23種設計模式包含哪些?
- 23種設計模式的簡單描述