JavaScript学习笔记：创建对象

作者：大漠 日期：2016-03-25 点击：2099
JavaScript
JavaScript学习笔记
对象
Object

对象是JavaScript的基本数据类型。在JavaScript中除了字符串、数字、true、false、null和undefined之外的值都是对象。所以，学习JavaScript不把对象学习明白要继续往下学习就非常的困难。从今天开始进入对象的学习中。

概述

在JavaScript中对象是一种基本的数据类型，在数据结构上是一种散列表，可以看作是属性的无序集合，除了原始值其他一切都是对象。可通过属性名访问这些值，而属性名可以是包含空字符在内的任意字符串。简单点说，一个对象就是一系列属性的集合，一个属性包含一个名字(key)和一个值(value)。

理解什么是JavaScript对象，你可以这样来想。在JavaScript中，一个对象就是一个具有属性的特体。就拿你看到的一妹子，这妹子就是一个对象，她有自己的属性。比如妹子身高，年龄，姓名等。同样，在JavaScript中，也可以用属性来给对象定义它的特征。

创建对象

既然要学习对象，那得先要有一个对象，这样问题就来了，JavaScript中对象要怎么创建呢？接下来就来看看在JavaScript中如何创建对象。

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

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

使用对象字面量创建对象

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

通过对象字面量创建对象的语法如下：

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

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

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

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

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

var obj = {}

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

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

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

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

使用new创建对象

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

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

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

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

使用Object.create()创建对象

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

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

Object.create(proto, [ propertiesObject ])

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

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

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

有关于Object.create()方法更多的示例可以点击这里进行了解。

使用函数创建对象

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

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

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

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

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

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

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

通过原型创建对象

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

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

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

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

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

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

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;

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

可能通过变量访问属性，如下：

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

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

person['first name'];

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

总结

对象是JavaScript的基本数据类型，如果要更好的往下学习JavaScript相关的知识，很有必要先把对象整明白。这篇主要介绍了几种创建对象的方法。较为简单的是通过字面量({})和new Object()方法创建，但这两种方法创建的对象复用性较差；使用Object.create()创建对象时不需要定义一个构造函数就允许你在对象中选择其原型对象。除了这几种方法还可以使用函数和原型创建对象，而这两种方法相对来说可复用性强，只是使用较为复杂。

初学者学习笔记，如有不对，还希望高手指点。如有造成误解，还希望多多谅解。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

如需转载，烦请注明出处：http://www.w3cplus.com/javascript/create-an-object-methods.html

返回顶部