@ccclass 這是什麼！TypeScirpt 類裝飾器！淺談它在 cocos creator 作了什麼！

點擊上方藍字關注我吧

在 cocos creator - typescirpt 項目中，添加一個類(class)時，前面會有一個 @ccclass，這個是什麼呢？

類裝飾器

裝飾器是一種特殊類型的聲明，它可以被附加到類聲明，方法， 訪問符，屬性或參數上。裝飾器使用 @expression 這種形式，expression 求值後必須爲一個函數，它會在運行時被調用，被裝飾的聲明信息作爲參數傳入。

cocos creator 中的 @ccclass 是附加在class以前的，是一個類裝飾器。類裝飾器應用於類構造函數，能夠用來監視，修改或替換類定義。

declare type ClassDecorator = <TFunction extends Function>(target: TFunction) => TFunction | void;

上面是類裝飾器的定義，target 就是該類的構造函數。若是類裝飾器返回一個值，它會使用提供的構造函數來替換類的聲明。若是你要返回一個新的構造函數，你必須注意處理好原來的原型鏈。 在運行時的裝飾器調用邏輯中不會爲你作這些。

能夠一塊兒看下面的例子

const decorator: ClassDecorator = function (target: Function) {
    console.log('調用裝飾器')
    const oldGreet = target.prototype.greet
    target.prototype.greet = function () {
        return "歡迎關注 " + oldGreet.call(this);
    }
}

console.log('定義類')
@decorator
class Greeter {
    greeting: string;
    constructor(message: string) {
        console.log('Greeter constructor')
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}
console.log('實例化類')
let greeter = new Greeter("白玉無冰");
console.log(greeter.greet())

輸出結果

定義類
調用裝飾器
實例化類
Greeter constructor
歡迎關注 Hello, 白玉無冰

能夠看到，在聲明類前，裝飾器就對類進行修改。

@ccclass

接着，一塊兒看下ccclass 裏作了什麼。

function checkCtorArgument (decorate) {
    return function (target) {
        if (typeof target === 'function') {
            // no parameter, target is ctor
            return decorate(target);
        }
        return function (ctor) {
            return decorate(ctor, target);
        };
    };
}

var ccclass = checkCtorArgument(function (ctor, name) {
    var base = js.getSuper(ctor);
    if (base === Object) {
        base = null;
    }

    var proto = {
        name,
        extends: base,
        ctor,
        __ES6__: true,
    };

    // mixi ...

    var res = cc.Class(proto);

    // validate methods
    // ...

    return res;
});

能夠看到，ccclass 採用了函數柯里化的寫法，ccclass能夠接收一個或零個參數，經過第一個參數的類型判斷，來傳給真正的類裝飾器 function (ctor, name) {//...}。

// define a CCClass, omit the name
@ccclass
class NewScript extends cc.Component {
    // ...
}
  
// define a CCClass with a name
@ccclass('LoginData')
class LoginData {
    // ...
}

在類裝飾器裏，調用 cc.Class   建立新的構造函數，替換原來的構造函數，並對原型鏈作了處理。

結語

cocos creator 中的 @ccclass 裏的實現，原理大體上是把ts中定義類轉成js中cc.class的實現寫法。

以上是本身的淺談，若有錯誤的地方，歡迎斧正。

有你想看的 精彩

在 2.0.9 以前版本使用 tween！
微信小遊戲流量主廣告接入指南！
cocos creator | 殘影幻影拖尾效果

不只要提高掙錢能力，更要拓展掙錢途徑

本文分享自微信公衆號 - 白玉無冰（lamyoung-com）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。