JavaScript----创建可重用代码

1.1、原型式继承
    JavaScript对象的创建与继承使用了一套特别的模式，称为原型式继承。这种方法的原理是，对象的构造函数可以从其他对象中继承方法，它创建出一个原型对象后，所有其他的新对象都可以基于这个原型对象来构建。
    整个过程都是通过原型属性（prototype）来实现的（这是每个函数都有的一个属性，用作构造函数的函数自然也会有这个属性）。原型式继承的设计适用于单继承而非多继承。原型本身并不会从其他原型或者构造函数中继承属性，而属性都是从实际对象那里继承过来的。例

<script>
//为Person对象创建一个构造函数
function Person(name){
	this.name = name;
}
//给Person对象添加一个新方法
Person.prototype.getName = function(){
	return this.name;
};
//创建一个User对象的构造函数
function User(name, password){
	//注意，这里并没有支持方便的重载/继承，也就是说，
	//不能调用父类的构造函数
	//此处等于是给父类的name属性赋值，类似于java的super(name);
	//this.name = name;  
	Person.call(this, name);//调用父类的构造函数
	this.password = password;
}
//User对象继承所有Person对象的方法
User.prototype = new Person();
//添加一个新方法到User对象中
User.prototype.getPassword = function(){
	return this.password;
};
var user = new User("张三", "123");
alert(user.name);
alert(user.getName());
alert(user.password);
alert(user.getPassword());
</script>

    上面这个例子中最重要的一行是User.prototype = new Person();。分析一下这究竟是什么意思：User是对User对象构造函数的引用。new Person()使用Person构造函数创建了一个新的Person对象，然后把User构造函数的原型置为这个操作的结果。也就是说，每当你new User()时，得到的新User对象都会带有Person对象的所有的方法，如同通过操作new Person()得到的一样。
1.2、类式继承
    JavaScript里模拟类式继承的3个函数：

<script>
//简单的辅助函数，让你可以将新函数绑定到对象的prototype上
//这个将会添加一个公共方法到 Function.prototype 中，
//这样通过类扩展所有的函数都可以用它了。它要一个名称和一个函数作为参数。
//它返回 this 。当我写一个没有返回值的方法时，
//我通常都会让它返回 this 。这样可以形成链式语句。
Function.prototype.method = function(name, func){
	this.prototype[name] = func;
	return this;
};

//一个(相当复杂的)函数，允许你方便地从其他对象继承函数，
//同时仍然可以调用属于父对象的那些函数
//inherits 方法，它会指出一个类是继承自另一个类的。
//它必须在两个类都定义完了之后才能定义，但要在方法继承之前调用。
Function.method('inherits', function(parent){
	//记录我们目前所在父层次的级数
	var depth = 0;
	//继承父对象的方法
	var proto = this.prototype = new prent();

	//创建一个新的名为'uber'的"特权"函数，
	//调用它时会执行所有在继承时被重写的函数
	this.method('uber', function uber(name){
		var func;	//要执行的函数
		var ret;	//函数的返回值
		var v = parent.prototype;	//父对象的prototype

		//如果我们已经在某个'uber'函数之内
		if(depth){
			//上溯必要的depth，以找到原始的prototype
			for(var i = d; i > 0; i += 1){
				v = v.constructor.prototype;
			}

			//从该prototype中获得函数
			func = v[name];
		//否则这就是'uber'函数的第一次调用
		} else {
			//从prototype获得要执行的函数
			func = proto[name];

			//如果此函数属于当前的prototype
			if(func == this[name]){
				//则改为调用父对象的prototype
				func = v[name];
			}
		}

		//记录我们在继承堆栈中所在位置的级数
		depth += 1;

		//使用除第一个以外所有的arguments调用此函数。
		//(因为第一个参数是执行的函数名)
		ret = func.apply(this, Array.prototype.slice.apply(arguments, [1]));
		//恢复继承堆栈
		depth -= 1;
		//返回执行过的函数的返回值
		return ret;
	});
	return this;
});

//只继承父对象特定函数的函数。而非使用new parent()继承所有的函数
//swiss 方法对每个参数进行循环。每个名称，它都将 parent的原型中
//的成员复制下来到新的类的 prototype 中。
Function.method('swiss', function(parent){
	//遍历所有要继承的方法
	for(var i = 1; i < arguments.length; i += 1){
		//需要导入的方法名
		var name = arguments[i];
		//将此方法导入this对象的prototype中
		this.prototype[name] = parent.prototype[name];
	}
	return this;
});
</script>

    这三个函数到底提供了什么？
    Function.prototype.method：它提供了一个简单的方法，把函数与构造函数的原型关联起来。之所以有效，是因为所有的构造函数本身都是函数，所以能获得“method”这个新方法。
    Function.prototype.inherits：这一函数可以用于提供简单的单对象继承，它的代码主要围绕在任意对象方法中调用this.uber('methodName')为中心，并在这个uber方法去执行它要覆盖的父对象的方法。这是JavaScript继承模型中并未内建的部分。
    Function.prototype.swiss：这是.method()函数的增强版，可以用于从单一父对象获取多个函数。如果用在多个父对象上就能获得可用的多对象继承。
