JavaScript學習13 JavaScript中的繼承

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系列視頻教程。