[JS奇怪的世界]No.65 我們的物件與其原型

前言

接下來要準備設定 Greeter 的物件,這樣子才能夠盡可能設定成類似 jQuery 的樣子,但是這需要一點訣竅。

我們的物件與其原型’

讓我們開啟上一章節的範例。

1
2
3
(function(global, $) {

}(window, jQuery));

我們希望在使用這個自己寫的框架時只需要打 G$就好,然後傳入姓名語言,大概就像這樣。

1
var a = G$(firstname, lastname, language);

那該如何撰寫像 jQuery 那樣呢?首先先設定函數吧。

1
2
3
4
5
(function(global, $) {
var Greetr = function(firstname, lastname, language) {

}
}(window, jQuery));

因為我們並不想要一直寫 new,而是希望它直接回傳結果,所以就要這樣寫。

1
2
3
4
5
(function(global, $) {
var Greetr = function(firstname, lastname, language) {
return new Greetr.init(firstname, lastname, language);
}
}(window, jQuery));

那這樣寫之後我們就不用再一直 new…new,所以沒問題就繼續往下寫。

1
2
3
4
5
6
7
8
9
10
11
(function(global, $) {
var Greetr = function(firstname, lastname, language) {
return new Greetr.init(firstname, lastname, language);
}
Greetr.init = function (firstname, lastname, language) {
var vm = this; // 避免 this 指向亂指
vm.firstname = firstname || 'Defalut';
vm.lastname = lastname || 'Defalut';
vm.language = language || 'en';
}
}(window, jQuery));

那原型部分呢?

1
2
3
4
5
6
7
8
9
10
11
12
13
(function(global, $) {
var Greetr = function(firstname, lastname, language) {
return new Greetr.init(firstname, lastname, language);
}
Greetr.prototype = {};
Greetr.init = function (firstname, lastname, language) {
var vm = this; // 避免 this 指向亂指
vm.firstname = firstname || 'Defalut';
vm.lastname = lastname || 'Defalut';
vm.language = language || 'en';
}
Greetr.init.prototype = Greetr.prototype;
}(window, jQuery));

Greetr.init.prototype = Greetr.prototype; 意旨都會指向 Greetr.prototype 作為原型鏈,那這樣就可以把屬性跟方法都放在 Greetr.prototype = {}

那接下來就要將函數連接上至全域環境,當然我們也不是透過打 Greetr 來呼叫,而是使用 G$() 來呼叫。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function(global, $) {
var Greetr = function(firstname, lastname, language) {
return new Greetr.init(firstname, lastname, language);
}
Greetr.prototype = {};
Greetr.init = function (firstname, lastname, language) {
var vm = this; // 避免 this 指向亂指
vm.firstname = firstname || 'Defalut';
vm.lastname = lastname || 'Defalut';
vm.language = language || 'en';
}
Greetr.init.prototype = Greetr.prototype;

global.Greetr = global.G$ = Greetr;
}(window, jQuery));

那接下來就可以試著去 all.js 中試著撰寫程式碼。

1
2
var g = G$('John', 'Doc', 'en');
console.log(g);

圖源

JavaScript 全攻略:克服 JS 奇怪的部分

0%