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

前言

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

我們的物件與其原型’

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

(function(global, $) {

}(window, jQuery));

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

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 中試著撰寫程式碼。

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

圖源

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