?

JavaScript學(xué)習(xí)13 JavaScript中的繼承

?

繼承第一種方式：對(duì)象冒充

<script type="text/javascript">//繼承第一種方式：對(duì)象冒充function Parent(username) //父類對(duì)象 {this.username = username; //下面的代碼最關(guān)鍵的部分就是將子對(duì)象的this傳遞給了父對(duì)象this.sayHello = function(){alert(this.username);} }function Child(username, password) //子類對(duì)象 {//下面三行代碼是最關(guān)鍵的代碼this.method = Parent; //定義method屬性，指向Parent，即指向了上面的構(gòu)造函數(shù)this.method(username);//把username傳遞過去，調(diào)用構(gòu)造函數(shù)，此時(shí)Parent函數(shù)體中的this即當(dāng)前的Child對(duì)象delete this.method; //刪掉method屬性，因?yàn)镃hild已經(jīng)具備了Parent的屬性和方法//下面可以增加一些子類特有的屬性和方法this.password = password;this.sayWorld = function(){alert(this.password);} }//生成這兩個(gè)類的對(duì)象 var parent = new Parent("zhangsan"); var child = new Child("lisi", "1234");parent.sayHello();child.sayHello(); child.sayWorld();</script>

　　

　　使用這種方式實(shí)現(xiàn)繼承的時(shí)候，JS可以實(shí)現(xiàn)多重的繼承，但是有時(shí)候會(huì)造成一些干擾，比如同名方法的覆蓋，所以不太推薦使用多繼承。

?

繼承第二種方式：call方法方式

　　call方法是定義在Function對(duì)象中的方法，因此我們定義的每個(gè)函數(shù)都有該方法。

　　可以通過函數(shù)名來調(diào)用call方法，call方法的第一個(gè)參數(shù)會(huì)被傳遞給函數(shù)中的this，從第二個(gè)參數(shù)開始，逐一賦值給函數(shù)中的參數(shù)。

　　call方法：

<script type="text/javascript">//call方法方式,Function對(duì)象中的方法function test(str, str2) {alert(this.name + ", " + str + ", " + str2); }var object = new Object(); object.name = "zhangsan";//test.call相當(dāng)于調(diào)用了test函數(shù) test.call(object, "shengsiyuan", "hello"); //將object賦給了this //第一個(gè)參數(shù)賦給this，后面的參數(shù)逐次賦給方法參數(shù)</script>

?

　　call方法實(shí)現(xiàn)繼承：

<script type="text/javascript">//使用call方式實(shí)現(xiàn)對(duì)象的繼承function Parent(username) {this.username = username;this.sayHello = function(){alert(this.username);} }function Child(username, password) {Parent.call(this, username);//這樣語句很關(guān)鍵，等價(jià)于對(duì)象冒充中的三行語句//執(zhí)行之后子類就具有了基類的屬性和方法//子對(duì)象的新增屬性和方法this.password = password;this.sayWorld = function(){alert(this.password);} }var parent = new Parent("zhangsan");var child = new Child("lisi", "123");parent.sayHello();child.sayHello(); child.sayWorld();</script>

?

繼承第三種方式：apply方法方式

　　apply和call一樣，都是定義在Function對(duì)象里面的。

<script type="text/javascript">//使用apply方法實(shí)現(xiàn)對(duì)象繼承function Parent(username) {this.username = username;this.sayHello = function(){alert(this.username);} }function Child(username, password) {Parent.apply(this, new Array(username));//apply方法方式實(shí)現(xiàn)繼承，后面的參數(shù)以數(shù)組的形式傳入this.password = password;this.sayWorld = function(){alert(this.password);} }var parent = new Parent("zhangsan"); var child = new Child("lisi", "123");parent.sayHello();child.sayHello(); child.sayWorld();</script>

?

繼承第四種方式：原型鏈方式

<script type="text/javascript">//使用原型鏈（prototype chain）方式實(shí)現(xiàn)對(duì)象繼承function Parent() {}Parent.prototype.hello = "hello"; Parent.prototype.sayHello = function() {alert(this.hello); }function Child() {}Child.prototype = new Parent();//子類具有父類的屬性和方法 //擴(kuò)展屬性 Child.prototype.world = "world"; Child.prototype.sayWorld = function() {alert(this.world); }var child = new Child();child.sayHello(); child.sayWorld();</script>

　　原型鏈的方式，缺點(diǎn)是無法給構(gòu)造函數(shù)傳遞參數(shù)。

?

繼承的第五種方式：混合方式

　　這種方式是對(duì)原型鏈方式的一種改進(jìn)，使得可以向構(gòu)造函數(shù)傳遞參數(shù)。

　　這種方式是比較推薦的一種方式。

<script type="text/javascript">//使用混合方式實(shí)現(xiàn)對(duì)象繼承(推薦) //父對(duì)象 function Parent(hello) {this.hello = hello; }Parent.prototype.sayHello = function() {alert(this.hello); } //子對(duì)象 function Child(hello, world) {Parent.call(this, hello);//通過call實(shí)現(xiàn)屬性的繼承this.world = world;//新增加的屬性 }Child.prototype = new Parent();//通過原型鏈實(shí)現(xiàn)方法的繼承 Child.prototype.sayWorld = function() {alert(this.world); }var child = new Child("hello", "world");child.sayHello(); child.sayWorld();</script>

?

實(shí)例

<script type="text/javascript">function Shape(edge) {this.edge = edge;//屬性，多少條邊，通過構(gòu)造函數(shù)的方式定義 }Shape.prototype.getArea = function()//通過原型的方式來定義方法 {return -1;//基類返回一個(gè)沒有意義的值 }Shape.prototype.getEdge = function() {return this.edge; }//定義子對(duì)象Triangle function Triangle(bottom, height) {Shape.call(this, 3);//Triangle的屬性this.bottom = bottom;this.height = height; }Triangle.prototype = new Shape();//繼承Shaple中的所有方法 Triangle.prototype.getArea = function()//重寫方法 {return 0.5 * this.bottom * this.height; }var triangle = new Triangle(10, 4);//alert(triangle.getEdge()); //alert(triangle.getArea());//另一個(gè)子類：四邊形 function Rectangle(bottom, height) {Shape.call(this, 4);this.bottom = bottom;this.height = height; }Rectangle.prototype = new Shape();//通過原型繼承父類的所有方法 Rectangle.prototype.getArea = function()//覆寫方法 {return this.bottom * this.height; }var rectangle = new Rectangle(20, 40);alert(rectangle.getEdge()); alert(rectangle.getArea());</script>

?

參考資料

　　圣思園張龍老師Java Web系列視頻教程。

轉(zhuǎn)載于:https://www.cnblogs.com/mengdd/p/3767858.html

總結(jié)

以上是生活随笔為你收集整理的JavaScript学习13 JavaScript中的继承的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。