使用类式继承风格的JavaScript函数例子：

<script>
//创建一个新的Person对象构造函数
function Person(name){
	this.name = name;
}
//给Person对象添加一个新的方法
Person.method('getName', function(){
	return this.name;
});
var per = new Person("张三");
alert(per.getName());

//创建了一个新的User对象构造函数
function User(name, password){
	this.name = name;
	this.password = password;
}
//从Person对象继承所有的方法
User.inherits(Person);
//给User对象添加一个新的方法
User.method('getPassword', function(){
	return this.password;
});
//覆盖Person对象创建的getName方法，但通过uber函数来调用原有方法
User.method('getName', function(){
	return "子类的方法：" + this.uber('getName');
});
var user = new User("李四", "888888");
alert(user.getName());
alert(user.getPassword());
</script>

1.3 Base库
    Base库提供了一套比较直观的对象继承方法。
    下面体验一下Base一下重要的方面，它们对开发很有帮助。一个创建对象、单父对象继承和覆盖父类方法的例子。

<script type="text/javascript" src="Base.js"></script>
<script type="text/javascript">
//用Base库进行简单对象创建与继承的例子
//创建一个新的Person类
var Person = Base.extend({
	//Person类的构造函数
	constructor : function(name){
		this.name = name;
	},
	//Person类的一个简单方法
	getName : function(){
		return this.name;
	}
});
//创建一个新的继承自Person类的User类
var User = Person.extend({
	//创建User类的构造函数
	constructor : function(name, password){
		//这个函数实际上调用了父类的构造函数
		this.base(name);
		this.password = password;
	},
	//给User类提供了另一个简单的方法
	getPassword : function(){
		return this.password;
	}
});

var user = new User("李四", "888888");
alert(user.getName());
alert(user.getPassword());
</script>

    Base.extend(...)：这个函数用于创建新的基本构造函数对象。这个函数接受的唯一参数是包含属性和值的简单对象，对象中的所有这些属性和值都被添加到要生成的对象里，作为其原型方法。
    Person.extend(...)：这是Base.extend()语法风格的另一个版本，因为所有的构造函数都使用过.extend()方法来获得它们自身的.extend()方法，所以你也可以直接继承它们。上面例子就是通过直接继承原始Person构造函数的方法来创建User构造函数的。
    this.base()；最后这个this.base()方法用来调用一个已被重载的父类方法。可以看到，这和Crockford的类式库提供的this.uber()函数很不一样，你不需要指定父类方法的名字。
1.4 Prototype库
    Pprototype的辅助函数，用于创建类、实现简单继承

<script type="text/javascript">
//创建一个名叫'Class'的全局对象
var Class = {
	//它只有一个函数，其作用是创建一个新的对象构造函数
	create : function(){
		//创建一个匿名的对象构造函数
		return function(){
			//调用它本身的初始化方法
			this.initialize.apply(this, arguments);
		};
	}
}
//给Object对象添加一个新的静态方法，
//它的作用是把属性从一个对象复制到另一个中
Object.extend = function(destination, source){
	//遍历所有要扩展的属性
	for(property in source){
		//然后将他们添加到目标对象中
		destination[property] = source[property];
	}
	
	//返回修改后的对象
	return destination;
}

//创建一个新的构造函数为空的Person对象
var Person = Class.create();

//将下面的函数复制到Person的prototype中
Object.extend(Person.prototype, {
	//这个函数由Person构造函数立即调用
	initialize : function(name){
		this.name = name;
	},
	//Person对象的简单函数
	getName : function(){
		return this.name;
	}
});

//创建一个新的构造函数为空的User对象
var User = Class.create();
//User对象继承了所有父类的函数
User.prototype = Object.extend(new Person(), {
	//将旧的初始化函数重载为新的
	initialize : function(name, password){
		this.name = name;
		this.password = password;
	},
	//给这个对象添加一个新的函数
	getPassword : function(){
		return this.password;
	}
});

var user = new User("王五", "888888");
alert(user.getName());
alert(user.getPassword());
</script>