【JavaScript高级程序设计】10、继承
对于原型的理解
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type="text/javascript" >
function person()
{
this.name = "test person";
}
//这个不是引用类型就不会随着一起改变
person.prototype.getProtoTypeTest = "test1";
//引用类型就会一起改变，因为引用是共享的
person.prototype.mystring = new Array("test11");
var person1 = new person();
var person2 = new person();
alert("person1:" + person1.getProtoTypeTest + " person2:" + person2.getProtoTypeTest);
alert("person1:" + person1.mystring + " person2:" + person2.mystring);
person1.getProtoTypeTest = "test2";
person1.mystring.push("test22");
//这里的值并没有改变，说明new出来的对象并不是共享的
alert("person1:" + person1.getProtoTypeTest + " person2:" + person2.getProtoTypeTest);
alert("person1:" + person1.mystring.toString() + " person2:" + person2.mystring.toString());
</script>
</head>
<body>
</body>
</html>
结果：
1、原型链
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type="text/javascript" >
function SuperType()
{
//给当前对象一个属性
this.property = true;
}
//给原型属性添加一个函数，prototype原型属性是包含在所有的对象中的，所有的这个对象
//都会共享这个属性
SuperType.prototype.getSuperValue = function()
{
//返回当前对象的一个属性
return this.property;
};
function SubType()
{
this.subproperty = false;
}
//继承SuperType
SubType.prototype = new SuperType(); //用原型属性来接受一个对象,本质就是重写原型对象
//添加一个原型属性，返回当前属性的值
SubType.prototype.getSubValue = function()
{
return this.subproperty;
};
//创建一个新的对象
var instance = new SubType();
alert(instance.getSuperValue()); //这里返回的是true，也就是继承过来的数据
</script>
</head>
<body>
</body>
</html>
结果：
原型链的图解：
2、组合继承
所谓组合继承就是使用call方法在构造函数中调用父类构造函数，然后通过原型链的方式继承父类方法
<!DOCTYPE html>
<html>
<head>
<title>Combination Inheritance Example</title>
<script type="text/javascript">
//首先构建一个初始的父类
function SuperType(name)
{
this.name = name;
this.colors = ["red", "blue", "green"];
}
//设定一个原型的方法
SuperType.prototype.sayName = function()
{
alert(this.name);
};
//子类，通过call来调用父类构造函数，避免引用的问题
function SubType(name, age)
{
//继承属性
SuperType.call(this, name);
this.age = age;
}
//继承方法，原型链
SubType.prototype = new SuperType();
//添加原型方法
SubType.prototype.sayAge = function()
{
alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27
</script>
</head>
<body>
</body>
</html>
3、寄生组合式继承
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type="text/javascript">
//这种方式用来继承方法
function object(o)
{
function F(){}
F.prototype = o;
return new F();
}
//寄生组合方式的继承
function inheritPrototype(subType, superType)
{
//创建对象
var prototype = object(superType.prototype);
//增强对象
prototype.constructor = subType;
//指定对象
subType.prototype = prototype;
}
function SuperType(name)
{
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function()
{
alert(this.name);
};
//借助call函数,使得当前对象获取父类的属性参数
//call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
function SubType(name, age)
{
SuperType.call(this, name); //获取SuperType的属性到当前对象中
this.age = age;
}
//获取父类方法原型到当前对象,获取对象原型，继承父类方法
inheritPrototype(SubType, SuperType);
//子类调用父类方法
SubType.prototype.sayAge = function()
{
alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27
</script>
</head>
<body>
</body>
</html>
浙公网安备 33010602011771号