共计 6415 个字符，预计需要花费 17 分钟才能阅读完成。
目录 [隐藏]
原型对象概述
构造函数的缺点
prototype 属性的作用
原型链
constructor 属性
instanceof 运算符
构造函数的继承
多重继承
模块
基本的实现方法
封装私有变量：构造函数的写法
封装私有变量：立即执行函数的写法
模块的放大模式
输入全局变量
参考链接
1. 原型对象概述
每新建一个实例，就会新建一个 meow 方法。这既没有必要，又浪费系统资源，因为所有 meow 方法都是同样的行为，完全应该共享。
这个问题的解决方法，就是 JavaScript 的原型对象（prototype）
2.prototype 属性的作用
原型对象的作用，就是定义所有实例对象共享的属性和方法。这也是它被称为原型对象的原因，而实例对象可以视作从原型对象衍生出来的子对象。
JavaScript 继承机制的设计思想就是，原型对象的所有属性和方法，都能被实例对象共享。
JavaScript 规定，每个函数都有一个 prototype 属性，指向一个对象
function f() {}
typeof f.prototype // “object”
function Animal(name) {
this.name = name;
}
Animal.prototype.color = ‘white’;
var cat1 = new Animal(‘ 大毛 ’);
var cat2 = new Animal(‘ 二毛 ’);
cat1.color // ‘white’
cat2.color // ‘white
构造函数 Animal 的 prototype 属性，就是实例对象 cat1 和 cat2 的原型对象。
原型对象上添加一个 color 属性，结果，实例对象都共享了该属性
Animal.prototype.color = ‘yellow’;
cat1.color // “yellow”
cat2.color // “yellow”
上面代码中，原型对象的 color 属性的值变为 yellow，两个实例对象的 color 属性立刻跟着变了。这是因为实例对象其实没有 color 属性，都是读取原型对象的 color 属性。也就是说，
当实例对象本身没有某个属性或方法的时候，它会到原型对象去寻找该属性或方法。如果实例对象自身就有某个属性或方法，它就不会再去原型对象寻找这个属性或方法。这就是原型对象的特殊之处。
3. 原型链
JavaScript 规定，所有对象都有自己的原型对象（prototype）。一方面，任何一个对象，都可以充当其他对象的原型；另一方面，由于原型对象也是对象，所以它也有自己的原型。因此，就会形成一个“原型链”（prototype chain）：对象到原型，再到原型的原型
如果一层层地上溯，所有对象的原型最终都可以上溯到 Object.prototype，即 Object 构造函数的 prototype 属性。也就是说，所有对象都继承了 Object.prototype 的属性。这就是所有对象都有 valueOf 和 toString 方法的原因，因为这是从 Object.prototype 继承的
var MyArray = function () {};
MyArray.prototype = new Array();
MyArray.prototype.constructor = MyArray;
var mine = new MyArray();
mine.push(1, 2, 3);
mine.length // 3
mine instanceof Array // true
构造函数的 prototype 属性指向一个数组，就意味着实例对象可以调用数组方法。
mine 是构造函数 MyArray 的实例对象，由于 MyArray.prototype 指向一个数组实例，使得 mine 可以调用数组方法（这些方法定义在数组实例的 prototype 对象上面）
3.constructor 属性
prototype 对象有一个 constructor 属性，默认指向 prototype 对象所在的构造函数
function P() {}
P.prototype.constructor === P // true
由于 constructor 属性定义在 prototype 对象上面，意味着可以被所有实例对象继承
function P() {}
var p = new P();
p.constructor === P // true
p.constructor === P.prototype.constructor // true
p.hasOwnProperty(‘constructor’) // false
上面代码中，p 是构造函数 P 的实例对象，但是 p 自身没有 constructor 属性，该属性其实是读取原型链上面的 P.prototype.constructor 属性
3.1 作用
3.1.1 可以得知某个实例对象，到底是哪一个构造函数产生的。
3.1.2 另一方面，有了 constructor 属性，就可以从一个实例对象新建另一个实例
function Constr() {}
var x = new Constr();
var y = new x.constructor();
y instanceof Constr // true
3.1.3 在实例方法中，调用自身的构造函数成为可能
Constr.prototype.createCopy = function () {
return new this.constructor();
};
3.2constructor 属性表示原型对象与构造函数之间的关联关系，如果修改了原型对象，一般会同时修改 constructor 属性，防止引用的时候出错。
function Person(name) {
this.name = name;
}
Person.prototype.constructor === Person // true
Person.prototype = {
method: function () {}
};
Person.prototype.constructor === Person // false
Person.prototype.constructor === Object // true
// 坏的写法
C.prototype = {
method1: function (…) {…},
// …
};
// 好的写法
C.prototype = {
constructor: C,
method1: function (…) {…},
// …
};
// 更好的写法
C.prototype.method1 = function (…) {…};
上面代码中，要么将 constructor 属性重新指向原来的构造函数，要么只在原型对象上添加方法，这样可以保证 instanceof 运算符不会失真。
如果不能确定 constructor 属性是什么函数，还有一个办法：通过 name 属性，从实例得到构造函数的名称。
function Foo() {}
var f = new Foo();
f.constructor.name // “Foo”
4.instanceof 运算符
instanceof 运算符返回一个布尔值，表示对象是否为某个构造函数的实例
instanceof 运算符的左边是实例对象，右边是构造函数。它会检查右边构建函数的原型对象（prototype），是否在左边对象的原型链上。因此，下面两种写法是等价的。
v instanceof Vehicle
// 等同于
Vehicle.prototype.isPrototypeOf(v)
由于 instanceof 检查整个原型链，因此同一个实例对象，可能会对多个构造函数都返回 true。
var d = new Date();
d instanceof Date // true
d instanceof Object // true
Null 都为 false
注意，instanceof 运算符只能用于对象，不适用原始类型的值。
var s = ‘hello’;
s instanceof String // false
上面代码中，字符串不是 String 对象的实例（因为字符串不是对象），所以返回 false。
此外，对于 undefined 和 null，instanceOf 运算符总是返回 false
上面代码中，字符串不是 String 对象的实例（因为字符串不是对象），所以返回 false。
此外，对于 undefined 和 null，instanceOf 运算符总是返回 false
5. 构造函数的继承
5.1 在子类的构造函数中，调用父类的构造函数
Sub 是子类的构造函数，this 是子类的实例。在实例上调用父类的构造函数 Super，就会让子类实例具有父类实例的属性
5.2 是让子类的原型指向父类的原型，这样子类就可以继承父类原型
Sub.prototype = Object.create(Super.prototype);
Sub.prototype.constructor = Sub;
Sub.prototype.method = ‘…’;
上面代码中，Sub.prototype 是子类的原型，要将它赋值为 Object.create(Super.prototype)，而不是直接等于 Super.prototype。否则后面两行对 Sub.prototype 的操作，会连父类的原型 Super.prototype 一起修改掉。
5.3Sub.prototype 等于一个父类实例 Sub.prototype = new Super();
上面代码中，子类是整体继承父类。有时只需要单个方法的继承，这时可以采用下面的写法。
ClassB.prototype.print = function() {
ClassA.prototype.print.call(this);
// some code
}
上面代码中，子类 B 的 print 方法先调用父类 A 的 print 方法，再部署自己的代码。这就等于继承了父类 A 的 print 方法
6. 多重继承
function M1() {
this.hello = ‘hello’;
}
function M2() {
this.world = ‘world’;
}
function S() {
M1.call(this);
M2.call(this);
}
// 继承 M1
S.prototype = Object.create(M1.prototype);
// 继承链上加入 M2
Object.assign(S.prototype, M2.prototype);
// 指定构造函数
S.prototype.constructor = S;
var s = new S();
s.hello // ‘hello’
s.world // ‘world’
上面代码中，子类 S 同时继承了父类 M1 和 M2。这种模式又称为 Mixin（混入
7. 模块
JavaScript 不是一种模块化编程语言，ES6 才开始支持“类”和“模块”。下面介绍传统的做法，如何利用对象实现模块的效果。
7.1 基本的实现方法（对象）
模块是实现特定功能的一组属性和方法的封装
简单的做法是把模块写成一个对象，所有的模块成员都放到这个对象里面。
var module1 = new Object({
_count : 0,
m1 : function (){
//…
},
m2 : function (){
//…
}
});
上面的函数 m1 和 m2，都封装在 module1 对象里。使用的时候，就是调用这个对象的属性。
module1.m1();
但是，这样的写法会暴露所有模块成员，内部状态可以被外部改写。比如，外部代码可以直接改变内部计数器的值。
module1._count = 5
7.2 封装私有变量：构造函数的写法
function StringBuilder() {
var buffer = [];
this.add = function (str) {
buffer.push(str);};
this.toString = function () {
return buffer.join('');};
}
上面代码中，buffer 是模块的私有变量。一旦生成实例对象，外部是无法直接访问 buffer 的。但是，这种方法将私有变量封装在构造函数中，导致构造函数与实例对象是一体的，总是存在于内存之中。无法在使用完成后清除。这意味着，构造函数有双重作用，既用来塑造实例对象，又用来保存实例对象的数据，违背了构造函数与实例对象在数据上相分离的原则（即实例对象的数据，不应该保存在实例对象以外）。同时，非常耗费内存。
function StringBuilder() {
this._buffer = [];
}
StringBuilder.prototype = {
constructor: StringBuilder,
add: function (str) {
this._buffer.push(str);},
toString: function () {
return this._buffer.join('');}
};
这种方法将私有变量放入实例对象中，好处是看上去更自然，但是它的私有变量可以从外部读写，不是很安全
7.3 封装私有变量：立即执行函数的写法
将相关的属性和方法封装在一个函数作用域里面，可以达到不暴露私有成员的目的
将相关的属性和方法封装在一个函数作用域里面，可以达到不暴露私有成员的目的。
var module1 = (function () {
var _count = 0;
var m1 = function () {
//…
};
var m2 = function () {
//…
};
return {
m1 : m1,
m2 : m2
};
})();
使用上面的写法，外部代码无法读取内部的_count 变量。
console.info(module1._count); //undefined
上面的 module1 就是 JavaScript 模块的基本写法。下面，再对这种写法进行加工。
7.4 模块的放大模式
如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用“放大模式”（augmentation）。
var module1 = (function (mod){
mod.m3 = function () {
//…
};
return mod;
})(module1);
上面的代码为 module1 模块添加了一个新方法 m3()，然后返回新的 module1 模块
在浏览器环境中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载。如果采用上面的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用 ” 宽放大模式 ”（Loose augmentation）。
var module1 = (function (mod) {
//…
return mod;
})(window.module1 || {});
与 ” 放大模式 ” 相比，“宽放大模式”就是“立即执行函数”的参数可以是空对象
7.5 输入全局变量
独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互。
为了在模块内部调用全局变量，必须显式地将其他变量输入模块。
var module1 = (function ($, YAHOO) {
//…
})(jQuery, YAHOO);
上面的 module1 模块需要使用 jQuery 库和 YUI 库，就把这两个库（其实是两个模块）当作参数输入 module1。
这样做除了保证模块的独立性，还使得模块之间的依赖关系变得明显。
(function($, window, document) {
function go(num) {
}
function handleEvents() {
}
function initialize() {
}
function dieCarouselDie() {
}
//attach to the global scope
window.finalCarousel = {
init : initialize,
destroy : dieCarouselDie}
})(jQuery, window, document);
上面代码中，finalCarousel 对象输出到全局，对外暴露 init 和 destroy 接口，内部方法 go、handleEvents、initialize、dieCarouselDie 都是外部无法调用的
