虽然 Object 构造函数或对象的字面量可以用来创建单个对象, 但是这些方式有个明显的缺点, 创建相同结构的对象, 会产生大量的重复代码.
- const person1 = {
- name: 'Zhang san',
- age: 18,
- job: 'Engineer',
- sayName: function() {
- alert(this.name);
- }
- };
- const person2 = {
- name: 'Li si',
- age: 18,
- job: 'Engineer',
- sayName: function() {
- alert(this.name);
- }
- };
person1 和 person2 具有相同的属性和方法, 但它们之间没有复用. 为了解决这个问题, 有人开始使用工厂模式的一种变体.
工厂模式
工厂模式抽象了创建具体对象的过程. 因为在 JavaScript 中没有类 (ES6 中的类也是函数), 开发人员就发明一种函数, 用函数来封装以特定接口创建对象的细节, 如下面的示例:
- function createPerson(name, age, job) {
- let o = new Object();
- o.name = name;
- o.age = age;
- o.job = job;
- o.sayName = function() {
- console.log(this.name);
- }
- return o;
- }
- const person1 = createPerson('Zhang san', 18, 'Engineer');
- const person2 = createPerson('Li si', 18, 'Doctor');
函数 createPerson() 能够根据接受的参数构建一个包含所有必要信息的 Person 对象. 可以无数次的调用这个函数, 每次都会返回全新的 Person 对象.
然而, 工厂模式虽然解决了创建多个相似对象的问题, 但是没有解决对象的识别问题, 即无法知道一个对象的类型.
随着 JavaScript 的发展, 又出现了一种新的模式.
构造函数模式
ECMAScript 中的构造函数可以用来创建特定类型的对象. 像 Object 和 Array 这样的原生构造函数, 在运行时会自动在执行环境中调用.
因此, 我们也可以为自定义对象设计构造函数. 使用构造函数重写前面的例子.
- function Person(name, age, job) {
- this.name = name;
- this.age = age;
- this.job = job;
- this.sayName = function() {
- console.log(this.name);
- }
- }
- const person1 = new Person('Zhang san', 18, 'Engineer');
- const person2 = new Person('Li si', 18, 'Doctor');
Person() 函数取代了 createPerson() 函数. 并且它们的代码有几个不同之处:
没有显式地创建对象;
直接将属性和方法赋值给 this 对象;
没有 return 语句.
要创建 Person 的新实例, 必须使用 new 操作符. 以这种方式调用构造函数会经历 4 个步骤:
创建一个新对象;
将构造函数的作用域赋值给新对象 (指向 this);
执行构造函数中的代码;
返回新对象.
使用 Person 构造函数创建对象时, 对象会被添加一个 constructor 属性, 该属性指向 Person, 也就是构造函数的指针地址.
- console.log(person1.constructor === Person); // true
- console.log(person2.constructor === Person); // true
对象的 constructor 属性可以用来标识对象的类型, 这也是将 JavaScript 用于面向对象编程必不可少的特性.
但是在检测类型时, 使用 instanceof 操作符会更可靠一些, 因为 constructor 属性有时可能会被修改.
我们来验证一下:
- console.log(person1 instanceof Person); // true
- console.log(person1 instanceof Object); // true
如果测试 createPerson() 创建的对象是否是 Person 的实例, 返回的会是 false.
1. 构造函数与普通函数的区别
构造函数与普通函数唯一的区别在于调用它们的方式不同. 不过, 构造函数毕竟也是函数, 不存在定义构造函数的特殊语法.
任何函数, 只要通过 new 操作符来调用, 那么就可以作为构造函数; 而任何函数, 如果不通过 new 操作符来调用, 那它跟普通的函数也没有什么两样.
例如, 前面例子定义的 Person() 函数可以通过下列任何一种方式调用.
- // 作为构造函数使用
- const person = new Person('Zhang san', 18, 'Engineer');
- person.sayName(); // Zhang san
- // 作为普通函数调用
- Person('Li si', 18, 'Doctor');
- global.sayName(); // Li si
使用 new 操作符来创建新对象时, Person() 作为构造函数. 而不使用 new 操作符直接调用, 属性和方法会被添加给 global 对象.
当在全局作用域中调用一个函数时, this 对象总是指向 global 对象 (浏览器中是 Windows 对象). 因此, 在调用完函数之后, 可以通过 Windows/global 对象来调用 sayName() 方法, 并且返回正确的值.
2. 构造函数的问题
构造函数虽然好用但也有缺点. 使用构造函数的主要问题, 就是每个方法都要在每个实例上重新创建一遍.
我们来看一下 Person 构造函数的定义:
- function Person(name, age, job) {
- this.name = name;
- this.age = age;
- this.job = job;
- **this.sayName = new Function('console.log(this.name)');**
- }
- const person1 = new Person('Zhang san', 18, 'Engineer');
- const person2 = new Person('Li si', 18, 'Doctor');
用这个函数创建 person1 和 person2 都有一个名为 sayName() 的方法, 但这两个方法不是同一个 Function 实例.
以这种方式创建函数, 会导出现不同的作用域链和标识符解析, 虽然它们做的事情是一样的, 但不同的实例没有得到共享.
console.log(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() {
- console.log(this.name);
- }
我们把 sayName() 函数的定义转移到构造函数外部. 而在构造函数内部, 我们将 Person 的 sayName 属性设置成等于全局的 sayName 函数. 这样一来, 由于 sayName 包含的是一个指向函数的指针, 因此 person1 和 person2 对象就共享了在全局作用域定义的同一个 sayName() 函数.
这样做确实解决了两个函数做同一件事的问题, 但是又引入了两个新的问题:
全局作用域中定义的函数实际上只能被某个对象调用, 这让全局作用域变得名不副实.
如果对象需要定义很多方法, 那么就要定义很多个全局函数, 于是我们这个自定义的对象类型就毫无封装性可言了.
原型模式的出场很好地解决了这个问题.
原型模式
我们创建的每一个函数其实都有一个 prototype 属性, 这个属性是一个指针, 指向一个对象, 这个对象的属性和方法被由这个函数创建的所有实例共享. prototype 对象被称为这些实例的原型对象.
这样我们就可以把构造函数中定义对象的方法, 直接添加到原型对象上, 如下实例所示.
- function Person(name, age, job) {
- this.name = name;
- this.age = age;
- this.job = job;
- };
- Person.prototype.sayName = function() {
- console.log(this.name);
- }
我们将 sayName() 方法和所有属性直接添加到 Person 的 prototype 属性中, Person 的所有实例就共用了同一个方法, 同时又保证该方法只在 Person 作用域内上生效.
小结
本文涉及到的内容:
检查一个对象的类型;
如何使用 new 关键字定义函数 (不是调用);
如何正确地创建自定义构造函数.
来源: https://juejin.im/post/5c45c251f265da611037569c