深入JS中的面向对象

JS是支持多种编程范式的，包括函数式编程和面向对象编程

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

一般情况下创建对象的两种方式

1.通过new关键字来创建

var obj = new Object()
obj.name = "why"
obj.age = 18
obj.height = 1.88
obj.running = function() {
  console.log(this.name + "在跑步~")
}

2.通过字面量的形式来创建

var info = {
  name: "kobe",
  age: 40,
  height: 1.98,
  eating: function() {
    console.log(this.name + "在吃东西~")
  }
}

通过上面两种方式创建对象的话，属性都是直接定义在对象的内部的，我们就无法对这些属性进行一些限制，
比如这个属性是否可以删除，是否可以遍历等

//这些操作都是可以的
var obj = {
  name: "why",
  age: 18
}

// 获取属性
console.log(obj.name)

// 给属性赋值
obj.name = "kobe"
console.log(obj.name)

// 删除属性
 delete obj.name
console.log(obj)

// 遍历属性
for (var key in obj) {
  console.log(key)
}

如果我们需要对对象中的属性进行一个比较精准的控制的话，那么我们可以使用属性描述符Object.defineProperty

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

Object.defineProperty(obj,prop,descriptor)
// 该方法可以接收三个参数
// obj:要定义属性的对象
// prop:要定义或者修改的属性名称或Symbol
// descriptor:要定义或者修改的属性描述符
// 返回值是被传递给函数的对象

属性描述符的类型有两种

• 数据属性描述符
• 存取属性描述符

	configurable	enumerable	value	writable	get	set
数据描述符	可以	可以	可以	可以	不可以	不可以
存取描述符	可以	可以	不可以	不可以	可以	可以

数据属性描述符

configurable:表示属性是否可以通过delete删除属性，是否可以修改它的特性，或者是否可以将他修改为存取描述符
当我们直接在一个对象上定义某个属性的时候，这个属性的[[Configurable]]为true
当我们通过属性描述符定义某个属性的时候，这个属性的[[Configurable]]为false

enumerable:表示属性是否可以通过for-in或者Object.keys()返回该属性
当我们直接在一个对象上定义某个属性的时候，这个属性的[[Enumerable]]为为true
当我们通过属性描述符定义某个属性的时候，这个属性的[[Enumerable]]为为false

value:属性的value值，读取属性会返回该值，修改属性会对其进行修改
默认情况下是undefined

writable：表示属性的值是否可以修改
当我们直接在一个对象上定义某个属性的时候，这个属性的[[Writable]]为true
当我们通过属性描述符定义某个属性的时候，，这个属性的[[Writable]]默认为false

var obj = {
  name: "why",
  age: 18
}

Object.defineProperty(obj, "address", {
  // value: "北京市", // 默认值undefined
  // 该特殊不可删除/也不可以重新定义属性描述符
  // configurable: false, // 默认值false
  // 该特殊是配置对应的属性(address)是否是可以枚举
  // enumerable: false, // 默认值false
  // 该特性是属性是否是可以赋值(写入值) 
  // writable: false // 默认值false
})


// 测试configurable的作用
// delete obj.name
// console.log(obj.name) //结果为undefined
// delete obj.address
// console.log(obj.address) //结果为北京市,因为该属性被设置成了无法删除

// 测试enumerable的作用
console.log(obj) //结果为{ name: 'why', age: 18, address: '北京市' }
for (var key in obj) {
  console.log(key) //结果为name age
}
console.log(Object.keys(obj)) //结果为[ 'name', 'age' ]

// 测试Writable的作用
// obj.address = "上海市"
// console.log(obj.address) //结果为北京市

存取属性描述符

configurable:表示属性是否可以通过delete删除属性，是否可以修改它的特性，或者是否可以将他修改为存取描述符
当我们直接在一个对象上定义某个属性的时候，这个属性的[[Configurable]]为true
当我们通过属性描述符定义某个属性的时候，这个属性的[[Configurable]]为false

enumerable:表示属性是否可以通过for-in或者Object.keys()返回该属性
当我们直接在一个对象上定义某个属性的时候，这个属性的[[Enumerable]]为为true
当我们通过属性描述符定义某个属性的时候，这个属性的[[Enumerable]]为为false

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

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

