認識一下JavaScrip中的超程式設計

华为云开发者联盟發表於2024-04-23
Java程式設計

本文分享自華為雲社群《超程式設計，使程式碼更具描述性、表達性和靈活性》，作者： 葉一一。

背景

去年下半年，我在微信書架里加入了許多技術書籍，各種類別的都有，斷斷續續的讀了一部分。

沒有計劃的閱讀，收效甚微。

新年伊始，我準備嘗試一下其他方式，比如閱讀周。每月抽出1~2個非連續周，完整閱讀一本書籍。

這個“玩法”雖然常見且板正，但是有效，已經堅持閱讀三個月。

4月份的閱讀計劃有兩本，《你不知道的JavaScrip》系列迎來收尾。

已讀完書籍：《架構簡潔之道》、《深入淺出的Node.js》、《你不知道的JavaScript（上卷）》、《你不知道的JavaScript（中卷）》。

當前閱讀周書籍：《你不知道的JavaScript（下卷）》。

超程式設計

函式名稱

程式中有多種方式可以表達一個函式，函式的“名稱”應該是什麼並非總是清晰無疑的。

更重要的是，我們需要確定函式的“名稱”是否就是它的name屬性（是的，函式有一個名為name的屬性），或者它是否指向其詞法繫結名稱，比如function bar(){..}中的bar。

name屬性是用於超程式設計目的的。

預設情況下函式的詞法名稱（如果有的話）也會被設為它的name屬性。實際上，ES5（和之前的）規範對這一行為並沒有正式要求。name屬性的設定是非標準的，但還是比較可靠的。而在ES6中這一點已經得到了標準化。

在ES6中，現在已經有了一組推導規則可以合理地為函式的name屬性賦值，即使這個函式並沒有詞法名稱可用。

比如：

var abc = function () {
  // ..
};

abc.name; // "abc"

下面是ES6中名稱推導（或者沒有名稱）的其他幾種形式：

(function(){ .. });                      // name:
(function*(){ .. });                     // name:
window.foo = function(){ .. };            // name:
class Awesome {
    constructor() { .. }                  // name: Awesome
    funny() { .. }                        // name: funny
}

var c = class Awesome { .. };             // name: Awesome
var o = {
    foo() { .. },                          // name: foo
    *bar() { .. },                        // name: bar
    baz: () => { .. },                    // name: baz
    bam: function(){ .. },               // name: bam
    get qux() { .. },                    // name: get qux
    set fuz() { .. },                    // name: set fuz
    ["b" + "iz"]:
      function(){ .. },                // name: biz
    [Symbol( "buz" )]:
      function(){ .. }                 // name: [buz]
};

var x = o.foo.bind( o );                 // name: bound foo
(function(){ .. }).bind( o );             // name: bound
export default function() { .. }     // name: default
var y = new Function();              // name: anonymous
var GeneratorFunction =
    function*(){}.  proto  .constructor;
var z = new GeneratorFunction();     // name: anonymous

預設情況下，name屬性不可寫，但可配置，也就是說如果需要的話，可使用Object. defineProperty(..)來手動修改。

元屬性

元屬性以屬性訪問的形式提供特殊的其他方法無法獲取的元資訊。

以new.target為例，關鍵字new用作屬性訪問的上下文。顯然，new本身並不是一個物件，因此這個功能很特殊。而在構造器呼叫（透過new觸發的函式/方法）內部使用new. target時，new成了一個虛擬上下文，使得new.target能夠指向呼叫new的目標構造器。

這個是超程式設計操作的一個明顯示例，因為它的目的是從構造器呼叫內部確定最初new的目標是什麼，通用地說就是用於內省（檢查型別/結構）或者靜態屬性訪問。

舉例來說，你可能需要在構造器內部根據是直接呼叫還是透過子類呼叫採取不同的動作：

class Parent {
  constructor() {
    if (new.target === Parent) {
      console.log('Parent instantiated');
    } else {
      console.log('A child instantiated');
    }
  }
}

class Child extends Parent {}

var a = new Parent();
// Parent instantiated

var b = new Child();
// A child instantiated

Parent類定義內部的constructor()實際上被給定了類的詞法名稱（Parent），即使語法暗示這個類是與構造器分立的實體。

公開符號

JavaScript預先定義了一些內建符號，稱為公開符號（Well-Known Symbol,WKS）。

定義這些符號主要是為了提供專門的元屬性，以便把這些元屬性暴露給JavaScript程式以獲取對JavaScript行為更多的控制。

Symbol.iterator

Symbol.iterator表示任意物件上的一個專門位置（屬性），語言機制自動在這個位置上尋找一個方法，這個方法構造一個迭代器來消耗這個物件的值。很多物件定義有這個符號的預設值。

然而，也可以透過定義Symbol.iterator屬性為任意物件值定義自己的迭代器邏輯，即使這會覆蓋預設的迭代器。這裡的超程式設計特性在於我們定義了一個行為特性，供JavaScript其他部分（也就是運算子和迴圈結構）在處理定義的物件時使用。

比如：

var arr = [4, 5, 6, 7, 8, 9];

