阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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 操作符来确定对象类型。由于存在上述问题,我们建议在可以使用其他模式的情况下,不要使用这种模式。

      目录
      目录