var obj = {
  name: "why",
  age: 18,
  _address: "北京市"
}

// 存取属性描述符
// 1.隐藏某一个私有属性被希望直接被外界使用和赋值
// 2.如果我们希望截获某一个属性它访问和设置值的过程时, 也会使用存储属性描述符
Object.defineProperty(obj, "address", {
  enumerable: true,
  configurable: true,
  get: function() {
    foo()
    return this._address
  },
  set: function(value) {
    bar()
    this._address = value
  }
})

console.log(obj.address)
// 结果为
/*
获取了一次address的值
北京市
*/

obj.address = "上海市"
console.log(obj.address) 
// 结果为
/*
设置了addres的值
获取了一次address的值
上海市
*/

function foo() {
  console.log("获取了一次address的值")
}

function bar() {
  console.log("设置了addres的值")
}

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

var obj = {
  // 私有属性(js里面是没有严格意义的私有属性)
  _age: 18,
  _eating: function() {},
  set age(value) {
    this._age = value
  },
  get age() {
    return this._age
  }
}

Object.defineProperties(obj, {
  name: {
    configurable: true,
    enumerable: true,
    writable: true,
    value: "why"
  },
  age: {
    configurable: true,
    enumerable: true,
    get: function() {
      return this._age
    },
    set: function(value) {
      this._age = value
    }
  }
})

obj.age = 19
console.log(obj.age) //结果为19

console.log(obj) 
//结果为{
  _age: 19,
  _eating: [Function: _eating],
  age: [Getter/Setter],
  name: 'why'
}

对象方法的补充

获取对象的属性描述符：

getOwnPropertyDescriptor和getOwnPropertyDescriptors

var obj = {
  // 私有属性(js里面是没有严格意义的私有属性)
  _age: 18,
  _eating: function() {}
}

Object.defineProperties(obj, {
  name: {
    configurable: true,
    enumerable: true,
    writable: true,
    value: "why"
  },
  age: {
    configurable: true,
    enumerable: true,
    get: function() {
      return this._age
    },
    set: function(value) {
      this._age = value
    }
  }
})

// 获取某一个特性属性的属性描述符
console.log(Object.getOwnPropertyDescriptor(obj, "name"))
// 结果为
/*
{ value: 'why', writable: true, enumerable: true, configurable: true }
*/

console.log(Object.getOwnPropertyDescriptor(obj, "age"))
// 结果为
/*
{
  get: [Function: get],
  set: [Function: set],
  enumerable: true,
  configurable: true
}
*/

// 获取对象的所有属性描述符
console.log(Object.getOwnPropertyDescriptors(obj))
// 结果为
/*
{
  _age: { value: 18, writable: true, enumerable: true, configurable: true },
  _eating: {
    value: [Function: _eating],
    writable: true,
    enumerable: true,
    configurable: true
  },
  name: {
    value: 'why',
    writable: true,
    enumerable: true,
    configurable: true
  },
  age: {
    get: [Function: get],
    set: [Function: set],
    enumerable: true,
    configurable: true
  }
}
*/

禁止对象扩展新属性：preventExtensions

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

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

实际是调用preventExtensions

并且将现有属性的configurable:false

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

实际上是调用seal

并且将现有属性的writable: false

var obj = {
  name: 'why',
  age: 18
}

// 1.禁止对象继续添加新的属性
Object.preventExtensions(obj)

obj.height = 1.88
obj.address = "广州市"

console.log(obj) //结果为{ name: 'why', age: 18 }

// 2.禁止对象配置/删除里面的属性
for (var key in obj) {
  Object.defineProperty(obj, key, {
    configurable: false,
    enumerable: true,
    writable: true,
    value: obj[key]
  })
}

Object.seal(obj)

delete obj.name
console.log(obj.name) //why

// 3.让属性不可以修改(writable: false)
Object.freeze(obj) 

obj.name = "kobe"
console.log(obj.name) //why

创建多个对象的方案

比如我们现在需要创建一系列的对象：比如Person对象,包括张三，李四，王五等等，
他们的信息各不相同，现在应该如何创建比较好呢？

