Javascript 创建对象的三种方法及比较【转载+整理】

https://developer.mozilla.org/zh-CN/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain

本文内容

• 引入
• 构造函数创建对象
• Object.create创建对象
• 极简主义法
  • 封装
  • 继承
  • 私有属性和私有方法
  • 数据共享

 

引入

---

近 20 年前，也就是 Javascript 诞生时（1995 年），它只是一种简单的网页脚本语言，像如果你忘记填写用户名，就跳出一个警告，当时的网速只有 28Kbps，这样简单的交互也让 Web 服务器做显然不合适。

如今，Javascript 几乎无所不能，从前端到后端，各种匪夷所思、令人瞠目结舌的用途，程序员用它完成越来越庞大的项目，代码复杂度也在直线飙升。单个网页包含 10000 行 Javascript 代码，早就司空见惯。2010 年，一个工程师透露：Gmail 代码长度是 443000 行！

图 1 Gmail 代码段

编写和维护如此庞大复杂的代码，多年的工程实践表明必须使用模块化策略，而要采用模块化，主流做法是“面向对象编程”，它具有抽象，封装，多态和继承这四个特点。

可 Javascript 是一种基于对象（object-based）的语言，你遇到的所有一切几乎都是对象，它结合（简单的）函数式语言和（简单的）面向对象语言的特点，但其语法不支持“类（class）”，无法直接使用面向对象编程。如果要把“属性”和“方法”，封装成一个对象，甚至要从原型对象生成一个实例对象。因此，程序员们探索如何用 Javascript 模拟“类”？

很多文章在谈到“Javascript 模拟‘类’”，但首先我个人认为这个说法很有误解，即便为“类”加了双引号。面向对象是基于类的语言，构建在两个不同实体的概念之上的：类和实例。而 Javascript 是基于原型的语言，它只有对象。新对象在初始化时以原型对象为模板获得属性。任何对象都可以指定其自身的属性，即可以创建时指定，也可以运行时指定。而且，任何对象都可以关联于并作为另一个对象的原型（prototype），从而允许后者共享前者的属性。要是这样的话，几乎没什么可比性。之所以说“Javascript 模拟‘类’”，完全是为了强调如何用 Javascript 进行像面向对象那样的编程，毕竟面向对象编程是这么多年的工程实践已经证明了的，除此之外，这种说法造成的歧义和误解实在是太大了，尤其是对初学者来说。

Javascript 是有设计缺陷，这多半是因为历史原因。就像其设计师 Brendan Eich 说的：“与其说我爱 Javascript，不如说我恨它。它是 C 语言和 Self 语言一 夜 情的产物。十八世纪英国文学家约翰逊博士说得好：'the part that is good is not original, and the part that is original is not good.（它的优秀之处并非原创，它的原创之处并不优秀）”。

• 设计过于仓促。Javascript 的设计仅仅用了十天，设计师只是为了向公司交差，本人并不愿意这样设计。而且其设计初衷，只是为了解决一些简单的网页互动，并没有考虑复杂应用的情况。
• 没有先例借鉴。Javascript 结合了函数式编程和面向对象编程的特点，是世界上唯一使用 Prototype 继承模型的语言。
• 标准化过早。1995 年 5 月设计计方案定稿；同年 10 月解释器开发成功；同年 12 月推向市场。1996 年 8 月微软强势介入，推出自己的脚本语言 Jscript。因为市场竞争，网景公司申请国际化，于 1998 年标准化。相比之下，C 语言问世将近 20 年之后，国际标准才颁布。

在面向对象编程中，类（class）是对象（object）的模板。Javascript 语言虽然不支持“类”，但可以用一些变通的方法来模拟。本文总结了 Javascript 创建对象的三种方法，讨论每种方法的特点，并着重介绍了我眼中的最佳方法。

能用适当的方式来创建对象是 Javascript 模块化的前提。这样，我们就可以封装属性和方法，并进一步模拟出面向对象编程中已经相当成熟的做法，如继承，接口，甚至是设计模式。

构造函数创建对象

---

在 Javascript 中，构造方法其实就是一个普通的函数。当使用 new 操作符来作用这个函数时，它就可以被称为构造方法（构造函数，Constructor），使用 this 和 prototype。该方法是经典方法。

代码段一：

function Cat() {
    this.name = "大毛";
}
Cat.prototype.makeSound = function () {
    alert("喵~");
}

