•  阅读 6 分钟

一起探讨 JavaScript 的对象

对象是多个属性的动态集合,它有一个链接着原型的隐藏属性(注:__proto__)。

一个属性拥有一个 key 和一个 value 。

属性的 key

属性的 key 是一个唯一的字符串。

访问属性有两种方式:点表示法和括号表示法。当使用点表示法,属性的 key 必须是有效的标识符。

const obj = {
  message: 'A message',
}
obj.message // "A message"
obj.message // "A message"

访问一个不存在的属性不会抛出错误,但是会返回 undefined

obj.otherProperty // undefined

当使用括号表示法,属性的 key 不要求是有效的标识符 —— 可以是任意值。

const french = {}
french['thank you very much'] = 'merci beaucoup'

french['thank you very much'] // "merci beaucoup"

当属性的 key 是一个非字符串的值,会用 toString() 方法(如果可用的话)把它转换为字符串。

const obj = {}
// Number
obj[1] = 'Number 1'
obj[1] === obj['1'] // true
// Object
const number1 = {
  toString() {
    return '1'
  },
}
obj[number1] === obj['1'] // true

在上面的示例中,对象 number1 被用作一个 key 。它会被转换为字符串,转换结果 “1” 被用作属性的 key 。

属性的值

属性的值可以是任意的基础数据类型,对象,或函数。

对象作为值

对象可以嵌套在其他对象里。看下面这个例子

const book = {
  title: 'The Good Parts',
  author: {
    firstName: 'Douglas',
    lastName: 'Crockford',
  },
}
book.author.firstName // "Douglas"

通过这种方式,我们就可以创建一个命名空间:

const app = {}
app.authorService = { getAuthors() {} }
app.bookService = { getBooks() {} }

函数作为值

当一个函数被作为属性值,通常成为一个方法。在方法中,this 关键字代表着当前的对象。

this ,会根据函数的调用方式有不同的值。了解更多关于 this 丢失上下文的问题,可以查看当”this”丢失上下文时应该怎么办

动态性

对象本质上就是动态的。可以任意添加删除属性。

const obj = {}
obj.message = 'This is a message' // add new property
obj.otherMessage = 'A new message' // add new property
delete obj.otherMessage // delete property

Map

我们可以把对象当做一个 Map。Map 的 key 就是对象的属性。

访问一个 key 不需要去扫描所有属性。访问的时间复杂度是 o(1)。

原型

对象有一个链接着原型对象的“隐藏”属性 __proto__,对象是从这个原型对象中继承属性的。

举个例子,使用对象字面量创建的对象有一个指向 Object.prototype 的链接:

const obj = {}
obj.__proto__ === Object.prototype // true

原型链

原型对象有它自己的原型。当一个属性被访问的时候并且不包含在当前对象中,JavaScript 会沿着原型链向下查找直到找到被访问的属性,或者到达 null 为止。

只读

原型只用于读取值。对象进行更改时,只会作用到当前对象,不会影响对象的原型;就算原型上有同名的属性,也是如此。

空对象

正如我们看到的,空对象 {} 并不是真正意义上的空,因为它包含着指向 Object.prototype 的链接。为了创建一个真正的空对象,我们可以使用 Object.create(null) 。它会创建一个没有任何属性的对象。这通常用来创建一个 Map。

原始值和包装对象

在允许访问属性这一点上,JavaScript 把原始值描述为对象。当然了,原始值并不是对象。

;(1.23).toFixed(1) // "1.2"
'text'.toUpperCase() // "TEXT"
true.toString() // "true"

为了允许访问原始值的属性, JavaScript 创造了一个包装对象,然后销毁它。JavaScript 引擎对创建包装和销毁包装对象的过程做了优化。

数值、字符串和布尔值都有等效的包装对象。跟别是:NumberStringBoolean

nullundefined 原始值没有相应的包装对象并且不提供任何方法。

内置原型

Numbers 继承自 Number.prototypeNumber.prototype 继承自 Object.prototype

const no = 1
no.__proto__ === Number.prototype // true
no.__proto__.__proto__ === Object.prototype // true

Strings 继承自 String.prototype。Booleans 继承自 Boolean.prototype

函数都是对象,继承自 Function.prototype 。函数拥有 bind()apply()call() 等方法。

所有对象、函数和原始值(除了 nullundefined )都从 Object.prototype 继承属性。他们都有 toString() 方法。

使用 polyfill 扩充内置对象

JavaScript 可以轻松地使用新功能扩充内置对象。

polyfill 就是一个代码片段,用于在不支持某功能的浏览器中实现该功能。

实用工具

举个例子,这个为 Object.assign() 写的 polyfill,如果它不可用,那么就在 Object 上添加一个新方法。

Array.from() 写了类似的 polyfill,如果它不可用,就在 Array 上添加一个新方法。

原型

新的方法可以被添加到原型。

举个例子,String.prototype.trim() polyfill 让所有的字符串都能使用 trim() 方法。

const text = '   A text  '
text.trim() // "A text"

Array.prototype.find() polyfill 让所有的数组都能使用find()方法。polyfill 也是同样的。

const arr = ['A', 'B', 'C', 'D', 'E']
arr.indexOf('C') // 2

单一继承

Object.create() 用特定的原型对象创建一个新对象。它用来做单一继承。思考下面的例子:

const bookPrototype = {
  getFullTitle() {
    return `${this.title} by ${this.author}`
  },
}
const book = Object.create(bookPrototype)
book.title = 'JavaScript: The Good Parts'
book.author = 'Douglas Crockford'
// JavaScript: The Good Parts by Douglas Crockford
book.getFullTitle()

