在類型腳本中的類裝飾器

Question

我想了解類裝飾器中類裝飾器如何在我們希望替換構造器時工作。我已經看到了這個演示：

const log = <T>(originalConstructor: new(...args: any[]) => T) => { 
    function newConstructor(... args) { 
     console.log("Arguments: ", args.join(", ")); 
     new originalConstructor(args); 
    } 
    newConstructor.prototype = originalConstructor.prototype; 
    return newConstructor; 
} 

@log 
class Pet { 
    constructor(name: string, age: number) {} 
} 

new Pet("Azor", 12); 
//Arguments: Azor, 12 

一切都明白了，但此行：

newConstructor.prototype = originalConstructor.prototype; 

我們爲什麼這樣做？

Answer 1

的類，如：

class Pet { 
    constructor(name: string, age: number) {} 
    dosomething() { 
     console.log("Something..."); 
    } 
} 

目標ES5時被編譯成函數：

var Pet = (function() { 
    function Pet(name, age) { 
    } 
    Pet.prototype.dosomething = function() { 
     console.log("Something..."); 
    }; 
    return Pet; 
}()); 

，當我們使用的功能來定義類，你似乎可以。這些方法被添加到函數的原型中。

這意味着，如果你要創建一個新的構造（新功能），你需要所有從舊的對象的方法（原型）複製：

function logClass(target: any) { 

    // save a reference to the original constructor 
    const original = target; 

    // a utility function to generate instances of a class 
    function construct(constructor: any, args: any[]) { 
    const c: any = function() { 
     return constructor.apply(this, args); 
    }; 
    c.prototype = constructor.prototype; 
    return new c(); 
    } 

    // the new constructor behaviour 
    const newConstructor: any = function (...args: any[]) { 
    console.log("New: " + original.name); 
    return construct(original, args); 
    }; 

    // copy prototype so intanceof operator still works 
    newConstructor.prototype = original.prototype; 

    // return new constructor (will override original) 
    return newConstructor; 
} 

您可以瞭解更多的"Decorators & metadata reflection in TypeScript: From Novice to Expert (Part I)"