var cat1 = new Cat();
alert(cat1.name);
alert(cat1. makeSound());

该方法的缺点是，比较复杂，用到了 this 和 prototype，不便于编写和阅读，而且浪费内存。

Object.create 创建对象

---

为了解决“构造函数法”的缺点，更方便地生成对象，ECMAScript 5（目前通行第三版），提出了一个新的方法 Object.create()，调用这个方法来创建一个新对象。新对象的原型就是调用 create方法时传入的第一个参数。

代码段二：定义 Cat 对象，用 Object.create 创建，不用 new

var Cat = {
    name: "大毛",
    makeSound: function () { alert("喵~"); }
};

var cat1 = Object.create(Cat);
alert(cat1.name);
cat1.makeSound();

目前，各大浏览器的最新版本（包括 IE9）都部署了这个方法。如果遇到老式浏览器，可以用下面的代码自行部署。

代码段三：

　　if (!Object.create) {
　　　　Object.create = function (o) {
　　　　　　 function F() {}
　　　　　　F.prototype = o;
　　　　　　return new F();
　　　　};
　　}

这种方法比“构造函数”简单，但是不能实现私有属性和私有方法，实例对象之间也不能共享数据，对面向对象的模拟不够全面。

极简主义法

---

荷兰程序员 Gabor de Mooij 提出了一种比 Object.create 更好的方法，他称这种方法为“极简主义法（minimalist approach）”，也是我推荐的方法。

封装

这种方法不使用 this 和 prototype，代码部署起来非常简单。

它也是先用一个对象模拟“类”。在这个类里面，定义一个构造函数 createNew，用来生成对象实例。

代码段四：

var Cat = {
    createNew: function () {
        // some code here
    }
};

然后，在 createNew 函数，定义一个对象实例，把这个对象作为返回值。

代码段五：

var Cat = {
    createNew: function () {
        // some code here
        var cat = {};
        cat.name = "大毛";
        cat.makeSound = function () { alert("喵~"); };
        return cat;
    }
};

使用时，调用 createNew 方法，就可以得到对象实例。

代码段六：

var cat1 = Cat.createNew();
cat1.makeSound();

这种方法的好处在于，容易理解，结构清晰优雅，符合传统的"面向对象编程"的构造方式，因此可以方便地部署下面的特性。

继承

让一个类继承另一个类，实现起来很方便。只要在前者的createNew()方法中，调用后者的 createNew 方法即可。

先定义一个 Animal 类。

代码段七：

var Animal = {
    createNew: function () {
        var animal = {};
        animal.sleep = function () { alert("睡懒觉"); };
        return animal;
    }
};

然后，在 Cat 的 createNew 方法中，调用 Animal 的 createNew 方法。

代码段八：

var Cat = {
    createNew: function () {
        var cat = Animal.createNew();
        cat.name = "大毛";
        cat.makeSound = function () { alert("喵~"); };
        return cat;
    }
};

这样，Cat 对象就会继承 Animal。

代码段九：

var cat1 = Cat.createNew();
cat1.sleep();

私有属性和私有方法

只要不是定义在 cat 对象上的方法和属性，都是私有的。

代码段十：

var Cat = {
    createNew: function () {
        var cat = {};
        var sound = "喵~";
        cat.makeSound = function () { alert(sound); };
        return cat;
    }
};

上面，sound 是内部私有变量，外部无法访问，只有通过 cat 的公有方法 makeSound 来读取。

代码段十一：

　　var cat1 = Cat.createNew();
　　alert(cat1.sound); // undefined

数据共享

有时候，我们需要所有实例对象，能够读写同一项内部数据。这个时候，只要把这个内部数据，封装在类对象的里面、createNew()方法的外面即可。

代码段十二：

var Cat = {
    sound: "喵~",
    createNew: function () {
        var cat = {};
        cat.makeSound = function () { alert(Cat.sound); };
        cat.changeSound = function (x) { Cat.sound = x; };
        return cat;
    }
};

然后，生成两个实例对象：

var cat1 = Cat.createNew();

var cat2 = Cat.createNew();

cat1.makeSound(); // 喵~

这时，如果有一个实例对象，修改了共享的数据，另一个实例对象也会受到影响。

　　cat2.changeSound("啦~");
　　cat1.makeSound(); // 啦~