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

前言

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

我們的物件與其原型’

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

1
2
3

(function(global, $) {

}(window, jQuery));

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

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

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

(function(global, $) {
  var Greetr = function(firstname, lastname, language) {

  }
}(window, jQuery));

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

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

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

(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));

那原型部分呢?

(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$() 來呼叫。

(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 奇怪的部分

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

前言

我們的物件與其原型’

圖源

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

分享這篇文章

留言

前言

我們的物件與其原型’

圖源

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

[JS奇怪的世界]No.? 閉包番外篇

[JS奇怪的世界]No.68 JavaScript奇怪的部分

[JS奇怪的世界]No.67 增加jQuery的支援

[JS奇怪的世界]No.66 屬性與可鏈結方法

分享這篇文章

留言