js繼承的幾種方式

最後更新：2014-10-22 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：http io ar java sp on cti 代碼 html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

// ------------------------繼承的第一種方式：對象冒充-----------------------------

function Parent(name) { this.name = name; this.showInfo = function () { document.write(name); document.write(""); } }

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("");}}

var parent = new Parent("John");var child = new Children("Bob", 123);

parent.showInfo();child.showInfo();child.showMsg();

document.write("");document.write("");

//call方法，是function裡的一個方法。

//------------------------call方法簡單樣本-------------------------------

function test(str) {document.write(this.name + "," + str+"");}

var person = new Object();person.name = "anllin";

//相當於調用了test方法test.call(person, "welcome"); //將person賦給了test裡的this。

document.write("");document.write("");

//--------------------繼承的第二種方式，call方法------------------------------

function Father(name) {this.name = name;this.showName = function () {document.write(this.name + "");}}

function Sub(name, pwd) {//關鍵的代碼Father.call(this, name);

this.pwd = pwd;this.showPwd = function () {document.write(this.pwd + " ");}}

var father = new Father("Father");var sub = new Sub("Sub", 123456);father.showName();sub.showName();sub.showPwd();

document.write("");document.write("");

//--------------------繼承的第三種方式，apply方法------------------------------

function Mother(name) {this.name = name;this.showName = function () {document.write(this.name + "");}}

function Daugther(name, pwd) {//關鍵的代碼Mother.apply(this, new Array(name));

this.pwd = pwd;this.showPwd = function () {document.write(this.pwd + " ");}}

var mother = new Father("Mother");var daugther = new Sub("Daugther", 654321);mother.showName();daugther.showName();daugther.showPwd();

document.write("");document.write("");

//--------------------繼承的第四種方式，prototype chain方式------------------------------

//缺點：無法給建構函式傳參數。

function Human(){ }

Human.prototype.name = "human";Human.prototype.showName = function () {document.write(this.name+" ");}

function Student() { }

//關鍵的代碼Student.prototype = new Human();

Student.prototype.password = 456789;Student.prototype.showPwd = function () {document.write(this.password + " ");}

var human = new Human();var student = new Student();student.name = "student";human.showName();student.showName();student.showPwd();

document.write("");document.write("");

//--------------------繼承的第五種方式，混合方式------------------------------

function FatherClass(name) {this.name = name;}

FatherClass.prototype.showName = function () {document.write(this.name + " ");}

function SubClass(name, pwd) {

//關鍵的代碼

FatherClass.call(this,name);this.pwd = pwd;}

//關鍵的代碼

SubClass.prototype = new FatherClass;

SubClass.prototype.showPwd = function () {document.write(this.pwd + " ");}

var f = new FatherClass("FatherClass");var s = new SubClass("SubClass", 45678);f.showName();s.showName();s.showPwd();

</script> </body> </html>

js繼承的幾種方式

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

js繼承的幾種方式

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support