JavaScript创建对象方式之工厂函数、构造函数

使用Object构造函数或对象字面量可以方便地创建对象,但这些方式明显不足:创建具有同样接口的多个对象需要重复编写很多代码。

  • ES5并没有正式支持面向对象的结构,比如类或继承。

  • ES6的类都仅仅是封装了Es5.1构造函数加原型继承的语法糖而已。

  • 工厂模式

  • 构造函数模式

  • 原型模式

  • 对象迭代

工厂模式

  • 工厂模式是一种设计模式,广泛应用于软件工厂领域,用于抽象创建特定对象的过程。
  function createPerson(name, age, job) {
    let o= new Object();
    o.name = name;
    o.age = age;
    o.hob = job;
    o.sayName = function() {
      console.log(this.name);
    };
    return  o;
  }

  let person1 = createPerson('yl', 25, 'F2E');
  let person2 = createPerson('xl', 25, 'EE');
  • 这种工厂模式虽然可以解决创建多个类似对象的问题,但没有解决对象标识问题(即新创建的对象是什么类型)。

构造函数模式

  • ES的构造函数适用于创建特定类型对象的。像Object和Array这样的原生构造函数,运行时可以直接在执行环境中使用。当然也可以自定义构造函数,以函数的形式为自己的对象类型定义属性和方法。
  // 将上面的工厂模式改成构造函数
  function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function() {
      console.log(this.name);
    };
  }
  let p1 = new Person('yk', 29, 'SE');

  • Person()构造函数与createPerson()工厂函数的区别:

    • 没有显式地创建对象
    • 属性和方法直接赋值给了this
    • 没有return
  • 构造函数,函数名首字母大写,依此来区分普通函数

  • 要从创建Person实例,应使用new操作符,以这种方式调用构造函数会执行如下操作:

    1. 在内部创建一个新对象
    2. 这个新对象内部的[[Prototype]]特性被赋值为构造函数的prototype属性。
    3. 构造函数内部的this被赋值为这个新对象(this指向新对象)。
    4. 执行构造函数内部的代码(给新对象添加属性)。
    5. 如果构造函数返回非空对象,则返回该对象;否则,返回刚创建的新对象
  • person.constructor == Person

    • constructor本来是用来标识对象类型的。
    • instanceof操作符是确定对象类型更可靠的方式。
  • 自定义对象都继承自Object

  • 构造函数不一定要写成函数声明的形式。赋值给变量的函数表达式也可以表示构造函数。

      let Person = function(name, age, job){
        this.name = name;
        this.age = age;
        this.job = job
      }
    
  • 在实例化时,如果不想传参数,那么构造函数后面的括号可加可不加。只要有new操作符,就可以调用相应的构造函数。

  1. 构造函数也是函数

    • 构造函数与普通函数唯一的区别就是调用方式不同。
    • 除此之外,构造函数也是函数。并没有把某个函数定义为构造函数的特殊语法。
    • 任何函数只要使用new操作符调用就是构造函数,而不使用new操作符调用的函数就是普通函数。
     // 作为构造函数
     let person = new Person('yl', 29, 'SE');
     person.sayName(); // yl
    
     // 作为函数调用
     Person('yl', 29, 'SE'); // 挂载到window对象
     window.syName(); // 'yl'
    
     // 在另一个对象的作用域中调用
     let o = new Object();
     Person.call(o, 'kk', 25, 'Nurse');
     o.sayName(); // 'kk'
    
    • 第一种就是典型的构造函数调用方式
    • 第二种没有使用new操作符,结果会将属性和方法添加到window对象上。在调用一个函数而没有明确设置this值得情况下(没有作为对象的方法调用,或没有使用call()/apply()调用),this始终指向Global对象。
    • 第三个,这里通过call()或apply()调用函数,同时将特定对象指定为作用域。
  2. 构造函数的问题

    • 构造函数的主要问题在于,其定义的方法会在每个实例上都创建一遍。
    • 因此对前面的例子而言,person1和person2都有名为sayName()的方法,但这两个方法不是同一个Function实例。
    • 我们知道,ECMAScript中的函数是对象,因此每次定义函数时,都会初始化一个对象。
     function Person(name, age, job) {
       this.name = name;
       this.age = age;
       this.job = job;
       this.asyName = new Function("console.log(this.name)"); // 逻辑等价
     }
    
    • 因为都做一样的事,所以没必要定义两个不同的Function实例。况且,this对象可以把函数与对象的绑定推迟到运行时。
    • 可以将函数转移到构造函数外部;但这样的话全局作用域就被搞乱了。

原型链模式

  • 每个函数都会创建一个prototype属性,这个属性是一个对象,包含应该由特定引用类型的实例共享的属性和方法。

  • 实际上,这个对象就是通过调用构造函数创建的对象的原型。

  • 使用原型对象的好处是,在它上面定义的属性和方法可以被对象实例共享。

  • 原来在构造函数中直接赋给对象实例的值,可以直接赋值给它们的原型。

  • 下一篇见

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值