?

JavaScript學習13 JavaScript中的繼承

?

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

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

　　

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

?

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

　　call方法是定義在Function對象中的方法，因此我們定義的每個函數都有該方法。

　　可以通過函數名來調用call方法，call方法的第一個參數會被傳遞給函數中的this，從第二個參數開始，逐一賦值給函數中的參數。

　　call方法：

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

?

　　call方法實現繼承：

<script type="text/javascript">//使用call方式實現對象的繼承function Parent(username) {this.username = username;this.sayHello = function(){alert(this.username);} }function Child(username, password) {Parent.call(this, username);//這樣語句很關鍵，等價于對象冒充中的三行語句//執行之后子類就具有了基類的屬性和方法//子對象的新增屬性和方法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對象里面的。

<script type="text/javascript">//使用apply方法實現對象繼承function Parent(username) {this.username = username;this.sayHello = function(){alert(this.username);} }function Child(username, password) {Parent.apply(this, new Array(username));//apply方法方式實現繼承，后面的參數以數組的形式傳入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）方式實現對象繼承function Parent() {}Parent.prototype.hello = "hello"; Parent.prototype.sayHello = function() {alert(this.hello); }function Child() {}Child.prototype = new Parent();//子類具有父類的屬性和方法 //擴展屬性 Child.prototype.world = "world"; Child.prototype.sayWorld = function() {alert(this.world); }var child = new Child();child.sayHello(); child.sayWorld();</script>

　　原型鏈的方式，缺點是無法給構造函數傳遞參數。

?

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

　　這種方式是對原型鏈方式的一種改進，使得可以向構造函數傳遞參數。

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

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

?

實例

<script type="text/javascript">function Shape(edge) {this.edge = edge;//屬性，多少條邊，通過構造函數的方式定義 }Shape.prototype.getArea = function()//通過原型的方式來定義方法 {return -1;//基類返回一個沒有意義的值 }Shape.prototype.getEdge = function() {return this.edge; }//定義子對象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());//另一個子類：四邊形 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系列視頻教程。

轉載于:https://www.cnblogs.com/mengdd/p/3767858.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。