10_深入JS面向对象

title: 深入JS面向对象
categories: Javascript
tag:

• 面向对象
  date: 2021-11-21 18:48:34

面向对象

面向对象是现实的抽象方式

对象是 JavaScript 中一个非常重要的概念，这是因为对象可以将多个相关联的数据封装到一起，更好的描述一个事物：

• 比如我们可以描述一辆车：Car，具有颜色（color）、速度（speed）、品牌（brand）、价格（price），行驶（travel）等等；
• 比如我们可以描述一个人：Person，具有姓名（name）、年龄（age）、身高（height），吃东西（eat）、跑步（run）等等；

用对象来描述事物，更有利于我们将现实的事物，抽离成代码中某个数据结构：

• 所以有一些编程语言就是纯面向对象的编程语言，比 Java；
• 你在实现任何现实抽象时都需要先创建一个类，根据类再去创建对象；

JS 的面向对象

JavaScript 其实支持多种编程范式的，包括函数式编程和面向对象编程：

• JavaScript 中的对象被设计成一组属性的无序集合，像是一个哈希表，有 key 和 value 组成；
• key 是一个标识符名称，value 可以是任意类型，也可以是其他对象或者函数类型；
• 如果值是一个函数，那么我们可以称之为是对象的方法；

如何创建一个对象呢？

• 早期使用创建对象的方式最多的是使用 Object 类，并且使用 new 关键字来创建一个对象：
• 这是因为早期很多 JavaScript 开发者是从 Java 过来的，它们也更习惯于 Java 中通过 new 的方式创建一个对象；

后来很多开发者为了方便起见，都是直接通过字面量的形式来创建对象：

• 这种形式看起来更加的简洁，并且对象和属性之间的内聚性也更强，所以这种方式后来就流行了起来；

创建对象的两种方式

1. new 方式

var obj = new Object()
obj.name = 'why'
obj.age = 22
obj.eating = function () {
  console.log(this.name + '在吃东西')
}

1. 字面量

var info = {
  name: 'why',
  age: 22,
  eating: function () {
    console.log('吃东西')
  }
}

对属性操作的控制

在前面我们的属性都是直接定义在对象内部，或者直接添加到对象内部的：

• 但是这样来做的时候我们就不能对这个属性进行一些限制：比如这个属性是否是可以通过 delete 删除的？这个属性是否在 for-in 遍历的时候被遍历出来呢？

如果我们想要对一个属性进行比较精准的操作控制，那么我们就可以使用属性描述符。

• 通过属性描述符可以精准的添加或修改对象的属性；
• 属性描述符需要使用 Object.defineProperty 来对属性进行添加或者修改；

Object.defineProperty

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

Object.defineProperty(obj, prop, description)

可以接受三个参数

• obj 要定义属性的对象；
• prop 要定义或修改的属性的名称或 Symbol；
• descriptor 要定义或修改的属性描述符；

返回值：

• 被传递给函数的对象。

var obj = {
  name: 'why',
  age: 22
}
Object.defineProperty(obj, 'height', { value: 1.88 })
console.log(obj) //{name: 'why', age: 22, height: 1.88}

属性描述符

属性描述符的类型有两种：

• 数据属性（Data Properties）描述符（Descriptor）；
• 存取属性（Accessor 访问器 Properties）描述符（Descriptor）；

数据属性描述符

数据数据描述符有如下四个特性：

[[Configurable]]：表示属性是否可以通过 delete 删除属性，是否可以修改它的特性，或者是否可以将它修改为存取属性

描述符；

• 当我们直接在一个对象上定义某个属性时，这个属性的[[Configurable]]为 true；
• 当我们通过属性描述符定义一个属性时，这个属性的[[Configurable]]默认为 false；

[[Enumerable]]：表示属性是否可以通过 for-in 或者 Object.keys()返回该属性；

• 当我们直接在一个对象上定义某个属性时，这个属性的[[Enumerable]]为 true；
• 当我们通过属性描述符定义一个属性时，这个属性的[[Enumerable]]默认为 false；

[[Writable]]：表示是否可以修改属性的值；

• 当我们直接在一个对象上定义某个属性时，这个属性的[[Writable]]为 true；
• 当我们通过属性描述符定义一个属性时，这个属性的[[Writable]]默认为 false；

[[value]]：属性的 value 值，读取属性时会返回该值，修改属性时，会对其进行修改；

• 默认情况下这个值是 undefined；

var obj = { name: 'why', age: 22, height: 1.88 } //默认为true
Object.defineProperty(obj, 'address', {
  value: '四川省',
  // 不可删除也不可以修改 默认false
  configurable: false,
  // // 不可以赋值 默认false
  writable: true,
  // // 属性是否可以枚举 默认false
  enumerable: false
})
delete obj.name
console.log(obj) //{age: 22, height: 1.88}
for (var key in obj) {
  console.log(key)
  /**
   * age
   * height
   */
}

存取属性描述符

数据数据描述符有如下四个特性：

[[Configurable]]：表示属性是否可以通过 delete 删除属性，是否可以修改它的特性，或者是否可以将它修改为存取属性描述符；

