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

发布于:2023-01-20 ⋅ 阅读:(7) ⋅ 点赞:(0) ⋅ 评论:(0)

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 语言的原型特性进行相同属性的共享,从而达到降低内存占用、提高对象创建效率。