一直搞不懂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;