Web前端入门第 61 问：JavaScript 各种对象定义与对象取值方法

曾经有人说 JS 语言中万物皆对象，虽然这种说法不一定完全准确，但也有一定的道理。原因是 JS 的语法看起来所有的数据类型都像是一个对象，包括原始类型。

const a = 1.234;
console.log(a.toString());
console.log(a.valueOf());
console.log(a.toFixed(2));
console.log(Number.prototype); // 查看所有 Number 类型的原型链方法属性

const b = '前端路引';
console.log(b.length);
console.log(b.substring(2));
console.log(b.padEnd(10, '*')); // 后填充 * 字符
console.log(String.prototype); // 查看所有 String 类型的原型链方法属性

const c = true;
console.log(c.toString());
console.log(Boolean.prototype); // 查看所有 Boolean 类型的原型链方法属性

以上展示了 Number、String、Boolean 三种原始类型的方法。a.xxx() 这种写法就表示 xxx 是 a 的方法。

一般定义在对象上的 函数 都称之为 对象方法，使用语法： xxx.yyy()。对象除了方法还有 对象属性，使用语法： xxx.yyy。

方法和属性的区别是：方法是函数，属性是值。

举个例子：

const obj = {
  name: '前端路引', // 对象属性
  age: 1, // 对象属性
  sayHi() { // 对象方法
    console.log(`我是${this.name}，我今年${this.age}岁`);
  }
}

以上是一个 JS 的对象字面量定义方式，除了最常用的对象字面量，还可以像 Array 一样，使用构造函数来定义对象，也可以使用 Class 自定义对象。

对象定义

JS 的对象定义可比 数组 的花样多多了，下面来一一展示。

对象字面量

JS 的对象值与数组一样，无任何限制，可以是任意值，包括函数、数组、对象、undefined、null、NaN 等。

const dynamicKey = 'dynamicKey';
const fnKey = () => {};

const obj1 = {
  name: '前端路引',
  age: 1,
  'favorite-color': 'blue', // 含特殊字符的键需用引号包裹
  [Symbol('id')]: 123, // Symbol 作为键
  [dynamicKey]: 'value', // 使用动态变量作为属性名
  [fnKey]: '使用函数作为键名称',
  greet() { // 方法简写（ES6+）
    console.log('Hello!');
  },
  say: function () { // 函数
    console.log('Hi!');
  }
};

构造函数

虽然此方法使用较少，但这种方式也可以用来定义一个对象。以下代码与上面的对象字面量定义的对象一样：

const dynamicKey = 'dynamicKey';
const fnKey = () => {};

const obj2 = new Object();
obj2.name = '前端路引';
obj2.age = 1;
obj2['favorite-color'] = 'blue';
obj2[Symbol('id')] = 123;
obj2[dynamicKey] = 'value';
obj2[fnKey] = '使用函数作为键名称';
obj2.greet = function () {
  console.log('Hello!');
}
obj2.say = function () {
  console.log('Hi!');
}

Object.create()

使用对象的静态方法 Object.create() 来创建对象。

静态方法和对象原型链方法的区别是：静态方法属于对象本身，对象原型链上的方法属于对象实例。

看例子：

const obj3 = Object.create({ // 使用静态方法创建对象
  name: '前端路引',
})
obj3.toString() // 调用原型链方法，也称为实例方法

Object.create 多用于继承一个对象，扩展原有对象的功能：

const obj4 = {
  name: '前端路引',
}
const obj5 = Object.create(obj4);
obj5.age = 1;
obj5['favorite-color'] = 'blue';

自定义构造函数

除了使用 JS 提供的内置构造函数，还可以自定义构造函数来创建一个对象。比如：

function WeChat () {
  this.name = '前端路引';
  this.age = 1;
  this['favorite-color'] = 'blue';
}
const obj6 = new WeChat();

function 关键字可不止用于函数定义，还能用来自定义构造函数，这是在 ES6 出现之前自定义类最常用的方式。