和数据属性描述符是一致的；

• 当我们直接在一个对象上定义某个属性时，这个属性的[[Configurable]]为 true；
• 当我们通过属性描述符定义一个属性时，这个属性的[[Configurable]]默认为 false；

[[Enumerable]]：表示属性是否可以通过 for-in 或者 Object.keys()返回该属性；

• 和数据属性描述符是一致的；
• 当我们直接在一个对象上定义某个属性时，这个属性的[[Enumerable]]为 true；
• 当我们通过属性描述符定义一个属性时，这个属性的[[Enumerable]]默认为 false；

[[get]]：获取属性时会执行的函数。默认为 undefined

[[set]]：设置属性时会执行的函数。默认为 undefined

var obj = { name: 'why', age: 22, height: 1.88, _address: '四川省' }
Object.defineProperty(obj, 'address', {
  configurable: true,
  enumerable: true,
  get: function () {
    return this._address
  },
  set: function (value) {
    this._address = value
  }
})
obj.address = '上海'
console.log(obj.address) //{age: 22, height: 1.88}

在获取和设置的时候，就会拦截。这也是 vue2 响应式的原理

同时定义多个属性

Object.defineProperties() 方法直接在一个对象上定义 多个 新的属性或修改现有属性，并且返回该对象。

var obj = {
  _age: 18
}
Object.defineProperties(obj, {
  name: {
    writable: true,
    value: 'why'
  },
  age: {
    get: function () {
      return this._age
    }
  }
})
console.log(obj)

对象方法补充

获取对象的属性描述符

• getOwnPropertyDescriptor
• getOwnPropertyDescriptors

console.log(Object.getOwnPropertyDescriptor(obj, 'name'))
//{value: 'why', writable: true, enumerable: false, configurable: false}
console.log(Object.getOwnPropertyDescriptors(obj))

禁止对象扩展新属性：preventExtensions

给一个对象添加新的属性会失败（在严格模式下会报错）；

密封对象，不允许配置和删除属性：seal

• 实际是调用preventExtensions
• 并且将现有属性的configurable:false

冻结对象，不允许修改现有属性： freeze

• 实际上是调用seal
• 并且将现有属性的writable: false

创建多个对象的方案

如果我们现在希望创建一系列的对象：比如 Person 对象

• 包括张三、李四、王五、李雷等等，他们的信息各不相同；
• 那么采用什么方式来创建比较好呢？

目前我们已经学习了两种方式：

1. new Object 方式；
2. 字面量创建的方式；

这种方式有一个很大的弊端：创建同样的对象时，需要编写重复的代码；

工厂模式

工厂模式是一种常见的设计模式。我们通常会有一个工厂方法，通过该工厂方法可以产生我们想要的对象。

function createPerson(name, age, height, address) {
  var p = {}
  p.name = name
  p.age = age
  p.height = height
  p.address = address
  return p
}
var p1 = createPerson('dh', 22, 1.6, '四川')
var p2 = createPerson('dhh', 21, 1.58, '北京')
console.log(p1, p2)

工厂模式的缺点：

获取不到对象最真实的类型

构造函数

构造函数可以展示对象的类型。下一节介绍构造函数

构造函数

工厂方法创建对象有一个比较大的问题：我们在打印对象时，对象的类型都是 Object 类型

• 但是从某些角度来说，这些对象应该有一个他们共同的类型；
• 下面我们来看一下另外一种模式：构造函数的方式；

我们先理解什么是构造函数？

• 构造函数也称之为构造器（constructor），通常是我们在创建对象时会调用的函数；
• 在其他面向的编程语言里面，构造函数是存在于类中的一个方法，称之为构造方法；
• 但是 JavaScript 中的构造函数有点不太一样；

JavaScript 中的构造函数是怎么样的？

• 构造函数也是一个普通的函数，从表现形式来说，和千千万万个普通的函数没有任何区别；
• 那么如果这么一个普通的函数被使用 new 操作符来调用了，那么这个函数就称之为是一个构造函数；构造函数一般首字母大写

那么被 new 调用有什么特殊的呢？

new 操作符调用的作用

如果一个函数被使用 new 操作符调用了，那么它会执行如下操作：

1. 在内存中创建一个新的对象（空对象）；
2. 这个对象内部的[[prototype]]属性会被赋值为该构造函数的 prototype 属性；（后面详细讲）；
3. 构造函数内部的 this，会指向创建出来的新对象；
4. 执行函数的内部代码（函数体代码）；
5. 如果构造函数没有返回非空对象，则返回创建出来的新对象；

function Person(name, age, height, address) {
  this.name = name
  this.age = age
  this.height = height
  this.address = address
}
const p = new Person('dh', 18, 1.6, '四川')
console.log(p)

这样子就有 Person 类型

构造函数的缺点

但是构造函数就没有缺点了吗？

• 构造函数也是有缺点的，它在于我们需要为每个对象的函数去创建一个函数对象实例

很浪费性能

