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>