构造函数模式

  • A+
所属分类:Web前端
摘要

构造函数可以用来创建特定类型的对象。像 Object 和 Array 这样的原生构造函数,在运行时会自动出现在执行环境中,此外,也可以创建自定义的构造函数,从而定义自定义的对象类型的属性或者方法。例如,可以使用构造函数模式将前面的工厂模式的例子重写:


构造函数模式

构造函数可以用来创建特定类型的对象。像 ObjectArray 这样的原生构造函数,在运行时会自动出现在执行环境中,此外,也可以创建自定义的构造函数,从而定义自定义的对象类型的属性或者方法。例如,可以使用构造函数模式将前面的工厂模式的例子重写:

function preson(name, age, sex, sleep){ 	this.name = name 	this.age = age 	this.sex = sex 	this.sleep = function(){ 		alert(this.name + '睡觉了') 	} }  var preson1 = new preson('小明', 22, '男') var preson2 = new preson('小红', 22, '女') 

在这个例子中,preson() 函数取代了 createpreson() 函数。它们的不同之处:

  • 没有显式地创建对象
  • 直接将属性和方法赋值给了 this 对象
  • 没有 return语句

此外,构造函数的函数名 preson 的第一个字母是大写字母,构造函数的开头字母都需要一个大写的字母,非构造函数则应该是小写字母开头。

构造函数本身也是函数,只不过可以用来创建对象而已。

要创建 preson 的新实例,必须使用 new 操作符。以这种方式调用构造函数实际上会经历以下4个步骤:

  1. 创建一个新对象
  2. 将构造函数的作用域赋给上一步创建的新对象(因此 this 指向了这个新对象)
  3. 执行构造函数中的代码(为这个新对象添加属性)
  4. 返回新对象

在前面例子最后,preson1 和 preson2 分别保存者 preson 的一个不同的实例。这两个对象都有一个 constructor (构造属性),该属性指向 preson,如下所示:

console.log(preson1.constructor === preson)	// true console.log(preson2.constructor === preson)	// true 

对象的 constructor 属性最初是用来标识对象类型的。但是,提到检测对象类型,还是 instanceof 操作符更可靠一些。在例子中创建的所有对象既是 Object 的实例,同使也是 preson 的实例,这一点通过 instanceof 操作符可以得到验证。

console.log(preson1 instanceof Object) // true console.log(preson1 instanceof preson) // true console.log(preson2 instanceof Object) // true console.log(preson2 instanceof preson) // true 

创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型,而这正是构造函数模式胜过工厂模式的地方

  1. 将构造函数当作函数
    构造函数于其他函数的唯一区别,就在于调用它们的方式不同。不过,构造函数毕竟也是函数,不存在定义构造函数的特殊语法。然和函数,只要通过 new 操作符来调用,那么它就可以作为构造函数;而任何函数,如果不通过 new 操作符来调用,那么它就和普通函数一样。例如前面的例子中定义的 preson() 函数可以通过以下任意一种方式来调用。

    // 当作构造函数使用 var preson = new preson('小明', 22, '男') console.log(preson)	// preson {name: "小明", age: 22, sex: "男", sleep: ƒ} preson.sleep()			// 小明睡觉了  // 作为普通函数调用,由于没有 new 出一个新的对象,他的this指向的是所在环境的对象,即window preson('小红', 22, '女') console.log(name, age, sex) sleep()					// 小红睡觉了  // 在另一个对象的作用域中调用 const o = new Object() preson.call(o, '小美', 22, '男') console.log(o)			// {name: "小美", age: 22, sex: "男", sleep: ƒ} o.sleep()	 			//	小美睡觉了 
  2. 构造函数的问题
    构造函数模式虽然好用,但也并非没有缺点。使用构造函数的主要问题,就是每个方法都要在每个实例上重新创建一遍。在前面的例子中,preson1preson2 都有一个名为 sleep() 的方法,但是那两个方法不是同一个 Function 的实例。ECMAScript 中的函数是对象,因此没定义一个函数,也就是实例化了一个对象。从逻辑角度讲,此时的构造函数也可以这样定义:

    function preson(name, age, sex){ 	this.name = name 	this.age = age 	this.sex = sex 	this.sleep = new Function('alert(this.name)')	// 与声明函数在逻辑上是等价的 } 

    从这个角度上来看构造函数,更容易明白每个 preson 实例都包含了一个不同的 Function 实例的本质。说明白些,以这种方式创建函数,会导致不同的作用域链和标识符解析,但是创建 Function 新实例的机制仍然是相同的。因此,在不同实例上的同名函数是不相等的,以下代码可以证明这一点:

    console (preson1.sleep === preson.sleeo)	// false 

    然而,创建两个完成同样任务的 Function 实例的确没必要,况且有 this 对象在,根本不用执行代码前就把这个函数绑定到特定的对象上面。因此,大可以像下面这样,通过把函数定义转移到构造函数外部来解决这个问题

    function preson(name, age, sex){ 	this.name = name 	this.age = age 	this.sex = sex 	this.sleep = sleep }  function sleep(){ 	alert(this.name + '睡觉了') }  var preson1 = new preson('小明', 22, '男') var preson2 = new preson('小红', 22, '女')  console.log(preson1.sleep === preson2.sleep)	// true 

    在这个例子中,把 sleep() 函数的定义转移到了构造函数外部。而在构造函数内部,我们将 sleep 属性设置成全局的 sleep 函数。这样一来,由于 sleep 包含的是一个指向函数的指针,因此 preson1preson2 对象就共享了在全局作用域中定义的同一个 sleep 函数。
    这样做确实解决了两个函数做同一件事的问题,可是新的问题又来了:
    在全局作用域中定义的函数实际上只能被某个对象调用,这然全局作用域优点名不副实。而更让人无法接受的是:如果对象需要定义很多方法,那么就要定义很多个全局函数,于是我们这个自定义的引用类型就丝毫没有封装性可言了。好在,这些问题可以通过原型模式来解决。