JavaScript Creating 对象

Posted 2020-08-09

　　可通过多种方法在 javascript 中创建你自己的对象。可以直接实例化Object 对象 (JavaScript)，然后添加你自己的属性和方法。或者可以使用对象文本表示法来定义你的对象。还可使用构造函数来定义对象。

示例

下面的代码演示如何实例化对象和添加一些属性。在此情况下，只有 pasta 对象具有 grain、width 和 shape 属性。

var pasta = new Object();
pasta.grain = "wheat";
pasta.width = 0.5;
pasta.shape = "round";
pasta.getShape = function() { 
    return this.shape; 
};
document.write(pasta.grain);
document.write("<br/>");
document.write(pasta.getShape());

// Output:
// wheat
// round

对象文本

只想创建一个对象实例时，还可以使用对象文本表示法。下面的代码演示如何通过使用对象文本表示法来实例化对象。

var pasta = {
    grain: "wheat",
    width: 0.5,
    shape: "round"
};

下面描述的功能仅在 Microsoft Edge 中受支持。

在 Microsoft Edge 中，可以使用速记语法来创建对象文本。

var key = ‘a‘;
var value = 5;

// Older version
var obj1 = {
    key: key,
    value: value
};

// Edge mode
var obj2 = {key, value};

console.log(obj2);

// Output:
// [object Object] {key: "a", value: 5}

以下示例演示如何使用速记语法来定义对象文本中的方法。

// Older versions
var obj = {
    method1: function() {},
    method2: function() {}
};

// Edge mode
var obj = {
    method1() {},
    method2() {}
};

还可以在 Microsoft Edge 的对象文本中动态设置属性名称。下面的代码示例使用 set 语法以动态方式创建对象的属性名称。

var propName = "prop_42";

var obj = {
    value: 0,
    set [propName](v) {
        this.value = v;
    }
}

console.log(obj.value);
// Runs the setter property.
obj.prop_42 = 777;
console.log(obj.value);

// Output:
// 0
// 777

下面的代码示例使用 get 语法以动态方式创建对象的属性名称。

var propName = "prop_42";

var obj = {
    get [propName]() {
        return 777;
    }
}

console.log(obj.prop_42);

// Output:
// 777

下面的代码示例通过使用箭头函数语法将 42 追加到属性名称来创建计算属性。

var obj = {
    [ ‘prop_‘ + (() => 42)() ]: 42
};