js继承解读

阅读更多

 

一直搞不懂js的继承机制，虽然知道什么 js继承是由原型prototype和构造函数constructor实现继承！看了很多文章还是这样模糊：为什么这样，为什么那样，为什么为什么为什么！... ... 。不懂为什么，当然就不是真正理解，记也记不住。（即使记住也是没用的）。不过经过自己反复测试后终于茅塞顿开。现拿来和大家分享下。

最难理解的当然就是prototype和constructor，这两个都理解，其他自然不在话下。

prototype：原型prototype方式的属性查询可以理解为js独有的一个机制。

 

就是说，js读取一个对象属性的时候，对象本身若找不到，则会去读取构造函数的prototype对象的同名属性，然后若还是找不到，则去读取Object构造函数的prototype对象的同名属性——即所谓的“继承”...

 

如果要实现继承关系A->B，则想要A继承B的属性，则需要自己去维护这个prototype对象。

——这就涉及一些技巧。

 

constructor：它是每个对象都有的一个属性，它引用初始化这个对象时候的构造函数。js这也是独有的一个机制。它有默认值。

你可以不去维护它，这个时候你不去用它，也不会有任何问题。但是，当你想让它正确工作的时候，则就需要我们去维护它了！

——这就涉及一些技巧。

 

懂得这两个技巧后，就可以说你理解了js的继承原理！

 

下面是测试代码，大家测试的时候把相应的地方的注释打开，把不想要的地方注释起来就ok了：

 

/************  NOTICE START ：基础知识 ************
1 对于函数
每个函数都一个prototype 属性，它引用预定义的原型对象———— prototype在使用new操作符把函数作为构造函数时起作用！
—— 具体什么作用呢？后面会讲到

2 对于对象
js中，每个对象都有一个constructor属性，他引用初始化这个对象时候的构造函数
eg. var d = new Date(); d.constructor == Date;// true

———— 注意，这个引用在内建对象时候是自动的，js内部已经维护好了

=================================================================
但是对于自定义类，则需要自己维护!!!  而在继承的时候可能还会出问题，所以就需要自己修改
=================================================================
因为自定义类的对象的constructor默认指向Function的构造函数：funciton Function(){ [native code] }

而这可能不是想要的。
所有js的类继承于Object，—— 这其实是js内部做了一些工作实现的



js用原型prototype和构造函数constructor实现继承！

************  NOTICE END ************/


/**
*	开始测试
*/

//var d = new Date(); 
//alert(d.constructor==Date);// true 



//函数 ------ 其实又可当做对象的构造函数
var Person = function(name,age){
	this.name = name;
	this.age = age;
	this.mc = "MMCC";
	this.toString = function (){
		return "Person：name="+this.name+"/age="+this.age;
	};
};
//alert(Person.constructor);//  funciton Function(){ [native code] }
//alert(Person);// 即上面函数代码

Object.prototype.toString = function(){
	return " Object.prototype ";
};

//alert(Person.prototype); //显示 [object Object]—— 这是默认的prototype
//alert(Object.prototype); //显示 [object Object]
//alert(Object);
//alert({});

/**
 * 
 * Man Class Defination. Try to extends the Person Class
 * @param name
 * @param age
 * @param work
 * @param hobby
 * @return
 */
var Man = function(name,age,work,hobby) {
	this.work = work;
	this.hobby = hobby;
	Person.call(this,name,age);// 这样做的目的只有一个：就是借用Person函数初始化name/age。除此之外绝无他意
	// 我们可以把这种调用方式叫做构造函数链： 构造函数中调用另一个构造函数
	
	this.toString = function() {
		return "Man：name="+this.name+"/age="+this.age;
	};
};


// 注意new Person()这里不需要参数
Man.prototype = new Person();//  这个的意义 ？？？  
//这样之后Man.prototype可以使用Person的方法了！！！———— 对，就是这样的方式，实现了继承！！！———— 当然如果要使用Person的name等属性就会得到undefined
//因为 new Person();出来的对象name尽管存在，但未赋值。。。

delete Man.prototype.name;// 可以删去，也可以不删去。影响不是很大。。
//alert(Man.prototype.name);
delete Man.prototype.age;


//alert(Man.constructor);
Person.prototype.wealth = function() {
	return this.name +" * Person wealth * "+this.age;
};
Man.prototype.wealth = function() {
	return this.name +" * Man wealth * "+this.age;
};
Person.prototype.health = function() {
	return this.name +" * Man health * "+this.age;
};

var p = new Person("Chen",25);

//alert(p.constructor);// 实际上会去通过原型链的方式查找constructor,最终找到的是类的原型的constructor属性
//alert(p.prototype);// undefined
//alert(Person.constructor); // 这个和上面p.constructor结果不同， 它结果为 Function(){ [native code] } __ why

var man = new Man("luo",27,"IT","shopping");
//alert(man.constructor);// 实际上会去通过原型链的方式查找constructor,最终找到的是类的原型的constructor属性
//alert(man.prototype);// undefined
//alert(Man.constructor); // 这个和上面man.constructor结果不同， 它结果为 Function(){ [native code] }



//alert(Man.prototype);
//alert(man);

alert(man.health());
//alert(p.wealth());

//Man.prototype.constructor = Man;//这样之后，使一个class的constructor属性指向 它的构造函数 --- 这样又有什么好处呢？有什么必要呢？
// ———— 使Man类的原型的constructor正确的指向 它的构造函数Man，


//这样做的必要性在于,之后我们可能需要“正确”的调用Man函数的constructor属性
//alert(Person.prototype.constructor);// function(name,age){。。。 }
//alert(Man.prototype.constructor);// function(name,age,work,hobby) {。。。 }


// 下三者都为 true，这是符合继承常理，同时说明子类编写成功
//alert(man instanceof Object);这个想当然是会一直成立的
//alert(man instanceof Person);//这个只有在设置Man.prototype = new Person();才会成立
//alert(man instanceof Man);//这个其实是会一直成立的，不用担心这个


/**==============  单层继承的时候，可以通过为子类原型对象添加一个名为superclass的属性，来简化继承
*/
var Man2 = function(name,age,work,hobby) {
	this.superclass(name,age);
	this.work = work;
	this.hobby = hobby;
};
//然后在new Man2之前
Man2.prototype.superclass = Person;
//然后就可以使用了：
var m2 = new Man2("luok",22,"IT","Think");
alert(m2.name);



// 一个规则是 一个类的原型的constructor 需要指向 它的构造函数 。 否则呢

// 每个函数都会有一个 prototype 的属性 --- 默认为一个Object的对象，即Object类的实例。 为内建的代码

// 函数的原型对象


// constructor 
/**可以 直接Man.constructor 、 Man.prototype.constructor 区别：*
 * Man.constructor 为Man函数的构造函数—— Function(){ [native code]}
 * Man.prototype.constructor 当然就是Man的原型对象的构造函数
 */

 

 总结：

其实js实现继承有多种方式。据说是三种：(一)对象冒充 (二)原型prototype链方式 (即本文介绍的这种) (三)原型prototype拷贝方式

这三种的介绍可以在博文中找到：http://www.iteye.com/topic/70028

不过个人认为，(一)(三)的方式根本不能算是真正的继承。用原型prototype和构造函数constructor实现的继承才是真正的继承。

 

再次提一下前面讲的两个技巧。相信大家测试后也知道是什么技巧了。这里再说明一下，其实主要就是这两个句：

1——Man.prototype = new Person();

2——Man.prototype.constructor = Man;