JavaScript： 设计模式之原型模式

JavaScript： 设计模式之原型模式

JavaScript中存在着许许多多的设计模式，这些模式都可以帮助我们更快更好的规划代码

下面就来介绍一下JavaScript中的原型模式

原型模式：

原型模式是一种 创建对象 的模式

即：

​ 通过一个对象作为原型来创建新的对象（创建一个对象作为另一个对象的__proto__属性）

原理： 原型链

用到的方法：

Object.create(新创建对象的原型对象,[初始化额外的其他属性]) //第二个参数为可选

该方法表示:

​ 创建一个新对象，使用现有的对象来提供新创建的对象的__proto__属性

注：

​ 1、每一个对象都有一个原型，即__proto__属性

​ 2、每一个函数都有一个原型，即prototype属性（函数一的prototype和proto指向同一个原型）

​ 3、原型模式可以理解为： 创建一个对象，作为另一个对象（或者另外很多个）的原型，然后另一个对像就可以使用这些方法了

一个简单的原型模式的案例：

var person = {
        name: "zs",
        age: "18",
        describle: function(){
            console.log(this.name + "的年龄是" + this.age);
        }
    };
    //创建一个p1对象，原型为Person
    var p1 = Object.create(person);
    p1.describle();  // zs的年龄是18

    //创建一个p2对象，原型为Person,添加一个like属性
    var p2 = Object.create(person,{
        "like": {
            value: "敲代码"
        }
    })

    console.log(p2.like);  //  敲代码

原型模式的延生：

原型中（包括原来学的构造函数）的访问规则：

访问时如果在实例化对象中没有该属性，会去原型上找

function Person(){
	age = 18;
}
Person.prototype.username = "zs";
var p = new Person();
console.log(p.username);  //zs

原型中（包括原来学的构造函数）的赋值规则：

一层赋值，在实例化对象中添加或修改

person.name = "zs";
person.obj = {name: "zs", age: 18}
person.fn() = function(){  }

二层赋值，如果实例化对象中没有，就在实例化对象的原型中添加或修改

person.obj.name = "zs";

实现完整代码：

    var person = {
        name: "张三",
        age: 18,
        like: function(){
            console.log("I like Code");  
        },
        address: {
            province: "广东",
            city: "深圳"
        }
    };

    var p1 = Object.create(person);
    var p2 = Object.create(person);
    var p3 = Object.create(person);

    p1.name = "李四";
    p1.address = {
        province: "四川",
            city: "成都"
    }
    console.log(p1.name);  //  李四
    console.log(p2.name);  //  张三
    console.log(p3.name);  //  张三

    console.log(p1.address);  //  {province: "四川", city: "成都"}
    console.log(p2.address);  //  {province: "广东", city: "深圳"}
    console.log(p3.address);  //  {province: "广东", city: "深圳"}


    p2.address.city = "广州";
    console.log(p1.address);  //  {province: "四川", city: "成都"}
    console.log(p2.address);  //  {province: "广东", city: "广州"}
    console.log(p3.address);  //  {province: "广东", city: "广州"}