您的位置：首页 > Web前端 > JavaScript

javascript继承实现

2016-05-22 00:00 363 查看

使用javascript写自己的继承方法，主要用到javascript原型和构造方法方面的知识。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>使用javascript实现继承</title>
<script type="text/javascript" charset="GBK">
//sub是子类，sup是父类
function extend(sub,sup){
// 目的： 实现只继承父类的原型对象
var F = new Function();// 1 创建一个空函数    目的：空函数进行中转
F.prototype = sup.prototype;// 2 实现空函数的原型对象和超类的原型对象转换
sub.prototype = new F(); // 3 原型继承
sub.prototype.constructor = sub;//4还原子类的构造器
//保存一下父类的原型对象: 一方面方便解耦  另一方面方便获得父类的原型对象
sub.superClass = sup.prototype;//自定义一个子类的静态属性 接受父类的原型对象
//判断父类的原型对象的构造器 (加保险)
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){
//call 绑定父类的模版函数 实现 借用构造函数继承 只复制了父类的模版
Boy.superClass.constructor.call(this,name,age);
this.sex = sex;
};
//原型继承的方式: 即继承了父类的模版 又继承了父类的原型对象
//Boy.prototype = new Person();
// 只继承一遍父类的原型对象
extend(Boy , Person);

Boy.prototype.sayHello = function(){
alert('hi javascript!');
}
var b = new Boy('张三' , 20 , '男');
alert(b.name);
alert(b.sex);
b.sayHello();
Boy.superClass.sayHello.call(b);//父类的方法

</script>
</head>
<body>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航