使用 cc.Class 声明类型

cc.Class是一个很常用的 API，用于声明 Cocos Creator 中的类，为了方便区分，我们把使用 cc.Class 声明的类叫做CCClass。

定义 CCClass

调用cc.Class，传入一个原型对象，在原型对象中以键值对的形式设定所需的类型参数，就能创建出所需要的类。

var Sprite = cc.Class({
    name: "sprite"
});@H_502_19@ 
以上代码用 cc.Class 创建了一个类型，并且赋给了Sprite变量。同时还将类名设为 "sprite"，类名用于序列化，一般可以省略。
 
实例化Sprite变量保存的是一个 JavaScript 构造函数，可以直接 new 出一个对象：
 
var obj = new Sprite();
 
判断类型需要做类型判断时，可以用 JavaScript 原生的instanceof：
 
cc.log(obj instanceof Sprite);       // true
 
构造函数使用ctor声明构造函数：
 
var Sprite = cc.Class({
    ctor: function () {
        cc.log(this instanceof Sprite);    // true
    }
});
 
 
 
Component 是特殊的 CCClass，不能定义构造函数，它的构造职能可由onLoad方法代替。
 
 
实例方法
 
var Sprite = cc.Class({
    // 声明一个名叫 "print" 的实例方法
    print: function () { }
});@H_502_19@ 
继承extends实现继承：
 
// 父类
var Shape = cc.Class();

// 子类
var Rect = cc.Class({
    extends: Shape
});
 
父构造函数
 
继承后，CCClass 会统一自动调用父构造函数，你不需要显式调用。
 
var Shape = cc.Class({
    ctor: function () {
        cc.log("Shape");    // 实例化时，父构造函数会自动调用，
    }
});

var Rect = cc.Class({
    extends: Shape
});

var Square = cc.Class({
    extends: Rect,ctor: "Square");   // 再调用子构造函数
    }
});

var square = new Square();@H_502_19@ 
以上代码将依次输出 "Shape" 和 "Square"。
 
声明属性通过在组件脚本中声明属性，我们可以将脚本组件中的字段可视化地展示在属性检查器中，从而方便地在场景中调整属性值。
 
要声明属性，仅需要在 cc.Class 定义的properties字段中，填写属性名字和属性参数即可，如：
 
cc.Class({
    extends: cc.Component,properties: {
        userID: 20,userName: "Foobar"
    }
});
 
这时候，你可以在属性检查器中看到你刚刚定义的两个属性：
 
 
在 Cocos Creator 中，我们提供两种形式的属性声明方法：
 
简单声明在多数情况下，我们都可以使用简单声明。
 
 
 
当声明的属性为基本 JavaScript 类型时，可以直接赋予默认值：
properties: {
      height: // number
      type: "actor",136); font-style: italic;">// string
      loaded: false,136); font-style: italic;">// boolean 
      target: null,136); font-style: italic;">// object
  }
 
 
当声明的属性具备类型时（如：cc.Node，cc.Vec2等），可以在声明处填写他们的构造函数来完成声明，如：
properties: {
      target: cc.Node,pos: cc.Vec2,}
 
 
当声明属性的类型继承自cc.ValueType时（如：cc.Vec2，cc.Color或cc.Rect），除了上面的构造函数，还可以直接使用实例作为默认值：
properties: {
      pos: new cc.Vec2(10,20),color: new cc.Color(255,128);">128),}
 
 
当声明属性是一个数组时，可以在声明处填写他们的类型或构造函数来完成声明，如：
properties: {
      any: [],136); font-style: italic;">// 不定义具体类型的数组
      bools: [cc.Boolean],strings: [cc.String],floats: [cc.Float],ints: [cc.Integer],values: [cc.Vec2],nodes: [cc.Node],frames: [cc.SpriteFrame],}
 
 
注意：除了以上几种情况，其他类型我们都需要使用完整声明的方式来进行书写。
 
完整声明有些情况下，我们需要为属性声明添加参数，这些参数控制了属性在属性检查器中的显示方式，以及属性在场景序列化过程中的行为。例如：
 
properties: {
    score: {
        default: 0,displayName: "Score (player)",tooltip: "The score of player",}
}
 
以上代码为score属性设置了三个参数default,displayName和tooltip。这几个参数分别指定了score的默认值为 0，在属性检查器里，其属性名将显示为：“Score (player)”，并且当鼠标移到参数上时，显示对应的 Tooltip。
 
下面是常用参数：
 
 
 
default: 设置属性的默认值，这个默认值仅在组件第一次添加到节点上时才会用到
 
 
type: 限定属性的数据类型，详见CCClass 进阶参考：type 参数
 
 
visible: 设为 false 则不在属性检查器面板中显示该属性
 
 
serializable: 设为 false 则不序列化（保存）该属性
 
 
displayName: 在属性检查器面板中显示成指定名字
 
 
tooltip: 在属性检查器面板中添加属性的 Tooltip
 
 
更多的属性参数，可阅读属性参数
 
数组声明
 
数组的 default 必须设置为[]，如果要在属性检查器中编辑，还需要设置 type 为构造函数，枚举，或者cc.Integer，cc.Float，cc.Boolean和cc.String。
 
properties: {
    names: {
        default: [],type: [cc.String]   // 用 type 指定数组的每个元素都是字符串类型
    },enemies: {
        // type 同样写成数组，提高代码可读性
    },}@H_502_19@ 
get/set 声明在属性中设置了 get 或 set 以后，访问属性的时候，就能触发预定义的 get 或 set 方法。定义方法如下：
 
properties: {
    width: {
        get: function () {
            return this._width;
        },set: function (value) {
            this._width = value;
        }
    }
}@H_502_19@ 
 
 
如果你只定义 get 方法，那相当于属性只读。
 
 原文链接：https://www.f2er.com/cocos2dx/339017.html