重学JavaScript05----- 面向对象

---

前言

对象是JavaScript中一个非常重要的概念，这是因为对象可以将多个相关联的数据封装到一起。面向对象是现实的抽象方式。

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

比如我们可以描述一个播放器：下一首，上一首，暂停，开始，音量，歌名，歌词，歌曲MP3

JavaScript的面向对象

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

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

面向对象的三大特征

封装、继承、多态

• 封装：就是把客观事物封装成抽象的类，并且类可以把自己的数据和方法只让可信的类或者对象操作，对不可信的进行信息隐藏。
• 继承：继承是面向对象中非常重要的，不仅仅可以减少重复代码的数量，也是多态前提（纯面向对象中）；
• 多态：不同的对象在执行时表现出不同的形态；

一、创建对象方式（封装）

1、 直接创建方式

早期使用创建对象的方式最多的是使用Object类，并且使用new关键字来创建一个对象：

var obj = new Object()
obj.name = '死侍'
obj.friend = '金刚狼'
obj.design = function() {
	console.log('话痨小能手'）
}

通过字面量的形式来创建对象：

var obj = {
  obj.name = '死侍'
  obj.friend = '金刚狼'
  obj.design = function() {
	 console.log('话痨小能手'）
  }
}

弊端

直接创建写法有两个缺点，一是如果多生成几个实例，写起来就非常麻烦；二是实例与原型之间，没有任何办法，可以看出有什么联系。

思考

---

我们的属性都是直接定义在对象内部，或者直接添加到对象内部的
但是这样来做的时候我们就不能对这个属性进行一些限制：比如这个属性是否是可以通过delete删除的？这个属性是否在for-in遍历的时候被遍历出来呢？

属性描述符

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

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

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

可接收三个参数：

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

返回值：

• 被传递给函数的对象。

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

• 数据属性（Data 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；

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

存取属性四个特性:

• [[Configurable]]：表示属性是否可以通过delete删除属性，是否可以修改它的特性，或者是否可以将它修改为存取属性
  描述符；
  和数据属性描述符是一致的；
  当我们直接在一个对象上定义某个属性时，这个属性的[[Configurable]]为true；
  当我们通过属性描述符定义一个属性时，这个属性的[[Configurable]]默认为false；
• [[Enumerable]]：表示属性是否可以通过for-in或者Object.keys()返回该属性；
  和数据属性描述符是一致的；
  当我们直接在一个对象上定义某个属性时，这个属性的[[Enumerable]]为true；
  当我们通过属性描述符定义一个属性时，这个属性的[[Enumerable]]默认为false；
• [[get]]：获取属性时会执行的函数。默认为undefined
  -> [[set]]：设置属性时会执行的函数。默认为

2、工厂模式

工厂模式其实是一种常见的设计模式。

function hero(name,firend) {

　　　　return {

　　　　　　name:name,

　　　　　　firend:firend

　　　　}
　　　　

　　}
var hero1 = hero('死侍','金刚狼')
var hero2 = hero('蜘蛛侠','章鱼博士')

// 工厂模式的缺点(获取不到对象最真实的类型)
console.log(hero1,hero2)

弊端

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

3、构造函数

构造函数也称之为构造器（constructor），通常是我们在创建对象时会调用的函数；
如果这么一个普通的函数被使用new操作符来调用了，那么这个函数就称之为是一个构造函数

new操作符调用的作用

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

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

构造函数创建对象

function Hero(name, friend) {
  this.name = name
  this.friend= friend
  
  this.design = function() {
    console.log("话痨小能手")
  }
}

var hero1 = new Hero('死侍','金刚狼')
var hero2 = new Hero('蜘蛛侠','章鱼博士')
console.log(hero1)
console.log(hero2)
hero1.design()
hero2.design()
console.log(hero1.design == hero2.design) //false

弊端

构造函数表面上好像没什么问题，但是实际上这样做，有一个很大的弊端。
那就是对于每一个实例对象，design()方法都是一模一样的内容，每一次生成一个实例，都必须为重复的内容，多占用一些内存。这样既不环保，也缺乏效率。
也就是会创建出重复的函数 design()，明明他们都是‘话痨小能手’，但是函数指向确不同。
那么有没有办法让所有的对象去共享这些函数呢?

4、构造函数和原型(Prototype模式)组合

Javascript规定，每一个构造函数都有一个[[prototype]]属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。

function Hero(name, friend) {
  this.name = name
  this.friend= friend
}
Hero.prototype.design = function() {
  console.log('话痨小能手')
}

var hero1 = new Hero('死侍','金刚狼')
var hero2 = new Hero('蜘蛛侠','章鱼博士')
console.log(hero1)
console.log(hero2)
hero1.design()
hero2.design()
console.log(hero1.design == hero2.design) //true