JavaScript面向对象编程--学习



/*
 学习自http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html
*/

//1  生成对象的原始模式

/*var cat1={};
cat1.name="大毛";
cat1.color="yellow";
console.log(cat1);*/

//2  原始模式的改进

/*function Cat(name,color){
	return {
		name:name,
		color:color
	}
}

var cat1 = Cat("大毛","yellow");
console.log(cat1);*/

//3  构造函数模式

/*function Cat(name,color){

	this.name=name;
	this.color=color;
}

var cat1 = new Cat("大毛","yellow");
console.log(cat1);*/

//4  构造函数模式的问题

/*function Cat(name,color){
　　this.name = name;
　　this.color = color;
　　this.type = "猫科动物";
　　this.eat = function(){alert("吃老鼠");};
} 

var cat1 = new Cat("大毛","yellow");
console.log(cat1.type);*/
/*对于不同的对象具有相同的属性type，都会创建一次。
cat1.type!=cat2.type;
浪费内存*/

//5  Prototype模式 
/*function Cat(name,color){
	this.name=name;
	this.color=color;
}
Cat.prototype.type="猫科动物";
Cat.prototype.eta=function(){alert("吃老鼠");};

//此时，var1.type==var2.type
var cat1 = new Cat("大毛","yellow");
*/
//6.1 判断某个对象是否为某个类的实例
//alert(Cat.prototype.isPrototypeOf(cat1)); //true

//6.2 判断某个属性是原有的还是prototype出来的
/*alert(cat1.hasOwnProperty("name")); // true
alert(cat1.hasOwnProperty("type")); // false */

//6.3 in运算符 判断某属性是不是对象所包含的，不管是本地还是prototype的
/*alert("name" in cat1); // true
alert("type" in cat1); // true*/

//7  对象的继承--构造函数绑定
/*function Animal(){
	this.species="动物";
}

function Cat(name,color){
	//加入下面一行
	Animal.apply(this,arguments);
	//或者是call
	//Animal.call(this,arguments);

	this.name=name;
	this.color=color;
}
var cat1 = new Cat("大毛","yellow");
alert(cat1.species); // 动物*/

//8  prototype模式
/*function Animal(){
	this.species="动物";
}

function Cat(name,color){
	this.name=name;
	this.color=color;
}

Cat.prototype = new Animal();
//通过上面后，Cat.prototype由原来的Cat 指向了 Animal
//alert(Cat.prototype.constructor == Animal); //true
//如果替换了prototype对象，下一步必然是为新的prototype对象加上constructor属性
Cat.prototype.constructor = Cat;
var cat1 = new Cat("大毛","yello");
alert(cat1.species); // 动物*/

//9 直接继承prototype
/*
function Animal(){ }
Animal.prototype.species = "动物";

function Cat(name,color){
	this.name=name;
	this.color=color;
}

Cat.prototype = Animal.prototype;  
Cat.prototype.constructor = Cat;
var cat1 = new Cat("大毛","yello");
alert(cat1.species);

//不用执行和建立Animal的实例了,比较省内存
//这样做法会使得Cat.prototype的修改影响Animal.prototype
*/

//10  利用空对象作为中介
/*
function Animal(){ }
Animal.prototype.species = "动物";

function Cat(name,color){
	this.name=name;
	this.color=color;
}

function extend(Child, Parent) {
　　　var F = function(){};
　　　F.prototype = Parent.prototype;
　　　Child.prototype = new F();
		//F是空对象，所以几乎不占内存。这时，修改Cat的prototype对象，就不会影响到Animal的prototype对象。
　　　Child.prototype.constructor = Child;
　　　Child.uber = Parent.prototype;
}

extend(Cat,Animal);
var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 动物
*/

//11 拷贝继承
/*function Animal(){}
Animal.prototype.species = "动物";

function Cat(name,color){
	this.name=name;
	this.color=color;
}

function extend2(Child, Parent) { 
	var p = Parent.prototype;
	var c = Child.prototype;
	for (var i in p) { 
		c[i] = p[i];
	}
	c.uber = p;
} 

extend2(Cat, Animal);
var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 动物*/

//12 非构造函数的继承--
/*var Chinese = {
	nation:'中国'
};

function object(o) { 
	function F() {} 
	F.prototype = o; 
	return new F(); 
}

var Doctor = object(Chinese);
Doctor.career = '医生';
alert(Doctor.nation); //中国
*/

//13  浅拷贝
/*var Chinese = {
	nation:'中国'
};

function extendCopy(p){
	//如果父对象的属性等于数组或另一个对象,实际上，子对象获得的只是一个内存地址，而不是真正拷贝
	var c = {};
	for(var i in p){
		c[i] = p[i];
	}
	c.uber = p;
	return c;
}

//因此存在父对象被篡改的可能。
Chinese.birthPlaces = ['北京','上海','香港'];
var Doctor = extendCopy(Chinese);
Doctor.birthPlaces.push('厦门');
alert(Chinese.birthPlaces); //北京, 上海, 香港, 厦门*/

//extendCopy()只是拷贝基本类型的数据，我们把这种拷贝叫做"浅拷贝"。这是早期jQuery实现继承的方式。

//14  深拷贝 

var Chinese = {
	nation:'中国'
};

function deepCopy(p,c){
	var c = c || {};
	for(var i in p){
		if (typeof p[i] === 'object'){
			console.log(typeof p[i]);
			console.log(p[i]);
			c[i] = (p[i].constructor === Array )?[]:{};
			deepCopy(p[i], c[i]);
		}else{
			c[i] = p[i];
		}
		
	}
	return c;
}
Chinese.birthPlaces = ['北京','上海','香港'];
var Doctor = deepCopy(Chinese);

Doctor.birthPlaces.push('厦门');
alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门
alert(Chinese.birthPlaces); //北京, 上海, 香港