您的位置：首页 > Web前端 > JavaScript
javascript 继承(extend)

2012-11-26 21:45 344 查看
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript 继承</title>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript">
//继承
println("---继承---");
println("---原型链---");
function SuperType(){
this.superProperty = true;
}
SuperType.prototype.getSuperProperty = function(){
return this.superProperty;
}

function SubType(){
this.subProperty = false;
}

SubType.prototype = new SuperType();

SubType.prototype.getSubProperty = function(){
return this.subProperty;
}

var sub = new SubType();
println("superProperty = " + sub.getSuperProperty() + ", subProperty = " + sub.getSubProperty());

//借用构造函数继承
println("----借用构造函数继承,无法继承父类原型中的方法----");
function Animal(name, color){
this.name = name;
this.color = color;
this.sayName = function(){
println("name = " + this.name);
}

}

Animal.prototype.showInfo = function(){
println("name = " + this.name + ", color = " + this.color);
};

function Dog(name,color){
Animal.apply(this, arguments);//本质：在子类的构造函数中调用父类的构造函数，所有父类原型中的方法必不能在子类中继承下来
}

var dog = new Dog("dog","white");
//dog.showInfo();//不能调用，没有从父类继承
dog.sayName();

//组合使用原型继承和构造函数继承
println("---组合使用原型继承和构造函数继承，完美，能继承父类所有的方法---");
function Pig(name,color){
Animal.apply(this, arguments);//第二次调用父类构造方法;//or use call method
}

Pig.prototype = new Animal();//第一次调用父类构造方法
Pig.prototype.sayColor = function(){
println("color = " + this.color);
}

var pig = new Pig("pig", "colorful");
pig.sayName();
pig.sayColor();
pig.showInfo();

//原型式继承
println("---原型式继承---");
//原理
function object(o){
function F(){}
F.prototype = o;
return new F();
}
var car = {
name:"laoshi",
drivers:["jhon", "kitty"]
}
var otherCar = object(car);
println(otherCar.drivers.join(","));
var anotherCar = object(car);
otherCar.drivers.push("noty");
println(anotherCar.drivers.join(","));
//在ECMAScript5中规范了此原型式继承:使用Object.create()方法
var person = {
name:"zizhu",
friends:["xia", "xu"]
}
var p1 = Object.create(person);
var p2 = Object.create(person);
p1.friends.push("yan");
println("after p1 push yan, and p2.friends = " + p2.friends.join(","));

//寄生式继承
println("---寄生式继承---");
function createAnother(original){
var clone = object(original);//复制original对象
clone.sayName = function(){//增强原来对象的方法
println("name = " + this.name);
}
return clone;
}

var another = createAnother(person);
another.sayName();

//寄生组合式继承
println("----寄生组合式继承---");
function Shape(name,count){
this.name = name;
this.count = count;
}

Shape.prototype.showInfo = function(){
println("name = " + this.name + ", count = " + this.count);
}

function Triangle(name, count){
Shape.apply(this, arguments);
}

//继承核心函数
function inheritProperty(sub, sup){
var proto = Object.create(sup.prototype);
proto.constructor = sub;
sub.prototype = proto;
}

inheritProperty(Triangle, Shape);
Triangle.prototype.sayName = function(){
println("name = " + this.name);
}
var triangle = new Triangle("三角形",3);
triangle.showInfo();//从父类继承
triangle.sayName();

</script>
</head>
<body>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航