首页 > 编程笔记 > JavaScript笔记 阅读：22

JavaScript对象的定义和使用（非常详细）

在 JavaScript 中，有各种不同类型的对象。比如数字对象、布尔值对象、字符串对象、时间对象、函数对象、数组对象等，它们都继承于 Object 类型。

JavaScript 将对象分为三类：内置对象、宿主对象和自定义对象：
本节主要介绍自定义对象，也就是开发中需要开发人员自己创建的对象。

JavaScript对象的定义

JavaScript 语言提供了两种定义对象的方式：new object() 和对象字面量。虽然定义对象的方法很多，看上去语法差异也很大，但实际上它们都是大同小异的。下面分别介绍这两种定义对象的方式。

1) 通过new关键字定义对象

在 JavaScript 中，可以使用 new 关键字和 Object 构造函数来显式地定义实例对象，语法格式如下： 
new Object();
语法中通过 new 来执行 Object 函数，此时 Object 称为构造函数，此时会返回对应的实例对象。

这样解释可能有些晦涩，通过如下代码来具体讲解： 
var obj = new Object();
这段代码通过“new Object()”产生并返回一个实例对象，使用 obj 来接收这个实例对象，后面我们就可以通过 obj 来访问该实例对象。

向对象内部增加属性，可以使用中括号“[]”操作符或者点“.”操作符。例如，给创建的 obj 对象添加 name 和 age 属性并赋值如下： 
obj.name = "C语言中文网";
obj["age"] = 9;
console.log(obj);
代码通过点“.”操作符向 obj 对象添加了 name 属性，其值为“C语言中文网”。通过中括号“[]”操作符向 obj 对象添加了 age 属性，其值为 9。在控制台输出此时的 obj 对象，结果为：
{ name: 'C语言中文网', age: 9 }

需要特别注意的是，一个对象中不能存在两个同名的属性，如果出现同名属性，后声明的属性会覆盖同名属性的值。例如，在 obj 对象中再次添加 age 属性: 
obj.age = 6;
在实例对象 obj 中，重复声明了两次 age 属性。根据前面所述，后声明的属性会覆盖同名属性的值，因此 obj 对象中的属性 age 对应的值是 6。运行代码，查看控制台，输出 obj 对象，结果为： 
{ name: 'C语言中文网', age: 6 }

我们除了为对象设置属性和属性值，还可以为对象设置函数，示例代码如下： 
obj.eat = function () {
    console.log(this.name + "在吃饭");
}

obj.run = function () {
    console.log(this.name + "在跑步");
}
运行代码，再次查看控制台，结果为： 
{ name: 'C语言中文网', age: 9, eat: [Function], run: [Function] }

2) 对象字面量

JavaScript 中可以使用对象字面量快速定义对象，这是实际开发中最常用的方式，也是最高效、最简便的方式。语法格式如下： 
{属性名1：属性值1,...,属性名n:属性值n}
在对象字面量中，属性名与属性值之间通过冒号进行分隔。属性名是一个字符串，一般省略引号。属性值可以是任意类型数据，当它是字符串时，引号是不能省略的。属性与属性之间通过逗号进行分隔，最后一个属性末尾一般不加逗号，但语法上是允许的。

如果属性值是对象，则可以设计嵌套结构的对象，示例代码如下： 
var obj = {
    name: "Lucy",
    sex: "女",
    family: {
        father: "Tom",
        mother: "Marry",
        sister: {
            sis1: "amy",
            sis2: "alice",
            sis3: "angela",
        },
    },
};
console.log(obj);
在这段代码中，使用字面量定义了对象 obj，obj 对象内部存在两层嵌套。尽管属性 family 是一个实例对象，但它也是作为属性嵌套在实例对象 obj 内。属性 sister 同理，也是作为属性嵌套在实例对象 family 中。

运行代码后，查看控制台，结果为： 
{
  name: 'Lucy',
  sex: '女',
  family: {
    father: 'Tom',
    mother: 'Marry',
    sister: { sis1: 'amy', sis2: 'alice', sis3: 'angela' }
  }
}

值得一提的是，如果当前的属性值是一个函数，则把当前属性称作方法。也就是说，方法是特殊的属性，示例代码如下： 
var obj = {
    name: "Lucy",
    sex: "女",
    eat: function () {
        console.log(this.name + "是个小吃货~");
    },
};
实例对象 obj 中 eat 属性的属性值是一个函数，此时可以将 eat 属性叫作 eat 方法。实例对象内也可以不包含任何属性，也被称作空对象。示例代码如下： 
var obj = {}

JavaScript this关键字

this 关键字包括两种情况：

1) this关键字出现在函数外面

// 直接打印 this
console.log(this);    // Window

2) this关键字出现在函数内部

// 函数中的 this
// 1. 声明函数
function getName() {
    console.log(this.name);
}

// 2. 创建对象
var obj01 = {
    "name": "tom",
    "getName": getName
};

var obj02 = {
    "name": "jerry",
    "getName": getName
};

// 3. 调用函数
obj01.getName();    // tom
obj02.getName();    // jerry

JavaScript对象的使用

无论对象是通过哪种方式创建的，关于对象的使用都是一样的。

例如，以之前创建的 obj 对象为例，分别演示如何调用对象的属性，以及对象的函数，示例代码如下： 
// 属性
// 语法：对象.属性
console.log(obj.name);
console.log(obj.age);

// 函数
// 语法：对象.函数(实参)
obj.eat();
obj.run();

相关文章