JavaScript-设计模式(四) 原型模式

JavaScript-设计模式(四) 原型模式

定义：原型模式（Prototype pattern）指的是使用一个原型的实例为模板，通过复制一个已经存在的实例来返回新的实例，而不是从头开始新建实例。原型模式是一种对象创建型模式。

解释

原型模式不仅是一种设计模式，它还是一种编程范式（programming paradigm），是 JavaScript 面向对象系统实现的根基。

使用场景

原型模式用于在创建对象时，通过共享某个对象原型的属性和方法，从而达到提高性能、降低内存占用、代码复用的效果。

实现一个简单的原型模式：

// ES5  
function Person(n,a){
        this.name =  n
        this.age = a
    }
    Person.prototype.say = function (){
        console.log(this.name,this.age)
    }
    // 继承
    function Teacher(n,a,id){
        // 私有属性继承
        Person.call(this,n,a)
        // 新增私有属性
        this.id = id
    }
    Teacher.prototype = new Person()
    Teacher.prototype.sayID = function (){
        console.log(this.id)
    }
    let goudan = new Person('狗蛋',18)
    let hundan = new Teacher('lalal',20,889)
    hundan.say()
    hundan.sayID()

当前存在一个缺陷 ，当前的Teacher创建的实例原型上仍然存在构造函数Person的私有属性，改进如下：

// ES5
function Person(n,a){
        this.name =  n
        this.age = a
    }
    Person.prototype.say = function (){
        console.log(this.name,this.age)
    }
    // 继承
    function Teacher(n,a,id){
        // 私有属性继承
        Person.call(this,n,a)
        // 新增私有属性
        this.id = id
    }
    function Fn (){}
    Fn.prototype = Person.prototype
    Teacher.prototype = new Fn()
	// 绑定构造函数 
    Teacher.prototype.constructor = Teacher()
    Teacher.prototype.sayID = function (){
        console.log(this.id)
    }
    let goudan = new Person('狗蛋',18)
    let hundan = new Teacher('lalal',20,889)
    hundan.say()
    hundan.sayID()

在ES6 中，可以直接通过extends 关键字 去继承

// ES6
class Person{
        constructor(n,a) {
            this.name = n
            this.a = a
        }
    }

    // 继承
    class Teacher extends Person{
        constructor(n,a,id) {
            super(n,a);
            this.id = id
        }
        sayID(){
            console.log(this.name,this.id)
        }
    }
    
    let hunqiu = new Teacher('老师','18',1)
    hunqiu.sayID()

ES6 class 语法糖，省略了太多复杂的内容~

优缺点

优点：

• 减少内存消耗， 系统资源占用少, 所有实例共享同一方法， 不会创建多个
• 拓展性比较好。原型对象继承时， 子类在重写父类原型方法时很方便， 可以很方便 调父类房法， 再扩展。

缺点：

• 优点1既是最大的优点， 也同样带来一个严重问题， 如果共享的对象是引用 对象（ 如array） 则也会造成多个实例共享同一个array， 很可能会相互影响。
• 对已有类进行改造时需要修改源代码，违背了开关原则。

总结

js 在创建对象比较消耗内存、耗时长，可以通过减少内部属性创建的方式降低内存占用。

而原型模式就是使用 javascript 语言的原型特性进行相同属性的共享，从而达到降低内存占用、提高对象创建效率。