<!DOCTYPE html>
<html>
<head>
<title>模拟extjs底层继承方式</title>
</head>
<body>
<script type="text/javascript">
// 目标: extend(sub, sup); 便可值只进行1次对父类模板的继承 和1次对父类原型对象的继承
function extend(sub, sup) {
// 1. 设置一个空函数,目的:空函数进行中转
var F = new Function();
// 2. 实现空函数的原型对象和超类原型对象的转换
F.prototype = sup.prototype;
// 3. 原型继承
sub.prototype = new F();
// 4. 还原子类构造器
sub.prototype.constructor = sub;
// 5. 保存一下父类的原型对象,一方面方便解耦,另一方面方便获得父类的原型对象
sub.superClass = sup.prototype; // 自定义一个子类的静态属性,接受父类的原型对象
// 6. 判断父类的原型对象的构造器(加保险)
if(sup.prototype.constructor == Object.prototype.constructor) {
sup.prototype.constructor = sup; // 手动设置父类原型对象的构造器
}
}
// 混合使用原型继承和构造函数继承方法
// 父类
function Person(name,age) {
this.name = name;
this.age = age;
}
// 父类原型对象属性
Person.prototype = {
constructor : Person,
sayHello : function() {
alert('hello world');
}
}
// 子类
// 进行了一次对父类模板的继承
function Boy(name, age, sex) {
Boy.superClass.constructor.call(this, name, age);
this.sex = sex;
}
// 子类的原型对象是父类实例对象
// 进行了1次对父类模板的继承,和1次对父类原型对象的继承
// Boy.prototype = new Person();
extend(Boy, Person);
//给子类的原型对象加一个方法
Boy.prototype.sayHello = function() {
alert('hi javascript');
}
var b1 = new Boy('z3',20,'男');
alert(b1.name); // z3
alert(b1.sex); // 男
b1.sayHello(); // hi,javascript
Boy.superClass.sayHello.call(b1); // hello world
// 修改了原本的方法,原方法中一共进行了2次对父类模板的继承,和1次对父类原型对象的继承
</script>
</body>
</html>
<html>
<head>
<title>模拟extjs底层继承方式</title>
</head>
<body>
<script type="text/javascript">
// 目标: extend(sub, sup); 便可值只进行1次对父类模板的继承 和1次对父类原型对象的继承
function extend(sub, sup) {
// 1. 设置一个空函数,目的:空函数进行中转
var F = new Function();
// 2. 实现空函数的原型对象和超类原型对象的转换
F.prototype = sup.prototype;
// 3. 原型继承
sub.prototype = new F();
// 4. 还原子类构造器
sub.prototype.constructor = sub;
// 5. 保存一下父类的原型对象,一方面方便解耦,另一方面方便获得父类的原型对象
sub.superClass = sup.prototype; // 自定义一个子类的静态属性,接受父类的原型对象
// 6. 判断父类的原型对象的构造器(加保险)
if(sup.prototype.constructor == Object.prototype.constructor) {
sup.prototype.constructor = sup; // 手动设置父类原型对象的构造器
}
}
// 混合使用原型继承和构造函数继承方法
// 父类
function Person(name,age) {
this.name = name;
this.age = age;
}
// 父类原型对象属性
Person.prototype = {
constructor : Person,
sayHello : function() {
alert('hello world');
}
}
// 子类
// 进行了一次对父类模板的继承
function Boy(name, age, sex) {
Boy.superClass.constructor.call(this, name, age);
this.sex = sex;
}
// 子类的原型对象是父类实例对象
// 进行了1次对父类模板的继承,和1次对父类原型对象的继承
// Boy.prototype = new Person();
extend(Boy, Person);
//给子类的原型对象加一个方法
Boy.prototype.sayHello = function() {
alert('hi javascript');
}
var b1 = new Boy('z3',20,'男');
alert(b1.name); // z3
alert(b1.sex); // 男
b1.sayHello(); // hi,javascript
Boy.superClass.sayHello.call(b1); // hello world
// 修改了原本的方法,原方法中一共进行了2次对父类模板的继承,和1次对父类原型对象的继承
</script>
</body>
</html>