for (var v of arr) {
  console.log(v);
}
// 4 5 6 7 8 9

// 定義一個只在奇數索引值產生值的迭代器
arr[Symbol.iterator] = function* () {
  var idx = 1;
  do {
    yield this[idx];
  } while ((idx += 2) < this.length);
};

for (var v of arr) {
  console.log(v);
}
// 5 7 9

Symbol.toStringTag與Symbol.hasInstance

最常見的一個超程式設計任務，就是在一個值上進行內省來找出它是什麼種類，這通常是為了確定其上適合執行何種運算。對於物件來說，最常用的內省技術是toString()和instanceof。

在ES6中，可以控制這些操作的行為特性：

function Foo(greeting) {
  this.greeting = greeting;
}

Foo.prototype[Symbol.toStringTag] = 'Foo';

Object.defineProperty(Foo, Symbol.hasInstance, {
  value: function (inst) {
    return inst.greeting == 'hello';
  },
});

var a = new Foo('hello'),
  b = new Foo('world');

b[Symbol.toStringTag] = 'cool';

a.toString(); // [object Foo]
String(b); // [object cool]
a instanceof Foo; // true

b instanceof Foo; // false

原型（或例項本身）的@@toStringTag符號指定了在[object ]字串化時使用的字串值。

@@hasInstance符號是在構造器函式上的一個方法，接受例項物件值，透過返回true或false來指示這個值是否可以被認為是一個例項。

Symbol.species

在建立Array的子類並想要定義繼承的方法（比如slice(..)）時使用哪一個構造器（是Array(..)還是自定義的子類）。預設情況下，呼叫Array子類例項上的slice(..)會建立這個子類的新例項

這個需求，可以透過覆蓋一個類的預設@@species定義來進行超程式設計：

class Cool {
  // 把@@species推遲到子類
  static get [Symbol.species]() {
    return this;
  }

  again() {
    return new this.constructor[Symbol.species]();
  }
}

class Fun extends Cool {}

class Awesome extends Cool {
  // 強制指定@@species為父構造器
  static get [Symbol.species]() {
    return Cool;
  }
}

var a = new Fun(),
  b = new Awesome(),
  c = a.again(),
  d = b.again();

c instanceof Fun; // true
d instanceof Awesome; // false
d instanceof Cool; // true

內建原生構造器上Symbol.species的預設行為是return this。在使用者類上沒有預設值，但是就像展示的那樣，這個行為特性很容易模擬。

如果需要定義生成新例項的方法，使用new this.constructor[Symbol.species](..)模式超程式設計，而不要硬編碼new this.constructor(..)或new XYZ(..)。然後繼承類就能夠自定義Symbol.species來控制由哪個構造器產生這些例項。

代理

ES6中新增的最明顯的超程式設計特性之一是Proxy（代理）特性。

代理是一種由你建立的特殊的物件，它“封裝”另一個普通物件——或者說擋在這個普通物件的前面。你可以在代理物件上註冊特殊的處理函式（也就是trap），代理上執行各種操作的時候會呼叫這個程式。這些處理函式除了把操作轉發給原始目標/被封裝物件之外，還有機會執行額外的邏輯。

你可以在代理上定義的trap處理函式的一個例子是get，當你試圖訪問物件屬性的時候，它攔截[[Get]]運算。

var obj = { a: 1 },
  handlers = {
    get(target, key, context) {
      // 注意：target === obj,
      // context === pobj
      console.log('accessing: ', key);
      return Reflect.get(target, key, context);
    },
  },
  pobj = new Proxy(obj, handlers);

obj.a;
// 1
pobj.a;
// accessing: a
// 1

我們在handlers（Proxy(..)的第二個引數）物件上宣告瞭一個get(..)處理函式命名方法，它接受一個target物件的引用（obj）、key屬性名("a")粗體文字以及self/接收者/代理（pobj）。

代理侷限性

可以在物件上執行的很廣泛的一組基本操作都可以透過這些超程式設計處理函式trap。但有一些操作是無法（至少現在）攔截的。

var obj = { a:1, b:2 },
handlers = { .. },
pobj = new Proxy( obj, handlers );
typeof obj;
String( obj );

obj + "";
obj == pobj;
obj === pobj

總結

我們來總結一下本篇的主要內容：

  • 在ES6之前，JavaScript已經有了不少的超程式設計功能，而ES6提供了幾個新特性，顯著提高了超程式設計能力。
  • 從匿名函式的函式名推導，到提供了構造器呼叫方式這樣的資訊的元屬性，你可以比過去更深入地檢視程式執行時的結構。透過公開符號可以覆蓋原本特性，比如物件到原生型別的型別轉換。代理可以攔截並自定義物件的各種底層操作，Reflect提供了工具來模擬它們。
  • 原著作者建議：首先應將重點放在瞭解這個語言的核心機制到底是如何工作的。而一旦你真正瞭解了JavaScript本身的運作機制，那麼就是開始使用這些強大的超程式設計能力進一步應用這個語言的時候了。

點選關注，第一時間瞭解華為雲新鮮技術~

相關文章