Class

为了消除语法歧义，ES6 引入了 Class 定义类，再通过 new 关键字创建实例对象，这种方式完全像是 function 的语法糖。

class WeChat {
  constructor() {
    this.name = '前端路引';
    this.age = 1;
    this['favorite-color'] = 'blue';
  }
  say() {
    console.log('Hi!');
  }
}
const obj7 = new WeChat();

对象取值

对象的取值方法也多得眼花缭乱，下面一一展示。

点语法

常规属性可以使用 . 取值，比如：

const obj1 = {
  name: '前端路引',
  age: 1,
  'favorite-color': 'blue',
  say() {
    console.log('Hi!');
  }
}
console.log(obj1.name); // 获取属性值
console.log(obj1.say()); // 调用方法

方括号取值

. 语法有个问题，比如上面对象中 favorite-color 属性，如果直接使用 obj1.favorite-color，会报错，因为 - 会被当做减号处理，导致报错 ReferenceError: color is not defined。

这时候可以把对象当做数组来处理，使用方括号 [] 取值，比如：

const obj1 = {
  name: '前端路引',
  age: 1,
  'favorite-color': 'blue',
  say() {
    console.log('Hi!');
  }
}
console.log(obj1['favorite-color']); // 获取属性值
console.log(obj1['say']()); // 调用方法

使用方括号取值时，如果属性名是动态的，可以使用变量来取值，比如：

const dynamicKey = 'dynamicKey';

const obj1 = {
  [dynamicKey]: '前端路引',
}
console.log(obj1[dynamicKey]);

解构赋值

作为 ES6 引入的新特性，此写法如果不了解，那么代码可能都看不懂。

const obj1 = {
  name: '前端路引',
  age: 1,
}

const { name, age, up = '微信公众号' } = obj1;
console.log(name, age);
// 解构赋值，可以添加默认值，如果找不到属性，则使用默认值
console.log(up);

Object 静态方法

Object 自身还提供了一些静态方法，用于获取数组的键值。

const obj1 = {
  name: '前端路引',
  age: 1,
}
const keys = Object.keys(obj1);    // 返回所有可枚举属性名数组
const values = Object.values(obj1);// 返回所有值数组
const entries = Object.entries(obj1); // 返回键值对数组
console.log(keys); // ['name', 'age']
console.log(values); // ['前端路引', 1]
console.log(entries); // 二维数组  [['name', '前端路引'], ['age', 1]]

Getter / Setter 方法

使用 get 方法，可以设置对象的计算属性，用于拦截对象的取值，比如：

const obj1 = {
  firstName: '微信公众号：',
  lastName: '前端路引',
  get name() {
    return `${this.firstName}：${this.lastName}`; // 微信公众号：：前端路引
  },
  set name(value) {
    [this.firstName, this.lastName] = value.split('：');
  }
}
console.log(obj1.name); // 微信公众号：前端路引
obj1.name = '前端路引：微信公众号';
console.log(obj1.name); // 前端路引：微信公众号

原型链访问

如果取的属性对象本身不存在，则会顺着原型链查找，直到找到为止，比如：

const obj1 = {
  name: '前端路引',
  age: 1,
}
console.log(obj1.toString()); // toString 方法不在对象本身，是 Object 原型链上的方法，也可以使用取值语法访问

可选链

ES2020 引入了可选链，用于解决对象取值时，如果属性不存在，会报错的问题，比如：

const obj1 = {
  name: '前端路引',
  age: 1,
}
// 如果直接取值，将会报错 TypeError: Cannot read properties of undefined (reading 'city')
console.log(obj1.address.city);
// 使用可选链，如果属性不存在，则返回 undefined，不会报错
console.log(obj1?.address?.city);

写在最后

以上已包含绝大多数应用场景，但是也会有一些不太常用的写法未包含，比如 Reflect.get(obj, 'a')。作为入门条件，掌握以上内容已经完全够用。