为什么 JavaScript 要设计原型模式

虽然 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 中没有类（ES 6 中的类也是函数），开发人员就发明一种函数，用函数来封装以特定接口创建对象的细节，如下面的示例：

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 个步骤：

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

使用 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 对象（浏览器中是 window 对象）。因此，在调用完函数之后，可以通过 window/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() 函数。

这样做确实解决了两个函数做同一件事的问题，但是又引入了两个新的问题：

  1. 全局作用域中定义的函数实际上只能被某个对象调用，这让全局作用域变得名不副实。
  2. 如果对象需要定义很多方法，那么就要定义很多个全局函数，于是我们这个自定义的对象类型就毫无封装性可言了。

原型模式的出场很好地解决了这个问题。

原型模式

我们创建的每一个函数其实都有一个 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 关键字定义函数（不是调用）；
  • 如何正确地创建自定义构造函数。

本文内容来自《JavaScript 高级程序设计》阅读笔记。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,602评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,442评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,878评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,306评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,330评论 5赞 373
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,071评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,382评论 3赞 400
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,006评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,512评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,965评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,094评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,732评论 4赞 323
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,283评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,286评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,512评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,536评论 2赞 354
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,828评论 2赞 345