js实现继承的五种方式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
// ------------------------继承的第一种方式:对象冒充-----------------------------
function Parent(name) {
this.name = name;
this.showInfo = function () {
document.write(name);
document.write("</br>");
}
}
function Children(name, pwd) {
//下面三行代码实现了子对象和父对象指向同一个引用
//关键的代码
this.method = Parent;
this.method(name);
delete this.method;
this.pwd = pwd;
this.showMsg = function () {
document.write(this.pwd);
document.write("</br>");
}
}
var parent = new Parent("John");
var child = new Children("Bob", 123);
parent.showInfo();
child.showInfo();
child.showMsg();
document.write("/*********************************************************/");
document.write("</br>");
//call方法,是function里的一个方法。
//------------------------call方法简单示例-------------------------------
function test(str) {
document.write(this.name + "," + str+"</br>");
}
var person = new Object();
person.name = "anllin";
//相当于调用了test方法
test.call(person, "welcome"); //将person赋给了test里的this。
document.write("/*********************************************************/");
document.write("</br>");
//--------------------继承的第二种方式,call方法------------------------------
function Father(name) {
this.name = name;
this.showName = function () {
document.write(this.name + "</br>");
}
}
function Sub(name, pwd) {
//关键的代码
Father.call(this, name);
this.pwd = pwd;
this.showPwd = function () {
document.write(this.pwd + "<br>");
}
}
var father = new Father("Father");
var sub = new Sub("Sub", 123456);
father.showName();
sub.showName();
sub.showPwd();
document.write("/*********************************************************/");
document.write("</br>");
//--------------------继承的第三种方式,apply方法------------------------------
function Mother(name) {
this.name = name;
this.showName = function () {
document.write(this.name + "</br>");
}
}
function Daugther(name, pwd) {
//关键的代码
Mother.apply(this, new Array(name));
this.pwd = pwd;
this.showPwd = function () {
document.write(this.pwd + "<br>");
}
}
var mother = new Father("Mother");
var daugther = new Sub("Daugther", 654321);
mother.showName();
daugther.showName();
daugther.showPwd();
document.write("/*********************************************************/");
document.write("</br>");
//--------------------继承的第四种方式,prototype chain方式------------------------------
//缺点:无法给构造函数传参数。
function Human(){ }
Human.prototype.name = "human";
Human.prototype.showName = function () {
document.write(this.name+"<br>");
}
function Student() { }
//关键的代码
Student.prototype = new Human();
Student.prototype.password = 456789;
Student.prototype.showPwd = function () {
document.write(this.password + "<br>");
}
var human = new Human();
var student = new Student();
student.name = "student";
human.showName();
student.showName();
student.showPwd();
document.write("/*********************************************************/");
document.write("</br>");
//--------------------继承的第五种方式,混合方式------------------------------
function FatherClass(name) {
this.name = name;
}
FatherClass.prototype.showName = function () {
document.write(this.name + "<br>");
}
function SubClass(name, pwd) {
//关键的代码
FatherClass.call(this,name);
this.pwd = pwd;
}
//关键的代码
SubClass.prototype = new FatherClass;
SubClass.prototype.showPwd = function () {
document.write(this.pwd + "<br>");
}
var f = new FatherClass("FatherClass");
var s = new SubClass("SubClass", 45678);
f.showName();
s.showName();
s.showPwd();
</script>
</body>
</html>