当前位置: 代码迷 >> JavaScript >> JavaScript: The Good Parts 读书笔记(3)
  详细解决方案

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

热度:680   发布时间:2012-11-01 11:11:32.0
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的弱类型在 此处是一个巨大的优势,因为我们无须花费精力去关注整个类型系统。相反,我们可以专注于它们的个性化内容。
  相关解决方案