多重继承

Object.assign() 从一个或多个对象拷贝属性到目标对象。它用来做多重继承。看下面的例子:

const authorDataService = { getAuthors() {} }
const bookDataService = { getBooks() {} }
const userDataService = { getUsers() {} }
const dataService = Object.assign(
  {},
  authorDataService,
  bookDataService,
  userDataService
)
dataService.getAuthors()
dataService.getBooks()
dataService.getUsers()

不可变对象

Object.freeze() 冻结一个对象。属性不能被添加、删除、更改。对象会变成不可变的。

'use strict'
const book = Object.freeze({
  title: 'Functional-Light JavaScript',
  author: 'Kyle Simpson',
})

// Cannot assign to read only property 'title'
book.title = 'Other title'

Object.freeze() 实行浅冻结。要深冻结,需要递归冻结对象的每一个属性。

拷贝

Object.assign() 被用作拷贝对象。

const book = Object.freeze({
  title: 'JavaScript Allongé',
  author: 'Reginald Braithwaite',
})
const clone = Object.assign({}, book)

Object.assign() 执行浅拷贝,不是深拷贝。它拷贝对象的第一层属性。嵌套的对象会在原始对象和副本对象之间共享。

对象字面量

对象字面量提供一种简单、优雅的方式创建对象。

const timer = {
  fn: null,
  start(callback) {
    this.fn = callback
  },
  stop() {},
}

但是,这种语法有一些缺点。所有的属性都是公共的,方法能够被重定义,并且不能在新实例中使用相同的方法。

timer.fn // null
timer.start = function () {
  console.log('New implementation')
}

Object.create()

Object.create()Object.freeze() 一起能够解决最后两个问题。

首先,我要使用所有方法创建一个冻结原型 timerPrototype ,然后创建对象去继承它。

const timerPrototype = Object.freeze({
  start() {},
  stop() {},
})
const timer = Object.create(timerPrototype)
timer.__proto__ === timerPrototype // true

当原型被冻结,继承它的对象不能够更改其中的属性。现在,start()stop() 方法不能被重新定义。

'use strict'

// Cannot assign to read only property 'start' of object
timer.start = function () {
  console.log('New implementation')
}

Object.create(timerPrototype) 可以用来使用相同的原型构建更多对象。

构造函数

最初,JavaScript 语言提出构造函数作为这些的语法糖。看下面的代码:

function Timer(callback) {
  this.fn = callback
}
Timer.prototype = {
  start() {},
  stop() {},
}
function getTodos() {}
const timer = new Timer(getTodos)

所有的以 function 关键字定义的函数都可以作为构造函数。构造函数使用功能 new 调用。新对象将原型设定为 FunctionConstructor.prototype

const timer = new Timer()
timer.__proto__ === Timer.prototype

同样地,我们需要冻结原型来防止方法被重定义。

Timer.prototype = Object.freeze({
  start() {},
  stop() {},
})

new 操作符

当执行 new Timer() 时,它与函数 newTimer() 作用相同:

function newTimer() {
  const newObj = Object.create(Timer.prototype)
  const returnObj = Timer.call(newObj, arguments)
  if (returnObj)
    return returnObj

  return newObj
}

使用 Timer.prototype 作为原型,创造了一个新对象。然后执行 Timer 函数并为新对象设置属性字段。

ES2015 为这一切带来了更好的语法糖。看下面的例子:

class Timer {
  constructor(callback) {
    this.fn = callback
  }

  start() {}
  stop() {}
}
Object.freeze(Timer.prototype)

使用 class 构建的对象将原型设置为 ClassName.prototype 。在使用类创建对象时,必须使用 new 操作符。

const timer = new Timer()
timer.__proto__ === Timer.prototype

class 语法不会冻结原型,所以我们需要在之后进行操作。

Object.freeze(Timer.prototype)

基于原型的继承

在 JavaScript 中,对象继承自对象。

构造函数和类都是用来创建原型对象的所有方法的语法糖。然后它创建一个继承自原型对象的新对象,并为新对象设置数据字段基于原型的继承具有保护记忆的好处。原型只创建一次并且由所有的实例使用。

没有封装

基于原型的继承模式没有私有性。所有对象的属性都是公有的。

Object.keys() 返回一个包含所有属性键的数组。它可以用来迭代对象的所有属性。

function logProperty(name) {
  console.log(name) // property name
  console.log(obj[name]) // property value
}
Object.keys(obj).forEach(logProperty)

模拟的私有模式包含使用 _ 来标记私有属性,这样其他人会避免使用他们:

class Timer {
  constructor(callback) {
    this._fn = callback
    this._timerId = 0
  }
}

工厂模式

JavaScript 提供一种使用工厂模式创建封装对象的新方式。

function TodoStore(callback) {
  const fn = callback

  function start() {}
  function stop() {}

  return Object.freeze({
    start,
    stop,
  })
}

fn 变量是私有的。只有 start()stop() 方法是公有的。start()stop() 方法不能被外界改变。这里没有使用 this ,所以没有 this 丢失上下文的问题。

对象字面量依然用于返回对象,但是这次它只包含函数。更重要的是,这些函数是共享相同私有状态的闭包。 Object.freeze() 被用来冻结公有 API。

Timer 对象的完整实现,请看具有封装功能的实用 JavaScript 对象.

结论

本文由 吳文俊 翻译,原文地址 Let’s explore objects in JavaScript

标签:
> 分享并评论 Twitter / Facebook
> cd ..