JavaScript 入门教程之五 -- Objects

JavaScript 的 variables 变量是用来包含数据的容器。object 同样是变量，但是包含了多个数据。

一个 object 是一组使用 name:value 模式定义的数据集合，大括号{} 内部定义数据，数据间使用逗号, 分隔，注意大括号结尾的分号;：

var person = {
    name: "marco", age: 20,
    like: "basketball", height: 170
};

这些数据叫做 properties：


property	property value
name	marco
age	20
like	basketball
height	170

object 初始化语法可以写在一行，也可以写在多行。以下两种写法都是一样的：

var John = {name: "John", age: 25};

var John = {
  name: "John",
  age: 25
};

JavaScript 的 object 就是一组有命名的数据的容器。

有两种方法访问 object 的 properties：

objectName.propertyName
//or
objectName['propertyName']

使用上面的示例访问 properties，以下两种结果是一样的：

var x = person.age;
var y = person['age'];

使用 JavaScript 内建的 length property 可以得到 property 或 string 包含的字符个数:

var a = person.name.length;

method

object method 就是一个定义了 function 的 property，使用 object method 的语法为：

objectName.methodName()

我们前面多次使用 document.write() 来输出内容到网页，实际上 write() function 就是 document object 的一个 method。

定义一个 method 的语法如下：

methodName = function() { code lines }

在上面的示例中给 object 加入一个 method：

var person = {
    name: "marco", age: 20,
    like: "basketball", height: 62,
    test: function() {
        alert("method");
    }
};

person.test();

使用 method 的方法和 properties 一样，需要加上小括号()。

The Object Constructor 构造器

上一节我们学习了如何建立 object，例如：

var person = {
name: "John", age: 42, favColor: "green"
};

以上的写法一次只能创建一个 object，那么如何设置一种 object type 用来创建多个统一类型的 objects 呢？

标准的方法是使用 constructor function 构造器来定义一个 object type：

function person(name, age, color) {
  this.name = name;
  this.age = age;
  this.favColor = color;
}

以上就是一个 constructor function，接收传入数据来赋值给 object properties。关键词 this 表示当前 object 本身。

当我们定义了一个 object constructor，就可以使用关键词 new 来新建一个 object：

var p1 = new person("marco", 25, "blue");
document.write(p1.name);

//output:
//marco

p1 就是 person 类型的 object，它的 properties 就是对应传入的数据。

同样的方法，可以在 object constructor 中定义 method：

    function person(name, age, color) {
        this.name = name;
        this.age = age;
        this.favColor = color;
        this.changeName = function(name) {
            this.name = name;
        }
    }

    var p1 = new person("marco", 25, "blue");
    p1.changeName("john");
    document.write(p1.name);

以上示例中，我们定义了一个 changeName method，它有一个参数 name 用来赋值给 object 的 propertiy name。

也可以在 object constructor function 外部定义 method：

function person(name, age, color) {
    this.name = name;
    this.age = age;
    this.yearOfBirth = bornyear;
}

function bornyear() {
    return 2020 - this.age;
}

var p1 = new person("marco", 25);
document.write(p1.yearOfBirth());

以上示例中，我们给 property yearOfBirth 赋值为 bornyear。bornyear function 在外部定义，this 关键词可以来访问 person 的 properties，因为 bornyear 复制给了 person 的一个 property。

注意当将一个 function 赋值给 object 时不需要写小括号()。

通过 object property name 来调用构造器定义的 method，注意不是外部 function 的名称。

标签：无

method

The Object Constructor 构造器

你的评论