系列
JavaScript教程
内置对象(built-in objects)
虽然,大多数人看到的网上贴的JavaScript代码都是面向过程的代码,但其实JS是一个面向对象的语言。 除了上一章提到的基本值类型,其他JS里的所有东西都是对象!
JS里面有一些内置的对象,经常会用到,因此在本章先做一些介绍。
什么是对象
对象的概念,对于有其他语言面向对象编程经验的同学来说,是个比较容易理解的。但对于没接触过的同学来说,的确是有点抽象。
我接下来确实要给您介绍对象,但我说的却不是男/女朋友的对象,不要误解。
创建对象
不管传说中的“对象”是否好看,我们先看看最简单对象的样子:
let empty = {}; // 创建一个空对象
let user = { name: "张三", age: 15 }; // 创建一个用户对象
console.log(`name: ${user.name}`); // 访问user的name属性
console.log(`age: ${user.age}`); // 访问user的age属性
user.age = 16; // 重新设置user的age属性的值
console.log(`new age: ${user.age}`); // 访问user的age属性
上面的两个例子,分别创建了两个简单的对象。可以发现,用大括号{}
可以创建一个对象。{}
表示是一个空对象,里面对象没有任何属性。如果里面有属性,属性之间用英文逗号,
分割,属性名和值之间以英文冒号:
分割,冒号前是属性名,冒号后是属性值。
属性名和值都是成对存在的,不能只有名没有值,也不能只有值没有名。如果有一个变量名和对象的属性名一样,那么在ES6里面有一种对象的简写用法,比如:
const name = "张三";
const obj1 = { name: "张三" };
const obj2 = { name: name };
const obj3 = { name };
在上面的例子中,obj1
、obj2
和obj3
都是等效的,表示的都是这么一个对象{ name: "张三" }
,不能说obj3只有属性名,没有值,只是因为属性值的变量名和属性名刚好一样,所以JS就提供了一个语法糖来简写了。

熟悉Java语言的同学,也许觉得这很夸张,竟然不用new
关键字,就能创建对象出来?实际上可以,这就是动态语言的灵活之处,只要用{}
就可以随意创建一个对象出来。
再复杂一点
有时候,创建的对象还会更复杂一些。
let dog = {
name: "旺财",
age: 3,
address: { // 创建一个新的对象
province: "广东省",
city: "深圳"
},
bark: function () { // 创建一个函数
console.log("汪汪");
}
}; // 创建一个对象
dog.bark(); // 让狗叫一声
这个例子里面,一个对象的属性不仅可以是基本类型,也可以是一个对象,也可以是一个函数function
。后面的章节中会讲到函数,在这里,先把函数也理解成一个对象。

哎呀,不骗你,除了基本值类型的数据,其他的一切皆对象。对象是对象,函数是对象,甚至后面会提到的类也是对象。
点表示法 / 括号表示法
在前面的例子中,我们用点.
来获取对象的属性和方法。
比如例子:
let user = { name: "张三", age: 15 }; // 创建一个用户对象
console.log(`name: ${user.name}`); // 用点(.)来访问user的name属性
除了用.
,也可以用方括号[]
达到同样的效果。
let user = { name: "张三", age: 15 }; // 创建一个用户对象
console.log(`name: ${user["name"]}`); // 用方括号([])来访问user的name属性
在一般情况下,鼓励用点来获取对象的属性和方法,代码更直观易读。
在有时候,我们需要动态给对象添加/访问对象的属性和方法的时候,方括号就是唯一的选择了。
const user = {};
// 假定propName变量值是从别的地方传递过来的
const propName = "height";
// 为user对象添加属性,属性名是[]中变量的值
user[propName] = 180;
// 用[]来访问user的属性
console.log(user[propName]);
判断类型
判断对象的类型,可以使用typeof
关键字。
console.log(typeof 1); // number
console.log(typeof "abc"); // string
console.log(typeof new Date()); // object