您的位置：首页 > Web前端 > JavaScript
js实现继承的五种方式

2012-03-17 19:00 501 查看
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航