作为程序员，我们常常会听见一种说法，那就是面向对象编程。那到底什么是对象呢？有改如何面向对象编程呢？今天我们就来详细讲讲
什么是对象呢？
对象是JavaScript中一个非常重要的概念，这是因为对象可以将多个相关联的数据封装到一起，更好的描述一个事物
比如我们可以描述一辆车：Car，具有颜色（color）、速度（speed）、品牌（brand）、价格（price），行驶（travel）等等；
又比如我们可以描述一个人：Person，具有姓名（name）、年龄（age）、身高（height），吃东西（eat）、跑步（run）等等；
那么对象的使用有什么好处呢？
使用对象来描述事物，更有利于我们将现实的事物，抽离成代码中某个数据结构，所以有一些编程语言就是纯面向对象的编程语言，比Java。你在实现任何现实抽象时都需要先创建一个类，根据类再去创建对象
那么在JavaScript中的对象又是怎么样的呢？
在JavaScript中的对象被设计成一组属性的
无序集合，像是一个哈希表，有key和value组成。
key是一个标识符名称，value可以是任意类型，也可以是其他对象或者函数类型如果值是一个函数，那么我们可以称之为是对象的方法
如何创建一个对象呢？
早期使用创建对象的方式最多的是使用Object类，并且使用new关键字来创建一个对象：这是因为早期很多JavaScript开发者是从Java过来的，它们也更习惯于Java中通过new的方式创建一个对象
javascript
// 1.创建方式一: 通过new Object()创建
var obj = new Object()
obj.name = "zayyo"
obj.age = 18
obj.height = 1.88
obj.running = function() {
console.log(this.name + "在跑步~")
}后来很多开发者为了方便起见，都是直接通过字面量的形式来创建对象：这种形式看起来更加的简洁，并且对象和属性之间的内聚性也更强，所以这种方式后来就流行了起来
javascript
// 2.创建方式二: 字面量形式
var info = {
name: "kobe",
age: 40,
height: 1.98,
eating: function() {
console.log(this.name + "在吃东西~")
}
}在前面我们的属性都是直接定义在对象内部，或者直接添加到对象内部的，但是这样来做的时候我们就不能对这个属性进行一些限制了；比如这个属性是否是可以通过delete删除的？这个属性是否在for-in遍历的时候被遍历出来呢？
对象属性的操作
如果我们想要对一个属性进行比较精准的操作控制，那么我们就可以使用属性描述符，通过属性描述符可以精准的添加或修改对象的属性，属性描述符需要使用 Object.defineProperty 来对属性进行添加或者修改
Object.defineProperty()
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
object.defineProperty ( obj, prop,descriptor)
Object.defineProperty()可以接收三个参数
参数
- obj要定义属性的对象
- prop要定义或修改的属性的名称或 Symbol
- descriptor要定义或修改的属性描述符
返回值
被传递给函数的对象。
属性描述符分类
属性描述符的类型有两种：
- 数据属性(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
代码示例：
javascript
// name和age虽然没有使用属性描述符来定义, 但是它们也是具备对应的特性的
// value: 赋值的value
// configurable: true
// enumerable: true
// writable: true
var obj = {
name: "zayyo",
age: 18
}
// 数据属性描述符
// 用了属性描述符, 那么会有默认的特性
Object.defineProperty(obj, "address", {
// 很多配置
value: "广州市", // 默认值undefined
// 该特殊不可删除/也不可以重新定义属性描述符
configurable: false, // 默认值false
// 该特殊是配置对应的属性(address)是否是可以枚举
enumerable: true, // 默认值false
// 该特性是属性是否是可以赋值(写入值)
writable: false // 默认值false
})
// 测试configurable的作用
delete obj.name
console.log(obj.name) //undefined
delete obj.address
console.log(obj.address) //广州市
// 因为上面configurable已经设置成false所以Object.defineProperty修改也是无效的
Object.defineProperty(obj, "address", {
value: "广州市",
configurable: true
})
// 测试enumerable的作用
console.log(obj)
for (var key in obj) {
console.log(key)
}
console.log(Object.keys(obj))
// 测试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
下面我们同样用代码来示例
javascript
var obj = {
name: "zayyo",
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)
obj.address = "广州市"
console.log(obj.address)
function foo() {
console.log("获取了一次address的值")
}
function bar() {
console.log("设置了addres的值")
}
//set、get的定义方法二、
var obj = {
// 私有属性(js里面是没有严格意义的私有属性)
_age: 18,
_eating: function() {},
set age(value) {
this._age = value
},
get age() {
return this._age
}
}那如果过我们想同时定义多个属性呢？接下里我们就讲解如何同时定义多个属性的方法
如何同时定义多个属性？
Object.defineProperties() 方法直接在一个对象上定义 多个 新的属性或修改现有属性，并且返回该对象
代码示例
javascript
var obj = {}
Object.defineProperties(obj, {
name: {
configurable: true,
enumerable: true,
writable: true,
value: "zayyo"
},
age: {
configurable: true,
enumerable: true,
get: function() {
return this._age
},
set: function(value) {
this._age = value
}
}
})还有一些不常用但是确实存在的一些对象方法给大家补充一下
对象方法补充
获取对象的属性描述符：
- getOwnPropertyDescriptor（获取对象某一个特性属性的属性描述符）
- getOwnPropertyDescriptors（获取对象的所有属性描述符）
代码示例：
javascript
var obj = {
// 私有属性(js里面是没有严格意义的私有属性)
_age: 18,
_eating: function() {}
}
Object.defineProperties(obj, {
name: {
configurable: true,
enumerable: true,
writable: true,
value: "zayyo"
},
age: {
configurable: true,
enumerable: true,
get: function() {
return this._age
},
set: function(value) {
this._age = value
}
}
})
// 获取对象某一个特性属性的属性描述符
console.log(Object.getOwnPropertyDescriptor(obj, "name"))
console.log(Object.getOwnPropertyDescriptor(obj, "age"))
// 获取对象的所有属性描述符
console.log(Object.getOwnPropertyDescriptors(obj))禁止对象扩展新属性：preventExtensions
给一个对象添加新的属性会失败（在严格模式下会报错）
代码示例：
javascript
var obj = {
name: 'zayyo',
age: 18
}
// 1.禁止对象继续添加新的属性
Object.preventExtensions(obj)
obj.height = 1.88
obj.address = "广州市"
console.log(obj)密封对象，不允许配置和删除属性：seal
实际是调用preventExtensions ，并且将现有属性的configurable:false
代码示例：
javascript
// 2.禁止对象配置/删除里面的属性
// 方法一、自己遍历
for (var key in obj) {
Object.defineProperty(obj, key, {
configurable: false,
enumerable: true,
writable: true,
value: obj[key]
})
}
// 方法二、seal属性
Object.seal(obj)
delete obj.name
console.log(obj.name)冻结对象，不允许修改现有属性： freeze
实际上是调用seal，并且将现有属性的writable: false
代码示例：
javascript
// 3.让属性不可以修改(writable: false)
Object.freeze(obj)
obj.name = "kobe"
console.log(obj.name)那如果我们现在希望创建一系列的对象：比如Person对象，包括张三、李四、王五、李雷等等，他们的信息各不相同，那么采用什么方式来创建比较好呢？
创建多个对象的方案
学过java的同学应该知道，设计模式中有一个工厂设计模式，它就很好的能够满足我们的需求，通常我们会有一个工厂方法，通过该工厂方法我们可以产生想要的对象
javascript
// 工厂模式: 工厂函数
// 定义一个 createPerson函数
function createPerson(name, age, height, address) {
// 1、函数内首先先创建一个对象
var p = {}
// 2、再进行对对象进行创建属性和赋值
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类型 但是从某些角度来说，这些对象应该有一个他们共同的类型，下面我们来看一下另外一种方法：构造函数的方式
我们先理解什么是构造函数?
什么是构造函数?---想详细了解可以点击阅读我的这篇文章
构造函数也是一个普通的函数，从表现形式来说，和千千万万个普通的函数没有任何区别，构造函数也是一个普通的函数，从表现形式来说，和千千万万个普通的函数没有任何区别，我们也可以简单的理解为构造函数就是JavaScript函数；
用构造函数创建多个对象
javascript
// 规范: 构造函数的首字母一般是大写,用构造函数创建多个对象
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)
console.log(p2)
p1.eating()
p2.eating()这个构造函数可以确保我们的对象是有Person的类型的。
但是构造函数就没有缺点了吗？
构造函数也是有缺点的，它在于我们需要为每个对象的函数去创建一个函数对象实例
JavaScript中的类和对象
当我们编写如下代码的时候，我们会如何来称呼这个Person呢？
javascript
function Person(){
}
var p1 =new Person()
var p2 =new Person()在JS中Person应该被称之为是一个构造函数，从很多面向对象语言过来的开发者，也习惯称之为类，因为类可以帮助我们创建出来对象p1、p2。如果从面向对象的编程范式角度来看，Person确实是可以称之为类的
接下来我们详细讲解一下面向对象的特性----继承
面向对象的特性 -- 继承
面向对象有三大特性：封装、继承、多态
封装：我们前面将属性和方法封装到一个类中，可以称之为封装的过程
继承：继承是面向对象中非常重要的，不仅仅可以减少重复代码的数量，也是多态前提（纯面向对象中）
多态：不同的对象在执行时表现出不同的形态
那么这里我们核心讲继承
那么继承是做什么呢？
继承可以帮助我们将重复的代码和逻辑抽取到父类中，子类只需要直接继承过来使用即可
在真正实现继承之前，我们先来理解一个非常重要的概念：原型链
JavaScript原型链
我们知道，从一个对象上获取属性，如果在当前对象中没有获取到就会去它的原型上面获取,这种往上级去寻找的方式，就形成了原型链
代码示例:
javascript
var obj = {
name: "zayyo",
age: 18
}
// [[get]]操作
// 1.在当前的对象中查找属性
// 2.如果没有找到, 这个时候会去原型链(__proto__)对象上查找
// 在obj的上级没有address属性
obj.__proto__ = {
}
// 原型链
// 在obj的上上级也没有address属性
obj.__proto__.__proto__ = {
}
// 在obj的上上上级添加了一个address属性， 就可以找到address的值，然后打印出来
obj.__proto__.__proto__.__proto__ = {
address: "广州市"
}
console.log(obj.address)那么什么地方是原型链的尽头呢？比如第三个对象是否也是有原型__proto__属性呢
那我们就用代码时打印试试，看能不能找到它的尽头
javascript
var obj = { name: "zayyo" }
// console.log(obj.address)
// 到底是找到哪一层对象之后停止继续查找了呢?
// 字面对象obj的原型是 [Object: null prototype] {}
console.log(obj.__proto__) //[Object: null prototype] {}
// obj.__proto__ => [Object: null prototype] {}
console.log(obj.__proto__.__proto__) //null找到后面，我们发现obj.proto.__proto__打印的已经是null了，obj.__proto__打印的是[Object: null prototype] {}，很明显字面对象obj的原型就是== [Object: null prototype] {}==
那么我们可能会问题： [Object: null prototype] {} 原型有什么特殊吗？
- 特殊一：该对象有原型属性，但是它的原型属性已经指向的是null，也就是已经是顶层原型了
- 特殊二：该对象上有很多默认的属性和方法
我们来打印看看顶层对象里面都有些什么，这里的属性太多了，我们就不一一解释了，感兴趣的同学自己去查吧
javascript
console.log(Object.getOwnPropertyDescriptors(Object.prototype))
// {
// constructor: { //构造属性
// value: [Function: Object],
// writable: true,
// enumerable: false,
// configurable: true
// },
// __defineGetter__: {
// value: [Function: __defineGetter__],
// writable: true,
// enumerable: false,
// configurable: true
// },
// __defineSetter__: {
// value: [Function: __defineSetter__],
// writable: true,
// enumerable: false,
// configurable: true
// },
// hasOwnProperty: {
// value: [Function: hasOwnProperty],
// writable: true,
// enumerable: false,
// configurable: true
// },
// __lookupGetter__: {
// value: [Function: __lookupGetter__],
// writable: true,
// enumerable: false,
// configurable: true
// },
// __lookupSetter__: {
// value: [Function: __lookupSetter__],
// writable: true,
// enumerable: false,
// configurable: true
// },
// isPrototypeOf: {
// value: [Function: isPrototypeOf],
// writable: true,
// enumerable: false,
// configurable: true
// },
// propertyIsEnumerable: {
// value: [Function: propertyIsEnumerable],
// writable: true,
// enumerable: false,
// configurable: true
// },
// toString: {
// value: [Function: toString],
// writable: true,
// enumerable: false,
// configurable: true
// },
// valueOf: {
// value: [Function: valueOf],
// writable: true,
// enumerable: false,
// configurable: true
// },
// ['__proto__']: {
// get: [Function: get __proto__],
// set: [Function: set __proto__],
// enumerable: false,
// configurable: true
// },
// toLocaleString: {
// value: [Function: toLocaleString],
// writable: true,
// enumerable: false,
// configurable: true
// }
// }我们来试试给改变对象的隐性原型（proto），隐私原型一般指向顶层原型[Object: null prototype] {}，我们们修改了就 等于在他们中间加了一层，最终的顶层原型还是[Object: null prototype] {}，这是毋庸置疑的
javascript
var obj = {
name: "zayyo",
age: 18
}
var obj2 = {
address: "广州市"
}
obj.__proto__ = obj2//把boj的隐性原型指向boj2，obj2变成了obj的上层原型
Object.prototype //原本的顶层原型
console.log(obj.__proto__) //{ address: '北京市' }
console.log(obj.__proto__.__proto__) //[Object: null prototype] {}
console.log(obj.__proto__.__proto__.__proto__) //null
console.log(Object.prototype)//[Object: null prototype] {}
console.log(obj.__proto__ === Object.prototype) //false那么如果我们想要实现继承，要怎么来实现呢？
如果我们现在需要实现继承，那么就可以利用原型链来实现了，接下来我们用代码给大家演示一下
javascript
在这里插入代码片