构造函数

构造函数

内容引导：

• 构造函数语法
• 分析构造函数
• 构造函数和实例对象的关系
  • 实例的 constructor 属性
  • instanceof 操作符
• 普通函数调用和构造函数调用的区别
• 构造函数的返回值
• 构造函数的问题

更优雅的工厂函数：构造函数

一种更优雅的工厂函数就是下面这样，构造函数：

function Person (name, age) {
  this.name = name
  this.age = age
  this.sayName = function () {
    console.log(this.name)
  }
}

var p1 = new Person('Jack', 18)
p1.sayName() // => Jack

var p2 = new Person('Mike', 23)
p2.sayName() // => Mike

解析构造函数代码的执行

在上面的示例中，Person() 函数取代了 createPerson() 函数，但是实现效果是一样的。

这是为什么呢？

我们注意到，Person() 中的代码与 createPerson() 有以下几点不同之处：

• 没有显示的创建对象
• 直接将属性和方法赋给了 this 对象
• 没有 return 语句
• 函数名使用的是大写的 Person

而要创建 Person 实例，则必须使用 new 操作符。

以这种方式调用构造函数会经历以下 4 个步骤：

1. 创建一个新对象
2. 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）
3. 执行构造函数中的代码
4. 返回新对象

下面是具体的伪代码：

function Person (name, age) {
  // 当使用 new 操作符调用 Person() 的时候，实际上这里会先创建一个对象
  // var instance = {}
  // 然后让内部的 this 指向 instance 对象
  // this = instance
  // 接下来所有针对 this 的操作实际上操作的就是 instance

  this.name = name
  this.age = age
  this.sayName = function () {
    console.log(this.name)
  }

  // 在函数的结尾处会将 this 返回，也就是 instance
  // return this
}

构造函数和实例对象的关系

使用构造函数的好处不仅仅在于代码的简洁性，更重要的是我们可以识别对象的具体类型了。

在每一个实例对象中同时有一个 constructor 属性，该属性指向创建该实例的构造函数：

console.log(p1.constructor === Person) // => true
console.log(p2.constructor === Person) // => true
console.log(p1.constructor === p2.constructor) // => true

对象的 constructor 属性最初是用来标识对象类型的，

但是，如果要检测对象的类型，还是使用 instanceof 操作符更可靠一些：

console.log(p1 instanceof Person) // => true
console.log(p2 instanceof Person) // => true

总结：

• 构造函数是根据具体的事物抽象出来的抽象模板
• 实例对象是根据抽象的构造函数模板得到的具体实例对象
• 每一个实例对象都具有一个 constructor 属性，指向创建该实例的构造函数
  • 注意： constructor 是实例的属性的说法不严谨，具体后面的原型会讲到
• 可以通过实例的 constructor 属性判断实例和构造函数之间的关系
  • 注意：这种方式不严谨，推荐使用 instanceof 操作符，后面学原型会解释为什么

构造函数的问题

使用构造函数带来的最大的好处就是创建对象更方便了，但是其本身也存在一个浪费内存的问题：

function Person (name, age) {
  this.name = name
  this.age = age
  this.type = 'human'
  this.sayHello = function () {
    console.log('hello ' + this.name)
  }
}

var p1 = new Person('Tom', 18)
var p2 = new Person('Jack', 16)

在该示例中，从表面上好像没什么问题，但是实际上这样做，有一个很大的弊端。

那就是对于每一个实例对象，type 和 sayHello 都是一模一样的内容，

每一次生成一个实例，都必须为重复的内容，多占用一些内存，如果实例对象很多，会造成极大的内存浪费。

console.log(p1.sayHello === p2.sayHello) // => false

对于这种问题我们可以把需要共享的函数定义到构造函数外部：

function sayHello = function () {
  console.log('hello ' + this.name)
}

function Person (name, age) {
  this.name = name
  this.age = age
  this.type = 'human'
  this.sayHello = sayHello
}

var p1 = new Person('Top', 18)
var p2 = new Person('Jack', 16)

console.log(p1.sayHello === p2.sayHello) // => true

这样确实可以了，但是如果有多个需要共享的函数的话就会造成全局命名空间冲突的问题。

你肯定想到了可以把多个函数放到一个对象中用来避免全局命名空间冲突的问题：

var fns = {
  sayHello: function () {
    console.log('hello ' + this.name)
  },
  sayAge: function () {
    console.log(this.age)
  }
}

function Person (name, age) {
  this.name = name
  this.age = age
  this.type = 'human'
  this.sayHello = fns.sayHello
  this.sayAge = fns.sayAge
}

var p1 = new Person('lpz', 18)
var p2 = new Person('Jack', 16)

console.log(p1.sayHello === p2.sayHello) // => true
console.log(p1.sayAge === p2.sayAge) // => true

至此，我们利用自己的方式基本上解决了构造函数的内存浪费问题。

但是代码看起来还是那么的格格不入，那有没有更好的方式呢？

小结

• 构造函数语法
• 分析构造函数
• 构造函数和实例对象的关系
  • 实例的 constructor 属性
  • instanceof 操作符
• 构造函数的问题