(设计模式)3.原型模式

说明：最近公司一直在忙着新版本功能开发天天加班。。。
PS：学习自---掘金的JavaScript设计模式核心原理与应用

一、概念

原型编程范式的核心思想就是利用实例来描述对象，用实例作为定义对象和继承的基础。在JavaScript中，原型编程范式的体现就是基于原型链的继承。

二、原型

• 1.概念 说明：a.在js中，每个构造函数都会有一个prototype属性，它指向构造函数的原型对象，这个原型对象中有一个constructor属性指回构造函数；
  b.每一个实例都有一个__proto__属性，当我们使用构造函数去创建实例时，实例的__proto__属性就会指向构造函数的原型对象。

• 2.代码案例

// 构造函数
function Person(name, age) {
    this.name = name
    this.age = age
}
// 原型对象
Person.prototype.chat = function (){
    console.log('人类通过语言交流')
}
// 实例对象
const xiaoming = new Person('小明', 8)

如图所示解释了原型对象

三、原型链

• 1.概念 当我们试图访问一个JavaScript实例的属性/方法时，它首先搜索这个实例本身；当发现实例没有定义对应的属性/方法时，它会转而去搜索实例的原型对象；如果原型对象中也搜索不到，它就去搜索原型对象的原型对象，这个搜索的轨迹，就叫做原型链。

• 图示原型链

  
  

说明：几乎所有JavaScript中的对象都是位于原型链顶端的Object的实例，除了Object.create(null)创建了一个没有任何原型的对象，那它也不是Object对象。

四、对象深拷贝

• 1.概念 copy一个对象，彼此之间互不干扰

• 2.方法一JSON.stringify PS:缺点是无法处理function、无法处理正则等等，只有当你的对象是一个严格的JSON对象时，才可以使用。

• 3.JSON.stringify案例

const list = {
    total: 101,
    limit: 4,
    page: 1,
    child: ['小明', '小刚', '小宝', '小华']
}

// 完成操作
const list2 = JSON.parse(JSON.stringify(list));
list.page = 3;
list.child = ['kobe', 'james', 'yao', 'harden']

console.log(list2.child); // ['小明', '小刚', '小宝', '小华'] 
console.log(list.child); // ['kobe', 'james', 'yao', 'harden']

• 4.手写深拷贝

function deepClone(obj) {
    // 如果是值类型或null，则直接return
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }

    // 定义结果对象
    let copy = {}

    // 如果对象是数组，则定义结果数组
    if(obj.constructor === Array) {
        copy = []
    }
    
    // 遍历对象的key
    for(let key in obj) {
        if(obj.hasOwnProperty(key)) {
            // 递归调用深拷贝方法
            copy[key] = deepClone(obj[key])
        } else {
            copy[key] = obj[key]
        }
    }
    return copy

}