创建对象

一个对象就是一系列属性的集合,一个属性包含一个名字(key)和一个值(value)。

创建对象

很多有关于JavaScript书在介绍对象创建的方法时,主要有:

使用对象字面量创建对象(key-value)
使用new创建对象
使用Object.create()创建对象
使用函数创建对象
使用原型创建对象

使用对象字面量创建对象

对象字面量是创建对象最简单的一种形式,目的是在于简化创建包含大量属性的对象的过程。对象字面量由若干属性名(keys)和属性值(values)成对组成的映射表,key和value中间使用冒号(:)分隔,每对key/value之间使用逗号(,)分隔,整个映射表用花括号({})括起来。

1
var obj = {
    property_1:   value_1,   // property_# 可能是一个标识符...
    2:            value_2,   // 或者是一个数字
    // ...,
    "property n": value_n    // 或是一个字符串};

这里obj是创建的对象的名称,每一个property_i是一个标识符(可以是一个名称、数字或字符串字面量),并且每个value_i是一个其值,并且将这个值赋予给property_i。来看一个具体实例:

1
var girl = {    'name': '欣欣',    'age' : 18,    'height': 175,    'weight': 45}

这个示例创建了一个名为girl的对象,对象有四个属性name、age、height和weight。这四个属性对应有一个属性值。

使用对象字面量创建对象时,如果留空其花括号({}),则可以定义只包含默认属性和方法的对象。如:

1
var obj = {}

使用这种方式创建的对象时,可以通过点(.),也就是obj.key给对象obj创建对象属性,并且赋予对象的属性值。另外也可以通过方括号([]),也就是obj[‘key’]给对象obj创建对象属性,并且赋予对象的属性值。如下面的示例:

1
var girl = {};
girl.name = '欣欣';
girl.age = 18;
girl['height'] = 175;
girl['weight'] = 45;

此时在Chrome中打印girl对象时,输出的结果如下所示:

1
console.log(girl);//Object {name: "欣欣", age: 18, height: 175, weight: 45}

使用new创建对象

使用new操作符后跟Object构造函数(有关于构造函数,后面再讲)也可以创建对象:

1
var obj = new Object(); // 和 obj = {}相同

虽然初始状态下,obj是一个空对象,但在JavaScript中可以很方便地动态添加和使用成员,所以我们可以不断加入成员变量和方法。如:

1
var girl = new Object();
girl['name'] = '欣欣';
girl['age'] = 18;
girl['height'] = 175;
girl['weight'] = 45;

使用Object.create()创建对象

对象也可以用Object.create()方法创建。该方法非常有用,因为它允许你为创建的对象选择其原型对象,而不用定义一个构造函数。

1
Object.create()方法创建一个拥有指定原型和若干个指定属性的对象。
Object.create(proto, [ propertiesObject ])

Object.create()方法创建一个对象,其接受两个参数,其中第一个参数是这个对象的原型对象proto;第二个是一个可选参数,用以对对象的属性做进一步描述。这个方法使用很简单:

1
var obj1 = Object.create({
    x: 1,
    y: 2});    
    //对象obj1继承了属性x和yvar obj2 = Object.create(null);    
    //对象obj2没有原型

如果 proto 参数不是 null 或一个对象值,则抛出一个 TypeError 异常。

使用函数创建对象

在实际使用当中,字面量创建对象虽然很有用,但是它并不能满足我们的所有需求,我们希望能够和其他后台语言一样创建一个类,然后声明类的实例就能够多次使用,而不用每次使用的时候都要重新创建它。

因为JavaScript没有类,一般都是使用函数来定义一个类似其他语言中的类格式,比如:

1
function Person() {
    this.name = "mary"; // 为这个类添加一个成员变量name,并为这个成员变量赋默认值
    this.age = 5;    this.sayHello = function () {
        console.log(this.name + " : " + this.age);
    };
}

定义好类之后,我们就可以像下面这样创建和使用对象:

1
var person1 = new Person();
person1.name = 'Tom';
person1.age = 20;
person1.sayHello(); // Tom : 20var person2 = new Person();
person2.name = 'W3cplus';
person2.age = 5;
person2.sayHello(); // W3cplus : 5

Person()函数不是用来被调用的,它是用来被new用的。

通过原型创建对象

这种方法比较前几种方法来说算是最为复杂,最为高级的方法。这里还涉及到封装的一些知识(有关于这些后续学习到了再记录)。这里简单看看如何通过原型创建对象。

首先像函数方法创建对象一样,先定义一个函数:

1
function Person() {
    this.name = "W3cplus";    this.age = 5;    this.walk = function () {
        console.log("一个前端网站...");
    };
}

然后在外部可以扩允成员:

//添加成员方法Person.prototype.sayHello = function () {
console.log(“hello”);
};//也可以添加成员属性,Person.prototype.height = 100;

一方面,原型可以扩充原有类的功能(特别是添加有用方法),也可以像下面这样写:

1
function Person() { }

Person.prototype.name = "W3cplus";
Person.prototype.age = 5;
Person.prototype.walk = function () {
    console.log("一个前端网站...");
};

Person.prototype.sayHello = function () {
    console.log("hello");
};
Person.prototype.height = 100;

属性访问

对象属性访问一般有两种方法,第一种是使用点(.)表示法,这也是最常用的一种方法,也是很多面向对象语言中通用的语法。第二种方法还可以使用中括号([])表示法来访问对象的属性。在使用中括号语法时,应该将要访问的属性以字符串的形式放在中括号中。如下:

person[‘name’];person.name;

从功能上来说,上面两种方法访问对象属性没有任何区别。但中括号语法的主要优点有两个:

可能通过变量访问属性,如下:

1
var propertyName = 'name';
person[propertyName];

另外一个优点是,如果属性名中包含了会导致语法错误的字符或者属性名使用的是关键字或保留字,可以使用中括号访问属性,如下:

person[‘first name’];

一般情况之下,除非必须使用亦是来访问对象属性,否则建议使用点(.)的方法来访问对象属性。