1.构造函数的继承
让一个构造函数继承另外一个构造函数是非常常见的需求。 这可以分成两步实现。第一步是子类的构造器中,调用父类的构造函数。
function Sub (value) {
Super.call(this)
this.prop = value
}
复制代码
上面代码中,Sub是子类的构造函数,this是子类的实例。在实例上调用父类的构造函数,就会让子类实例具有父类实例的属性。 第二步让子类的原型指向父类的原型,这样子类就可以继承父类的原型。
Sub.prototype = Object.creat(Super.prototype)
Sub.prototype.constructor = Sub
Sub.prototype.method = '...'
复制代码
上面代码中,Sub.prototype是子类的原型,要讲他赋值为Object.creat(Super.prototype),而不是直接等于Super.prototype,否则后面两行对Sub.prototype的操作就会把父类的原型Super.prototype也一起改掉。 另外一种写法是Sub.prototype等于一个父类实例。
Sub.prototype = new Super()
复制代码
上面这种写法也有继承的效果,但是子类会父类实例的方法。有时这可能不是我们需要的,所以不推荐这种写法。 举例来说,下面是一个Shape构造函数。
function Shape() {
this.x = 0;
this.y = 0;
}
Shape.prototype.move = function (x, y) {
this.x += x;
this.y += y;
console.info('Shape moved.');
};
复制代码
我们需要让Rectangle构造函数继承Shape。
// 第一步,子类继承父类的实例
function Rectangle() {
Shape.call(this); // 调用父类构造函数
}
// 另一种写法
function Rectangle() {
this.base = Shape;
this.base();
}
// 第二步,子类继承父类的原型
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
复制代码
采用这样的写法以后,instanceof运算符会对子类和父类的构造函数,都返回true。
var rect = new Rectangle();
rect.move(1, 1) // 'Shape moved.'
rect instanceof Rectangle // true
rect instanceof Shape // true
复制代码
上面代码中,子类是整体继承父类。有时只需要单个方法的继承,这时可以采用下面的写法。
ClassB.prototype.print = function() {
ClassA.prototype.print.call(this);
// some code
}
复制代码
上面代码中,子类B的print方法先调用父类A的print方法,再部署自己的代码。这就等于继承了父类A的print方法。
2.多重继承
JavaScript 不提供多重继承功能,即不允许一个对象同时继承多个对象。但是,可以通过变通方法,实现这个功能。
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(混入)。
3.模块
3.1 封装私有变量:立即执行函数的写法
使用“立即执行函数”(Immediately-Invoked Function Expression,IIFE),将相关的属性和方法封装在一个函数作用域里面,可以达到不暴露私有成员的目的。
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模块的基本写法。下面,再对这种写法进行加工。
3.2 模块的放大模式
如果一个模块很大,必须分成几个部分,或者一个模块需要继承另一个模块,这时就有必要采用“放大模式”(augmentation)。
var module1 = (function (mod){
 mod.m3 = function () {
  //...
 };
 return mod;
})(module1);
复制代码
上面的代码为module1模块添加了一个新方法m3(),然后返回新的module1模块。
在浏览器环境中,模块的各个部分通常都是从网上获取的,有时无法知道哪个部分会先加载。如果采用上面的写法,第一个执行的部分有可能加载一个不存在空对象,这时就要采用”宽放大模式”(Loose augmentation)。
var module1 = ( function (mod){
 //...
 return mod;
})(window.module1 || {});
复制代码
与”放大模式”相比,“宽放大模式”就是“立即执行函数”的参数可以是空对象。
3.3 输入全局变量
独立性是模块的重要特点,模块内部最好不与程序的其他部分直接交互。为了在模块内部调用全局变量,必须显式地将其他变量输入模块。
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 : dieCouraselDie
}
})( jQuery, window, document );
复制代码
上面代码中,finalCarousel对象输出到全局,对外暴露init和destroy接口,内部方法go、handleEvents、initialize、dieCarouselDie都是外部无法调用的。