JavaScript 面向对象之其它扩展模式

🌙
手机阅读
本文目录结构

其它扩展模式

一般包括下面三种

- 1:动态原型模式(利用原型的动态性)
- 2:寄生构造函数模式(构造函数模式 + 工厂模式)

1. 动态原型模式(利用原型的动态性)

应用场景:这是一个在原型模式上的优化方法; 原理:对原型所做的修改,能够立即在所有实例中得到反映,利用了原型的动态性;

运行思路:可以通过检查某个应该存在的方法是否有效,来决定是否需要初始化原型。只有某个方法不存在的情况下,才会将它添加到原型中。if 中的代码只会在初次调用构造函数时才会执行。此后,原型已经完成初始化,不需要再做什么修改了。有点类似图片延迟加载的思路;分批实现,从而提高脚本的性能;

function Person(name, age, job){
  // 属性
  this.name = name;
  this.age = age;
  this.job = job;

  // 方法
  if (typeof this.sayName !== "function"){
    Person.prototype.sayName = function(){
      console.log(this.name);
    };
  }
}
var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName();

对于采用这种模式创建的对象,还可以使用 instanceof 操作符确定它的类型。仅仅只是一个判断语句,用什么方法来判断,就根据所在的场景来实现的了;

2. 寄生构造函数模式(构造函数模式 + 工厂模式)

通常,在前述的几种模式都不适用的情况下,可以使用寄生(parasitic)构造函数模式。

表现形式:工厂模式的代码;却用构造函数来实例化类;

function SpecialArray(){
  this.name="SpecialArray";
  this.age="2222";

  var values = new Array();
  values.push.apply(values, arguments);
  values.toPipedString = function(){
    return this.join("|");
  };
  return values;
}
var colors = new SpecialArray("red", "blue", "green");
console.log(colors);
console.log(colors.toPipedString()); //"red|blue|green"

构造函数在不返回值的情况下,默认会返回新对象实例。而通过在构造函数的末尾添加一个 return 语句,可以重写调用构造函数时返回的值。

this.name="SpecialArray";
this.age="2222";

这两行代码在加上 return 这个语句后,相当于白写了;

这个模式可以在特殊的情况下用来为对象创建构造函数。假设我们想创建一个具有额外方法的特殊数组。由于不能直接修改 Array 构造函数,因此可以使用这个模式。

关于寄生构造函数模式,有一点需要说明:首先,返回的对象与构造函数或者与构造函数的原型属性之间没有关系;也就是说,构造函数返回的对象与在构造函数外部创建的对象没有什么不同。为此,不能依赖 instanceof 操作符来确定对象类型。由于存在上述问题,我们建议在可以使用其他模式的情况下,不要使用这种模式。

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了