JavaScript >> Javascript 文檔 >  >> Tags >> object

在 JavaScript 中使用對象字面量的自定義類型(類)

上週,Jeremy Ashkenas(以 CoffeeScript 聞名)開始圍繞 JavaScript 的類語法展開一系列討論。 ECMAScript Harmony 計劃開設課程,並且該提案已經提出了一段時間。當然,JavaScript 從來沒有真正的類概念(這就是為什麼我稱它們為“類型”),當前的稻草人也不例外——它只是在當前的構造函數/原型定義方法之上創建了一些語法糖自定義類型。一個例子:

class Color {

  constructor(hex) {
    ...
  }

  public r = 1;
  public g = 1;
  public b = 1;

  copy(color) {
    ...
  }

  setRGB(r, g, b) {
    ...
  }

  setHSV(h, s, v) {
    ...
  }

}

這將代替定義單獨的構造函數和原型。上述脫糖劑為:

function Color(hex){
    ...
}


Color.prototype.r = 1;
Color.prototype.g = 1;
Color.prototype.b = 1;

Color.prototype.copy = function(color){
    ...
};

Color.prototype.setRGB = function(r,g,b){
    ...
};

Color.prototype.setHSV = function(h,s,v){
    ...
};

本質上,新類語法只是幫助您定義新類型的原型,而構造函數負責創建實例成員。

傑里米不喜歡它,因此想出了一個要點形式的替代建議。他的想法的核心是:使用熟悉的對象字面量語法定義新類型,只需少量語法糖,讓事情變得更容易。

class Color {

  constructor: function(hex) {
    ...
  },

  r: 1, g: 1, b: 1,

  copy: function(color) {
    ...
  },

  setRGB: function(r, g, b) {
    ...
  },

  setHSV: function(h, s, v) {
    ...
  }

}

Jeremy 的提議使用 class 看起來更接近對象字面量語法 關鍵字和類型名稱。許多關於要點的評論者都喜歡這個想法——我實際上不是其中之一,我認為提議的 Harmony 語法更加簡潔,並且以直接的方式實現了已知模式的糖化。

無論如何,Jeremy 的方法是能夠一步定義新的自定義類型。今天使用 JavaScript 做到這一點非常簡單。首先,你需要一個簡單的函數:

function type(details){
    details.constructor.prototype = details;
    return details.constructor;
}

這就是全部。基本用法:

var Color = type({
     constructor: function(hex) {
         ...
     },

     r: 1, g: 1, b: 1,

     copy: function(color) {
         ...
     },

     setRGB: function(r, g, b) {
         ...
     },

     setHSV: function(h, s, v) {
         ...
     }
});

var mycolor = new Color("ffffff");

該語法與 Jeremy 的語法略有不同,因為它遵循 ECMAScript 5 語法,但工作方式幾乎相同。理解這種方法的關鍵是理解 constructor 財產。你可能習慣訪問 constructor 從對象實例中獲取創建對象的函數。但是,constructor 實際上是一個原型屬性,由所有實例共享。對於從頭開始創建的任何給定函數:

function f(){}
console.log(f === f.prototype.constructor);   //true

所以基本上,type() 函數接受傳入的對象並查找 constructor 財產。一開始,details.constructor.prototype 有它的默認值。該函數用 details 覆蓋原型 對象本身(它已經有對 constructor 的適當引用 )。然後,它簡單地返回現在完全形成的構造函數。您可以使用 new 開始使用返回的構造函數 馬上。

代替 Harmony 的新語法,我很快就喜歡上了這種方法。使用單個對象字面量既快速又簡單,當然,現在可以在所有瀏覽器中使用。您還可以通過多種方式修改 type() 以便支持繼承和混合等內容,具體取決於您的用例。

最後,我期待有一些語法糖來在 JavaScript 中定義自定義類型。我們與過於冗長的作文陳述鬥爭了太久,而那些使用基於類的語言的人則看著我們的肩膀笑了起來。我,首先,歡迎我們的新和諧霸主。

更新(2011 年 11 月 4 日): 修復 Harmony 示例。


Tutorial JavaScript 教程
  1. 沒有 http、https、ftp 的 url 的正則表達式

  2. 用符號隱藏 JavaScript 類中的細節

  3. 像你 5 歲一樣解釋 JavaScript 中的回調函數

  4. JavaScript 的 map() 方法指南

  5. 鍊式 AJAX 選擇

  6. 使用 Okta 和 Stencil 將身份驗證添加到您的 PWA

  7. Babel 不轉譯箭頭函數(Webpack)

  1. 使用 elem.scrollIntoView 定義元素應滾動到的位置

  2. 殭屍射手

  3. 玩正弦波

  4. 我如何為我的學校克隆 Chatible

  5. JavaScript 中的 null 和 undefined 有什麼區別?

  6. 我給了古騰堡第二次機會。這是我學到的。

  7. 您自己的基於屬性的測試框架 - 第 1 部分:生成器

  1. 操場:Asp.Net Core SignalR

  2. 在 9 分鐘內使用 Husky、ESLint、Prettier 在 Git Commit 上自動格式化您的代碼

  3. 在 Node、Express 和 MongoDB 中具有身份驗證的博客站點 API

  4. 在 Next.js 中使用 Bootstrap + 免費啟動器