js-工厂模式

2021/7/26 23:05:47

本文主要是介绍js-工厂模式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

简单工厂模式

function createPerson(name) {
    var o = {}
    o.name = name
    o.getName = function() {
      console.log(this.name)
    }
    return o
  }

  var person1 = createPerson('zhang san')

  person1.getName()         //zhang san
  console.log(person1.name) //zhang san

工厂模式:

function Person(name) {
    this.name = name
  }

  Person.prototype.getName = function () {
    console.log(this.name)
  }

  function Car(model) {
    this.model = model
  }

  Car.prototype.getModel = function () {
    console.log(this.model)
  }

  function create(type, param) {
    // return new this[type](param)
    if (this instanceof create) { // instanceof 会判断后面的构造函数的原型,是不是存在前面这个对象的原型链里面
      return new this[type](param)
    } else {
      return new create(type, param) // 该写法主要是为了兼容不写new的情况,如:var car1 = create('car', 'Benz')
    }
  }

  create.prototype = {
    person: Person,
    car: Car
  }

  var person1 = new create('person','zhang san')
  /**
   * // 代码执行流程
   *  new create('person','zhang san') -> {
   *    __proto__: create.prototype
   *  }
   *
   *  此时this instanceof create中this指向上述创建的新对象,其原型和create的原型是同一个,为true,执行return new this[type](param)
   *  person1 = new this[type](param) =》 new Person('zhang san') -> {
   *    __proto__: Person.prototype
   *    name: 'zhang san'
   *  }
   *
   */

  var car1 = create('car', 'Benz')

  /**
   * create('car', 'Benz')
   *
   * 此时this instanceof create中的this指向全局对象,和create的原型没啥关系,为false,执行return new create(type, param)
   * new create(type, param) -> new create('car', 'Benz') -> {
   *   __proto__: create.prototype
   * }
   *
   * 此时又需要执行执行构造函数的代码,在执行到this instanceof create的时候,this被赋值给上面创建的新对象,这个时候this的原型和create的原型又是同一个。
   * 所以为true,执行return new this[type](param)
   * car1 = new this[type](param) =》 new Car('Benz') -> {
   *   __proto__: Car.prototype
   *   model: 'Benz'
   * }
   */

  person1.getName() //zhang san
  car1.getModel()   //Benz


这篇关于js-工厂模式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程