function Person(name, age, height, address) {
  this.name = name
  this.age = age
  this.height = height
  this.address = address
  this.eating = function () {
    console.log('跑步')
  }
}
const p1 = new Person('dh', 18, 1.6, '四川')
const p2 = new Person('dhh', 22, 1.59, '四川')
console.log(p1 == p2) //false

因此，为了解决这个问题，我们可以把共有方法放到构造函数的原型对象上

认识对象的原型

对象的原型__proto__

隐式原型

JavaScript 当中每个对象都有一个特殊的内置属性 [[prototype]]，这个特殊的对象可以指向另外一个对象。

那么这个对象有什么用呢？

• 当我们通过引用对象的属性 key 来获取一个 value 时，它会触发 [[Get]]的操作；
• 这个操作会首先检查该属性是否有对应的属性，如果有的话就使用它；
• 如果对象中没有改属性，那么会访问对象[[prototype]]内置属性指向的对象上的属性；

那么如果通过字面量直接创建一个对象，这个对象也会有这样的属性吗？如果有，应该如何获取这个属性呢？

• 答案是有的，只要是对象都会有这样的一个内置属性；

获取的方式有两种：

• 方式一：通过对象的 __proto__属性可以获取到（但是这个是早期浏览器自己添加的，存在一定的兼容性问题）；
• 方式二：通过 Object.getPrototypeOf 方法可以获取到；

var obj = { name: 'why' }
var info = {}
console.log(obj.__proto__)
console.log(info.__proto__)

函数原型 prototype

也叫做显示原型

这里我们又要引入一个新的概念：所有的函数都有一个 prototype 的属性：

你可能会问题，老师是不是因为函数是一个对象，所以它有 prototype 的属性呢？

1. 不是的，因为它是一个函数，才有了这个特殊的属性；
2. 而不是它是一个对象，所以有这个特殊的属性；

function foo() {}
console.log(foo.__proto__)
console.log(foo.prototype)

此时我们再看 new 操作符

我们前面讲过 new 关键字的步骤如下：

1.在内存中创建一个新的对象（空对象）；

2.这个对象内部的[[prototype]]属性会被赋值为该构造函数的 prototype 属性；（后面详细讲）；

function Person(name, age, height, address) {
  this.name = name
  this.age = age
  this.height = height
  this.address = address
  this.eating = function () {
    console.log('跑步')
  }
}
var p = new Person()
//上面的操作相当于会进行如下的操作
var p = {}
p.__proto__ = Person.prototype

那么也就意味着我们通过 Person 构造函数创建出来的所有对象的[[prototype]]属性都指向 Person.prototype：

function Person(name, age, height, address) {
  this.name = name
  this.age = age
  this.height = height
  this.address = address
  this.eating = function () {
    console.log('跑步')
  }
}
const p1 = new Person('dh', 18, 1.6, '四川')
const p2 = new Person('dhh', 22, 1.59, '四川')
console.log(p1.__proto__ === p2.__proto__) //true
console.log(p1.__proto__ === Person.prototype) //true

函数原型上的属性

constructor 属性

函数原型上有 constructor 属性。指向本身

function foo() {}
console.log(foo.prototype.constructor) //ƒ foo() {}
console.log(foo.prototype.constructor.name) //foo

也可以自己添加

foo.prototype.name = 'dh'
foo.prototype.age = 18

但是由于每次都要写前面的，我们有时候会直接把原型对象赋值为新的对象

也就是说按照这样子，赋值为新的对象

function foo() {}
foo.prototype = {
  constructor: foo,
  name: 'why',
  age: 18
}
var f1 = new foo()
console.log(f1.name)

如果希望 constructor 指向 Person，那么可以手动添加：

上面的方式虽然可以, 但是也会造成 constructor 的[[Enumerable]]特性被设置了 true.

• 默认情况下, 原生的 constructor 属性是不可枚举的.
• 如果希望解决这个问题, 就可以使用我们前面介绍的 Object.defineProperty()函数了.

但是我们这样子通过字面量形式添加 constructor 属性，是可以枚举的。但是原本的原型对象不可枚举的。因此我们可以用defineProperty()方法，这样子添加的属性默认的

enumerable: false,

因此最终结果为

function foo() {}
foo.prototype = {
  name: 'why',
  age: 18
}
var f1 = new foo()
console.log(f1.name)
Object.defineProperty(foo.prototype, 'constructor', {
  enumerable: false,
  configurable: true,
  writable: true,
  value: foo
})

创建对象的方案二

我们在上一个构造函数的方式创建对象时，有一个弊端：会创建出重复的函数，比如 running、eating 这些函数

• 那么有没有办法让所有的对象去共享这些函数呢?
• 可以，将这些函数放到 Person.prototype 的对象上即可；

function Person(name, age, height, address) {
  this.name = name
  this.age = age
  this.height = height
  this.address = address
}
//我们把公有方法写在原型对象上
Person.prototype.eating = function () {
  console.log('跑步')
}
const p1 = new Person('dh', 18, 1.6, '四川')
const p2 = new Person('dhh', 22, 1.59, '四川')
console.log(p1.eating == p2.eating) //true