美文网首页
js面向对象(七)混合的构造函数/原型方式

js面向对象(七)混合的构造函数/原型方式

作者: bug喵 | 来源:发表于2018-07-01 21:39 被阅读0次

4.混合的构造函数/原型方式

联合使用构造函数和原型方式,就可像用其他程序设计语言一样创建对象。这种概念非常简单,即用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法)。结果是,所有函数都只创建一次,而每个对象都具有自己的对象属性实例。

我们重写了前面的例子,代码如下:

function Car(sColor,iDoors,iMpg) {
  this.color = sColor;
  this.doors = iDoors;
  this.mpg = iMpg;
  this.drivers = new Array("Mike","John");
}

Car.prototype.showColor = function() {
  alert(this.color);
};

var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);

oCar1.drivers.push("Bill");

alert(oCar1.drivers);   //输出 "Mike,John,Bill"
alert(oCar2.drivers);   //输出 "Mike,John"

现在就更像创建一般对象了。所有的非函数属性都在构造函数中创建,意味着又能够用构造函数的参数赋予属性默认值了。因为只创建 showColor() 函数的一个实例,所以没有内存浪费。此外,给 oCar1 的 drivers 数组添加 "Bill" 值,不会影响到 oCar2 的数组,所以输出这些数组的值时,oCar1.drivers 显示的是 "Mike,John,Bill",而 oCar2.drivers 显示的是 "Mike,John"。因为使用了原型方式,所以仍然能利用 instanceof 运算符来判断对象的类型。

这种方式是 ECMAScript 采用的主要方式,它具有其他方式的特性,却没有他们的副作用。不过,有些开发者仍觉得这种方法不够完美。

5.动态原型方法

对于习惯使用其他语言的开发者来说,使用混合的构造函数/原型方式感觉不那么和谐。毕竟,定义类时,大多数面向对象语言都对属性和方法进行了视觉上的封装。请考虑下面的 Java 类:

class Car {
  public String color = "blue";
  public int doors = 4;
  public int mpg = 25;

  public Car(String color, int doors, int mpg) {
    this.color = color;
    this.doors = doors;
    this.mpg = mpg;
  }
  
  public void showColor() {
    System.out.println(color);
  }
}

Java 很好地打包了 Car 类的所有属性和方法,因此看见这段代码就知道它要实现什么功能,它定义了一个对象的信息。批评混合的构造函数/原型方式的人认为,在构造函数内部找属性,在其外部找方法的做法不合逻辑。因此,他们设计了动态原型方法,以提供更友好的编码风格。

动态原型方法的基本想法与混合的构造函数/原型方式相同,即在构造函数内定义非函数属性,而函数属性则利用原型属性定义。唯一的区别是赋予对象方法的位置。下面是用动态原型方法重写的 Car 类:

function Car(sColor,iDoors,iMpg) {
  this.color = sColor;
  this.doors = iDoors;
  this.mpg = iMpg;
  this.drivers = new Array("Mike","John");
  
  if (typeof Car._initialized == "undefined") {
    Car.prototype.showColor = function() {
      alert(this.color);
    };
    
    Car._initialized = true;
  }
}

直到检查 typeof Car._initialized 是否等于 "undefined" 之前,这个构造函数都未发生变化。这行代码是动态原型方法中最重要的部分。如果这个值未定义,构造函数将用原型方式继续定义对象的方法,然后把 Car._initialized 设置为 true。如果这个值定义了(它的值为 true 时,typeof 的值为 Boolean),那么就不再创建该方法。简而言之,该方法使用标志(_initialized)来判断是否已给原型赋予了任何方法。该方法只创建并赋值一次,传统的 OOP 开发者会高兴地发现,这段代码看起来更像其他语言中的类定义了。

相关文章

  • js面向对象

    1.js创建对象常用的方式 1.混合的构造函数,原型方式(推荐): 2.工厂方式 3.构造函数方式 4.原型方式 ...

  • js面向对象(七)混合的构造函数/原型方式

    4.混合的构造函数/原型方式 联合使用构造函数和原型方式,就可像用其他程序设计语言一样创建对象。这种概念非常简单,...

  • 2020-12-15

    js对象的创建和函数 创建对象 工厂模式 构造函数 原型方式+构造函数

  • 3-javascript 构造函数

    js中面向对象编程是基于构造函数(consstructor)和原型链(prototype)的。 构造函数作为对象的...

  • Javascript高级话题

    面向对象、作用域、闭包、设计模式等。 1. 常见的JS类定义方式 构造函数原型 对象创建 原型法是通用老方法,对象...

  • js 主流创建类操作

    JS 创建类:混合的构造函数/原型方式 动态原型创建 新的Class - 类创建

  • js原型prototype原型链__proto__以及必会的ne

    什么是构造函数 构造函数是典型的面向对象编程语言,js的对象语言体系,是基于构造函数和原型链的构造函数是生成对象实...

  • js面向对象基础—常用设计模式

    这篇文章主要介绍了面向对象JS基础讲解,工厂模式、构造函数模式、原型模式、混合模式、动态原型模式,需要的朋友可以参...

  • ES5继承

    JS中没有其他面向对象中的“类”的概念,其继承方式主要通过“原型”,具体包括:单纯的原型链、借用构造函数(cons...

  • 一些零散的js学习

    推荐的创建对象方式#### 方法一:混合的构造函数/原型方式function Car(sColor,iDoors,...

网友评论

      本文标题:js面向对象(七)混合的构造函数/原型方式

      本文链接:https://www.haomeiwen.com/subject/fafhuftx.html