深入JS面向对象

深入JS面向对象

JavaScript的面向对象

对象可以将多个相关联的数据封装到一起，更好的描述一个事物：

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

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

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

创建对象的两种方式

如何创建一个对象呢？

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

  • 这是因为早期很多JavaScript开发者是从Java过来的，它们也更习惯于Java中通过new的方式创建一个对象；

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

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

// 创建一个对象, 对某一个人进行抽象(描述)
// 1.创建方式一: 通过new Object()创建
var obj = new Object() //把obj当成构造函数，通过new操作符来执行函数，创建对象
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 + "在吃东西~")
  }
}

对属性操作的控制 Object.defineProperty

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

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

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

// 删除属性
// delete obj.name
// console.log(obj) // { age:18 }

// 需求: 对属性进行操作时, 进行一些限制
// 限制: 不允许某一个属性被赋值/不允许某个属性被删除/不允许某些属性在遍历时被遍历出来

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

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

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

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

Object .defineProperty(obj, prop, descriptor)

可接收三个参数：

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

返回值：

• 被传递给函数的对象。

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

// 属性描述符是一个对象
Object.defineProperty(obj, "height", {
  // 很多的配置
  value: 1.88
})

console.log(obj) // { name:'why',age:18 }
console.log(obj.height) // 1.88

属性描述符

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

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

1. 数据属性描述符

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

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

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

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

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

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

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

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

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

   // name和age虽然没有使用属性描述符来定义, 但是它们也是具备对应的特性的
   // value: 赋值的value
   // configurable: true
   // enumerable: true
   // writable: true
   var obj = {
     name: "why",
     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) // 北京市 该属性未被删除
   // address不可被重新定义
   // Object.defineProperty(obj, "address", {
   //   value: "广州市",
   //   configurable: true
   // })
   
   // 测试enumerable的作用
   console.log(obj) // {name: "why", age: 18, address: "北京市"}
   for (var key in obj) {
     console.log(key) // name age address
   }
   console.log(Object.keys(obj)) // ['name','age','address']
   
   // 测试Writable的作用
   obj.address = "上海市"
   console.log(obj.address) // 北京市，无法被修改
   

2. 存取属性描述符

   VUE2响应式原理

   特性：

   • [[Configurable]]
   • [[Enumerable]]
   • [[get]]：获取属性时会执行的函数。默认为undefined
   • [[set]]：设置属性时会执行的函数。默认为undefined

   var obj = {
     name: "why",
     age: 18,
     _address: "北京市" // _开头一般是私有属性，但js里面是没有严格意义的私有属性)
   }
   
   // 存取属性描述符
   // 1.隐藏某一个私有属性被希望直接被外界使用和赋值
   // 2.如果我们希望截获某一个属性它访问和设置值的过程时, 也会使用存储属性描述符
   Object.defineProperty(obj, "address", {
     enumerable: true,
     configurable: true, ////不再使用writable和value
     get: function() {
       foo()
       return this._address
     },
     set: function(value) {
       bar()
       this._address = value
     }
   })
   
   console.log(obj.address)
   
   obj.address = "上海市"
   console.log(obj.address)
   
   // 获取了一次address的值
   // 北京市
   // 设置了addres的值
   // 获取了一次address的值
   // 上海市
   function foo() {
     console.log("获取了一次address的值")
   }
   
   function bar() {
     console.log("设置了addres的值") 
   }
   

3. 定义多个属性描述符：Object.defineProperties

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

   var obj = {
     // 私有属性(js里面是没有严格意义的私有属性)
     _age: 18,
     _eating: function() {},
     /*
   		//可代替下面的age:{...}
   		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)
   
   console.log(obj) 
   /*
       {
           _age:19,
           _eating:[Function:_ eating],
           age: [Getter /Setter],
           name:'why'
       }
   */
   

4. 获取对象的属性描述符

   • getOwnPropertyDescriptor
   • getOwnPropertyDescriptors

   // 获取某一个特性属性的属性描述符
   console.log(Object.getOwnPropertyDescriptor(obj, "name"))
   // { configurable: true,enumerable: true,writable: true,value: "why" }
   
   // 获取对象的所有属性描述符
   console.log(Object.getOwnPropertyDescriptors(obj))
   

5. Object的方法对对象限制

   （1）禁止对象扩展新属性：preventExtensions（阻止扩展）：

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

     var obj = {
       name: 'why',
       age: 18
     }
     
     // 1.禁止对象继续添加新的属性
     Object.preventExtensions(obj)
     
     obj.height = 1.88
     obj.address = "广州市"
     
     console.log(obj) // { name:'why',age:18 }
     

   （2）密封对象，不允许配置和删除属性：Object.seal(obj)

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

   （3）冻结对象，不允许修改现有属性： ****Object.freeze(obj)

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

创建对象方案

1. 工厂模式

   我们可以想到的一种创建对象的方式：工厂模式

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

   • 通常我们会有一个工厂方法，通过该工厂方法我们可以产生想要的对象

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

     // 工厂模式: 工厂函数
     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, "北京市")
     
     // 工厂模式的缺点(获取不到对象最真实的类型，例如：Person类，只能是Object类型)
     console.log(p1, p2, p3)
     

2. 构造函数的方式

💡

1. 什么是构造函数？

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

💡

2. 但是JavaScript中的构造函数有点不太一样； JavaScript中的构造函数是怎么样的？

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

new操作符调用的作用

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

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

  function foo() {
    console.log("foo~, 函数体代码")
  }
  
  // foo就是一个普通的函数
  // foo()
  
  // 换一种方式来调用foo函数: 通过new关键字去调用一个函数, 那么这个函数就是一个构造函数了
  var f1 = new foo
  console.log(f1)
  // foo~, 函数体代码
  // 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)
  console.log(p2)
  
  // 构造函数的缺点：需要为每个对象的函数去创建一个函数对象实例，浪费空间
  console.log(p1.eating === p2.eating)
  // false，当第一次执行完后创建的函数对象会被销毁，第二次会创新创建