原型模式

在 JavaScript 中, Object.create() 是对原型模式的最好实现.

prototype 原型模式的应用

JavaScript 中不存在 class , ES6 中 class 也只是原型继承的语法糖, 在 js 中我们常用的是通过 prototype 模拟类来得到类的实例, 实现实例间数据、方法的共享.

JavaScript 的原型与原型链

在 JavaScript 中, 创建一个对象有多种方式

// 通过 Object 构造函数创建对象
const obj = new Object({})
// 通过 create 创建对象
const obj2 = Object.create({})
// 字面量方式创建对象
const obj3 = {name: 'Ginger'}
// ...

在 JavaScript 中每一个构造函数都有一个 prototype 属性, 该原型对象指向构造函数的原型对象, 原型对象中 construtor 指回该构造函数
每个实例对象, 都有一个 __proto__ 属性, 该属性指向创建该实例对象的构造函数的原型对象

通过 new 关键字, 获得 Fn 构造函数的实例对象, f 实例对象上并没有 hi 方法, 但是我们可以调用成功, 便是因为原型链的存在.

function Fn(name, age) {
  this.name = name
  this.age = age
}
Fn.prototype.hi = function() {
  console.log('Hi')
}
const f = new Fn()
f.hi() // Hi
console.log(f.__proto__ === Fn.prototype) // true

一个简单的深拷贝

通过两个 api 对 obj 对象进行拷贝, 得到 obj2 改变 obj2 后, obj 内容未发生改变, 但是如果 obj 不是一个严格 json 格式的数据, 他的值是还是一个对象的时候, 这个就无法处理了

const obj = {
  name:'Ginger',
  age:24,
  web:['html', 'js', 'css']
}
const obj2 = JSON.parse(JSON.stringify(obj))
obj2.web.splice(0,1)
console.log(obj.web) // ['html', 'js', 'css']
console.log(obj2.web) // ["js", "css"]

另外一个深拷贝

function DeepClone(obj) {
  // 边界判断
  if(typeof obj !== 'object' || obj === null) {
    return obj
  }

  // 初始化结果值
  let res = {}

  // 如果是数组
  if(obj.constructor === 'array') {
    res = []
  }

  for(let i in obj) {
    if(obj.hasOwnProperty(i)) {
      // 如果值是对象 递归调用
      res[i] = DeepClone(obj[i])
    }
  }

  return res
}