JavaScript: The Good Parts 读书笔记(三)

三.继承

• 概述

  Javascript是一门弱类型语言，对象的起源是无关紧要的。对于一个对象来说重要的是它能做什么，而不是它从哪里来。Javascript提供了一套丰富的代码重用模式。它可以模拟那些基于类的模式，同时它也可以支持其他更具表现力的模式.在JS中可能的继承模式有很多。在这里，我们将研究几种最为直接的模式.

  在基于类的语言中，对象是类的实例，并且类可以从另一个类继承。而Javascript是一门基于原型的语言，这意味着对象直接从其他对象继承。

• 伪类模式

  Javascript的原型存在着诸多矛盾。它不让对象直接从其他对象继承，反而插入了一个多余的间接层.它使用构造器函数产生对象。这种构造器函数就是一个伪类.

  当一个函数对象被创建时，Function构造器产生的函数对象会运行类似下面的代码:

  this.prototype = {constructor : this};

      新函数对象被赋予一个 prototype 对象，该对象又包含一个 constructor 属性。而这个constructor属性的值即为该新函数自身. 因为Javascript 语言并没有提供一种方法去确定哪个函数作为构造器。所以每个函数都会得到一个 prototype 对象。 大多数情况下，constructor 属性没什么用,重要的是prototype 对象.

  这里假设new操作为一个方法，那么当使用new去构造对象时，可能的执行代码如下:

  Function.method("new", function(){
         //创建一个继承自身原型的对象
       var that = Object.beget(this.prototype);
         //调用构造器函数，绑定 this 到新对象上
       var other = this.apply(that,arguments);
         //如果它的返回值不是一个对象，则返回新对象
       return (typeof other === 'object' && other) || that;
  }

   由上可知，我们可以定义一个构造器函数，并对其原型进行扩展.

  var Mammal = function(name){ // 由约定可知，构造器函数使用大写开头
  	this.name = name;
  };
  Mammal.prototype.get_name = function(){
  	return this.name;
  };
  Mammal.prototype.says = function(){
  	return this.saying || "";
  };
  
  var myMammal = new Mammal("Herb the Mammal");
  var name = myMammal.get_name();
  document.writeln(name);
  
  var Cat = function(name){
  	this.name = name;
  	this.saying = "meow";
  };
  
  // 替换Cat.prototype，使其"继承" Mannal
  Cat.prototype = new Mammal();
  Cat.prototype.purr = function(n){
  	var i,s = "";
  	for(i = 0 ; i < n ; i ++){
  		if(s){
  			s+="-";
  		}
  		s += "r";
  	}
  	return s;
  };
  // 覆盖原型链中的get_name()
  Cat.prototype.get_name = function(){
  	return this.says() + " " + this.name + " " + this.says();
  };
  
  var myCat = new Cat("Henrietta");
  document.writeln(myCat.says()); // meow
  document.writeln(myCat.purr(5)); // r-r-r-r-r
  document.writeln(myCat.get_name()); // meow Henrietta meow

      伪类模式的本意是模拟OO语言中的继承，向面向对象靠拢，但它看起来显得格格不入。下面可以通过一些辅助方法来隐藏一些丑陋的细节.

  Function.method("inherits",function(Parent){
  	this.prototype = new Parent();
  	return this;
  });
  
  var Dog = function(name){
  	this.name = name;
  	this.saying = "wanwan";
  }.inherits(Mammal).method("purr",function(n){
  	var i,s = "";
  	for(i = 0 ; i < n ; i ++){
  		if(s){
  			s+="-";
  		}
  		s += "w";
  	}
  	return s;
  }).method("get_name",function(){
  	return this.says() + " " + this.name +" " + this.says();
  });
  
  var myDog = new Dog("Kiten");
  document.writeln(myDog.says()); // wanwan
  document.writeln(myDog.purr(5)); // w-w-w-w-w
  document.writeln(myDog.get_name()); // wanwan Kiten wanwan

   

  虽然通过隐藏一些繁琐的针对prototype的操作细节，使用伪类继承看起来没那么怪异了.但我们是否真的有所改善呢？我们现在有了行为像“类”的构造器函数，但仔细去看，他们却存在令人惊讶的行为:没有私有环境，所有属性都是公开的。无法访问父类的方法(super).更糟糕的是，使用构造器函数存在一个严重的危害。如果你在调用构造器函数时忘了在前面加上new操作符，那么this将会被绑定到全局对象上，这样你既没有扩充新对象，反而破坏了全局变量。而且此时既没有编译时警告，也没有运行时警告。这是一个严重的语言设计错误。为了降低产生这个问题的风险，所有构造器函数都约定为使用首字母大写命名。

  “伪类”形式可以给不熟悉Javascript的程序员提供便利，但它也已隐藏了该语言的真实本质。借鉴类的表示法可能误导程序员去编写过于深入与复杂的层次结构。而Javascript中却有更好的选择。

• 函数化模式

  在一个纯粹的原型模式中，我们会摒弃类，转而专注于对象。基于原型的继承相比基于类的继承在概念上更为简单：一个新对象可以继承一个旧对象的属性。通过构造一个有用的基础对象，接着可以构造更多和那个对象类似的对象。可以完全避免把一个应用拆解成一些列嵌套抽象类的分类过程。

  // 我们先使用字面变量去构造一个有用的对象:
  var myMammal = {
  	name : "Herb the Mammal",
  	get_name : function(){
  		return this.name;
  	},
  	says : function(){
  		return this.saying || "";
  	}
  };
  
  // 接下来我们可以使用 beget 方法构造出更多的实例，之后对实例进行定制。
  var myCat = Object.beget(myMammal);
  myCat.name = "Henrietta";
  myCat.saying = "meow";
  myCat.purr = function(n){
  	var i,s="";
  	for(i = 0 ; i < n ; i ++){
  		if(s){
  			s+="-";
  		}
  		s+="s";
  	}
  	return s;
  };
  
  myCat.get_name = function(){
  	return this.says + " " + this.name + " " + this.says;
  };

   这是一种 “差异化继承”. 通过定制该新对象，我们指明了它与其基类对象的区别.
• 隐私的保护

  迄今为止，我们所论述的继承模式都存在一个弱点：我们没法保护隐私.对象的所有属性都是可见的。我们设置保护私有变量和私有函数。其中一个解决方法是使用模块模式。下面是一个使用模块模式的伪代码模板:

  //   var constructor = function(spec,my){
  //      var that, 其他私有实例变量;
  //      my = my || {};
  //      把共享变量和函数添加到my中;
  //      that = 一个新对象;
  //      添加that 中的方法(特权方法);
  //      return that;
  //   }

   使用示例:

  var mammal = function(spec){
  	var that = {};
  	that.get_name = function(){
  		return spec.name;
  	};
  	that.says = function(){
  		return spec.saying || "";
  	};
  	return that;
  };
  
  var myProtectedMammal = mammal({name:"Herb"});

   
• 高级的函数化模式

  在伪类模式中，构造器函数Cat不得不重复其基类构造器Mammal已经完成的工作(初始化自身属性).而且函数化模式中却不再需要这么做，因为构造器cat将会调用构造器mammal,让mammal去完成初始化工作。所以Cat只需关注自身的差异即可。

  var cat = function(spec){
  	spec.saying = spec.saying || "meow";
  	var that = mammal(spec);
  	that.purr = function(n){
  		var i,s = "";
  		for(i = 0 ; i < n ; i ++){
  			if(s){
  				s+="-";
  			}
  			s+="r";
  		}
  		return s;
  	};
  	that.get_name = function(){
  		return that.says() + " " + spec.name + " " + that.says();
  	};
  	return that;
  };
  var myProtectedCat = cat({name:"Henrietta"});

      函数化模式还给我们提供了一个处理父类方法的机会. 我们将构造一个 superior 方法，它取得一个方法名并返回调用哪个方法的函数.该函数将调用原来的方法。(装饰/代理模式)

  Object.method("superior",function(name){
  	var that = this,method = that[name];
  	return function(){
  		return method.apply(that,arguments);
  	};
  });	
  var coolcat = function(spec){
  	var that = cat(spec),super_get_name = that.superior("get_name");
  	that.get_name = function(n){
  		return "like " + super_get_name() + " baby!";
  	};
  	return that;
  };
  var myCoolCat = coolcat({name:"Bix"});
  document.writeln(myCoolCat.get_name());// like meow Bix meow baby!

      函数化模式有很大的灵活性。它不仅不像伪类模式那样需要花费很多功夫，还让我们得到更好的封装和信息隐藏，以及访问父类方法的能力。我们可以从一套部件中组合出对象。例如，我们可以构造一个能添加简单事件处理特性到任何对象上的函数.他会给对象添加一个on方法，一个fire方法和一个私有的事件注册表对象。

  var eventuality = function(that){
  	var registry = {};
  	that.fire = function(event){
  		// 触发通过 'on' 方法注册的事件处理程序。该事件可以是一个包含事件名称的字符串,
  		// 或是一个拥有type属性的对象.
  		var array,func,handler,i,type = typeof event === 'string' ? event : event.type;
  
  		if(registry.hasOwnProperty(type)){
  			array = registry[type];
  			for(i = 0 ; i < array.length ; i++){
  				handler = array[i];
  
  				func = handler.method;
  				// 每个处理程序包含一个方法和一组可选的参数.
  				// 如果该方法是一个字符串形式的名字，那么就查找该函数.
  				if(typeof func === 'string'){
  					func = this[func];
  				}
  							
  				// 调用处理程序。如果该条目包含参数，那么传递它们过去.否则，传递该事件对象。
  				func.apply(this, handler.parameters || [event]);
  			}
  		}
  		return this;
  	};
  
  	// 注册一个事件
  	that.on = function(type, method ,parameters){
  		var handler = {
  			method : method,
  			parameters : parameters
  		};
  		if(registry.hasOwnProperty(type)){
  			registry[type].push(handler);
  		}else{
  			registry[type] = [handler];
  		}
  		return this;
  	};
  
  	return that;
  };

      用这种方式，一个构造器函数可以从一套部件(函数)中组装出对象。Javascript的弱类型在 此处是一个巨大的优势，因为我们无须花费精力去关注整个类型系统。相反，我们可以专注于它们的个性化内容。