如果用之前字面量的方式来创建，会有一个很大的弊端，那就是创建相同对象的时候，需要写重复的代码

var p1 = {
  name: "张三",
  age: 18,
  height: 1.88,
  address: "广州市",
  eating: function() {
    console.log(this.name + "在吃东西~")
  },
  running: function() {
    console.log(this.name + "在跑步~")
  }
}

var p2 = {
  name: "李四",
  age: 20,
  height: 1.98,
  address: "北京市",
  eating: function() {
    console.log(this.name + "在吃东西~")
  },
  running: function() {
    console.log(this.name + "在跑步~")
  }
}

var p3 = {
  name: "王五",
  age: 30,
  height: 1.78,
  address: "上海市",
  eating: function() {
    console.log(this.name + "在吃东西~")
  },
  running: function() {
    console.log(this.name + "在跑步~")
  }
}

所以我们很有必要学一下如何更好的创建多个对象

方案一：工厂模式

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

// 工厂模式: 工厂函数
function createPerson(name, age, height, address) {
  var p = {}
  p.name = name
  p.age = age
  p.height = height;
  p.address = address

  p.eating = function() {
    console.log(this.name + "在吃东西~")
  }

  p.running = function() {
    console.log(this.name + "在跑步~")
  }

  return p
}

var p1 = createPerson("张三", 18, 1.88, "广州市")
var p2 = createPerson("李四", 20, 1.98, "上海市")
var p3 = createPerson("王五", 30, 1.78, "北京市")

console.log(p1, p2, p3)

工厂模式有个缺点，那就是无法看到我们数据具体的类型，打印出来都是Object类型
什么叫具体的类型呢？
就是拿上面的例子来举例的话，p1,p2,p3应该都是Person类型，但是打印出来却都是Object类型
如果我们还有一个工厂函数叫createAnimal，创建出来的数据也会都是Object类型，而无法是Animal类型

方案二：构造函数

我们先来理解一下什么叫做构造函数

构造函数也称之为构造器，通常是我们在创建对象的时候会调用的函数
但是在其他的编程语言里面，构造函数是存在于类里面的一个方法，称之为构造方法
但是在JS中，它就有点不太一样了

在JS中，当一个普通的函数通过new操作符来调用了，那么该函数就被称为是构造函数

被new操作符调用有什么特殊呢？

如果一个函数被new操作符调用后，他就会执行如下的操作

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

function foo() {
  console.log("foo~, 函数体代码")
}

// foo就是一个普通的函数
// foo()

// 换一种方式来调用foo函数: 通过new关键字去调用一个函数, 那么这个函数就是一个构造函数了
var f1 = new foo
console.log(f1) //foo~, 函数体代码 foo {}

还是Person的例子，我们通过构造函数来实现一下

function Person(name,age,height,address){
	this.name = name
	this.age = age 
	this.height = height
	this.address = address
	
	this.eating = function(){
		console.log(this.name + "在吃东西")
	}
	
	this.running = function(){
		console.log(this.name + '在跑步')
	}
}

var p1 = new Person("张三", 18, 1.88, "广州市")
var p2 = new Person("李四", 20, 1.98, "北京市")

console.log(p1)
// 结果
/*
Person {
  name: '张三',
  age: 18,
  height: 1.88,
  address: '广州市',
  eating: [Function (anonymous)],
  running: [Function (anonymous)]
}
*/
console.log(p2)
// 结果
/*
Person {
  name: '李四',
  age: 20,
  height: 1.98,
  address: '北京市',
  eating: [Function (anonymous)],
  running: [Function (anonymous)]
}
*/
p1.eating() // 张三在吃东西
p2.eating() // 李四在吃东西

这个构造函数可以确保我们的对象是Person类型的

但是他也有缺点，那就是需要我们为每个对象去创建一个函数对象实例

意思就是说调用p1的eating方法和p2的eating方法的时候，其实他们做的事情都是一样的，
但是当你通过构造函数这种方法去调用的时候，会开辟出新的内存空间，这两个方法不是指向同一个空间
当对象多的时候，就会造成内存浪费