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>

 

posted @ 2012-03-17 19:00  水之原  阅读(423)  评论(0编辑  收藏  举报