Javascript中的构造函数

快来打我* 2022-07-17 00:38 154阅读 0赞

ECMAScript 中的构造函数可用来创建特定类型的对象。像  Object 和  Array 这样的原生构造函数，在运行时会自动出现在执行环境中。此外，也可以创建自定义的构造函数，从而定义  
自定义对象类型的属性和方法。例如，可以使用构造函数模式将前面的例子重写如下。  
function Person(name, age, job)\{  
this.name = name;  
this.age = age;  
this.job = job;  
this.sayName = function()\{  
alert(this.name);  
\};  
\}  
var person1 = new Person("Nicholas", 29, "Software Engineer");  
var person2 = new Person("Greg", 27, "Doctor");  
  
在这个例子中，  Person()函数取代了  createPerson()函数。我们注意到，  Person()中的代码  
除了与  createPerson()中相同的部分外，还存在以下不同之处：  
  没有显式地创建对象；  
  直接将属性和方法赋给了 this  对象；  
  没有 return  语句。  
此外，还应该注意到函数名  Person 使用的是大写字母 *P*。按照惯例，构造函数始终都应该以一个  
大写字母开头，而非构造函数则应该以一个小写字母开头。这个做法借鉴自其他  OO 语言，主要是为了  
区别于  ECMAScript 中的其他函数；因为构造函数本身也是函数，只不过可以用来创建对象而已。  
要创建  Person 的新实例，必须使用  new 操作符。以这种方式调用构造函数实际上会经历以下 4  
个步骤：  
(1)  创建一个新对象；  
(2)  将构造函数的作用域赋给新对象（因此 this  就指向了这个新对象）；  
(3)  执行构造函数中的代码（为这个新对象添加属性）；  
(4)  返回新对象。  
在前面例子的最后，  person1 和  person2 分别保存着  Person 的一个不同的实例。这两个对象都  
有一个  constructor（构造函数）属性，该属性指向 Person，如下所示。  
alert(person1.constructor == Person); //true  
alert(person2.constructor == Person); //true  
对象的  constructor 属性最初是用来标识对象类型的。但是，提到检测对象类型，还是 instanceof  操作符要更可靠一些。我们在这个例子中创建的所有对象既是 Object 的实例，同时也是  Person  
的实例，这一点通过  instanceof 操作符可以得到验证。  
alert(person1 instanceof Object); //true  
alert(person1 instanceof Person); //true  
alert(person2 instanceof Object); //true  
alert(person2 instanceof Person); //true  
创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型；而这正是构造函数模式  
胜过工厂模式的地方。在这个例子中，  person1 和  person2 之所以同时是  Object 的实例，是因为所

有对象均继承自 Object（详细内容稍后讨论）。

1. 将构造函数当作函数  
构造函数与其他函数的唯一区别，就在于调用它们的方式不同。不过，构造函数毕竟也是函数，不  
存在定义构造函数的特殊语法。任何函数，只要通过  new 操作符来调用，那它就可以作为构造函数；而  
任何函数，如果不通过  new 操作符来调用，那它跟普通函数也不会有什么两样。例如，前面例子中定义  
的 Person()函数可以通过下列任何一种方式来调用。  
//  当作构造函数使用  
var person = new Person("Nicholas", 29, "Software Engineer");  
person.sayName(); //"Nicholas"  
// 作为普通函数调用  
Person("Greg", 27, "Doctor"); // 添加到  window  
window.sayName(); //"Greg"  
// 在另一个对象的作用域中调用  
var o = new Object();  
Person.call(o, "Kristen", 25, "Nurse");  
o.sayName(); //"Kristen"  
  
这个例子中的前两行代码展示了构造函数的典型用法，即使用 new  操作符来创建一个新对象。接下  
来的两行代码展示了不使用  new 操作符调用  Person()会出现什么结果：属性和方法都被添加给 window  
对象了。有读者可能还记得，当在全局作用域中调用一个函数时， this  对象总是指向 Global  对象（在  
浏览器中就是  window 对象）。因此，在调用完函数之后，可以通过 window  对象来调用 sayName()方  
法，并且还返回了"Greg"。最后，也可以使用 call()（或者 apply()）在某个特殊对象的作用域中  
调用  Person()函数。这里是在对象  o 的作用域中调用的，因此调用后  o 就拥有了所有属性和  sayName()  
方法。  
2.  构造函数的问题  
构造函数模式虽然好用，但也并非没有缺点。使用构造函数的主要问题，就是每个方法都要在每个  
实例上重新创建一遍。在前面的例子中，  person1 和  person2 都有一个名为  sayName()的方法，但那  
两个方法不是同一个  Function 的实例。不要忘了——ECMAScript 中的函数是对象，因此每定义一个  
函数，也就是实例化了一个对象。从逻辑角度讲，此时的构造函数也可以这样定义。  
function Person(name, age, job)\{  
this.name = name;  
this.age = age;  
this.job = job;  
**this.sayName = new Function("alert(this.name)"); //** 与声明函数在逻辑上是等价的  
\}  
从这个角度上来看构造函数，更容易明白每个  Person 实例都包含一个不同的  Function 实例（以  
显示  name 属性）的本质。说明白些，以这种方式创建函数，会导致不同的作用域链和标识符解析，但  
创建  Function 新实例的机制仍然是相同的。因此，不同实例上的同名函数是不相等的，以下代码可以  
证明这一点。  
alert(person1.sayName == person2.sayName); //false  
然而，创建两个完成同样任务的  Function 实例的确没有必要；况且有  this 对象在，根本不用在  
执行代码前就把函数绑定到特定对象上面。因此，大可像下面这样，通过把函数定义转移到构造函数外  
部来解决这个问题。  
function Person(name, age, job)\{  
this.name = name;  
this.age = age;  
this.job = job;  
**this.sayName = sayName;**  
\}  
**function sayName()\{**   
**alert(this.name);**  
**\}**  
var person1 = new Person("Nicholas", 29, "Software Engineer");  
var person2 = new Person("Greg", 27, "Doctor");  
  
在这个例子中，我们把  sayName()函数的定义转移到了构造函数外部。而在构造函数内部，我们  
将 sayName 属性设置成等于全局的  sayName 函数。这样一来，由于  sayName 包含的是一个指向函数  
的指针，因此  person1 和  person2 对象就共享了在全局作用域中定义的同一个 sayName()函数。这  
样做确实解决了两个函数做同一件事的问题，可是新问题又来了：在全局作用域中定义的函数实际上只  
能被某个对象调用，这让全局作用域有点名不副实。而更让人无法接受的是：如果对象需要定义很多方  
法，那么就要定义很多个全局函数，于是我们这个自定义的引用类型就丝毫没有封装性可言了。好在，  
这些问题可以通过使用原型模式来解决。