JavaScript Creating 对象

  可通过多种方法在 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
};
时间: 2024-08-24 03:39:05

JavaScript Creating 对象的相关文章

JavaScript - Array对象的使用 及 数组排序 sort

<html> <head> <head> <body> <script language="javascript"> // Array对象 // 第一种构造方法 var arr = new Array(); alert(arr.length); arr[0] = 520 ; arr[1] = "wjp" ; alert(arr.length); // 第二种构造方法 // Array(4) ; // 第三种

JavaScript原生对象属性和方法详解——Array对象 转载

length 设置或返回 数组中元素的数目. 注意:设置 length 属性可改变数组的大小.如果设置的值比其当前值小,数组将被截断,其尾部的元素将丢失.如果设置的值比它的当前值大,数组将增大,新的元素被添加到数组的尾部,它们的值为 undefined.所以length不一定代表数组的元素个数. var arr = new Array(3) arr[0] = "John" arr[1] = "Andy" arr[2] = "Wendy" cons

JavaScript的对象——灵活与危险

没有哪种数据结构比JavaScript的对象更简单灵活了.作为一个弱动态类型语言,JavaScript对对象的属性没有任何约束, 这带来的结果就是,在使用的时候很爽,想加啥属性直接加上去就行了,根本没有类或模板的限制, 想读啥属性直接"点"出来就行了,写出来那是相当简洁:然而这样的代码在运行的时候呢-- JavaScript这种灵活性最大的一个问题也是没有约束.比如一个网店系统有两个部分,一部分产生订单对象, 另一部分拿到订单对象来展示.咱们前端程序员自然是干后面展示那部分事儿的,比如

奔跑吧,我的JavaScript(3)---JavaScript浏览器对象

Window对象 1.是BOM的核心,window对象指向当前的浏览器窗口,最高层对象之一. 2.所有JavaScript全局对象,函数以及变量均自动成为window对象成员 3.全局变量是window对象的属性 4.全局函数是window对象的方法 5.window尺寸 window.innerHright/window.innerWidth,浏览器窗口的内部高度/宽度 6.window方法 window.open()       打开新窗口 window.close()      关闭窗口

JQuery $.each遍历JavaScript数组对象实例

查看一个简单的jQuery的例子来遍历一个JavaScript数组对象. var json = [ {"id":"1","tagName":"apple"}, {"id":"2","tagName":"orange"}, {"id":"3","tagName":"banana&q

【温故而知新-Javascript】对象

1 创建对象 Javascript 支持对象的概率.有多种方法可以用来创建对象. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Javascript Object </title> </head> <body> <script> var myData = new Ob

JavaScript实现对象的深度克隆【简洁】【分享】

JavaScript实现对象的深度克隆 代码实现如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>clone</title> 6 7 <script type="text/javascript"> 8 //对象深度克隆方法 9 10 11 ////

javascript获取对象直接量中的属性和属性值

javascript获取对象直接量中的属性和属性值:所谓的对象直接量简单来说就是,由大括号包裹的键值对列表,例如: var antzone={ webName:"蚂蚁部落", address:"青岛市南区", age:2 } 下面介绍一下如何获取对象直接量中的属性和属性值,代码如下: var antzone={ webName:"蚂蚁部落", address:"青岛市南区", age:2 } for(var prop in a

JavaScript Number 对象

JavaScript Number 对象 JavaScript 只有一种数字类型. 可以使用也可以不使用小数点来书写数字. JavaScript 数字 JavaScript 数字可以使用也可以不使用小数点来书写: 实例 var pi=3.14;    // 使用小数点var x=34;       // 不使用小数点 极大或极小的数字可通过科学(指数)计数法来写: 实例 var y=123e5;    // 12300000var z=123e-5;   // 0.00123 所有 JavaSc