談談javascript中原型繼承

什麼是繼承？
拿來主義：本身沒有，別人有，把別人的拿過來使用或者讓其成爲本身的 

 如何實現繼承的方式

• 原型繼承
• 混入繼承
• 經典繼承

1. 混入繼承

因爲一個對象能夠繼承自任意的對象，即：o能夠繼承自對象o1，o2，o3...，因此，把這種繼承稱爲：混入繼承

• 將其餘對象中的成員加到本身身上
• 對象能夠繼承自任意的對象

var o1 = {name:"女媧", age: 1, gender: "female"}; var o2 = {grade: "三年級二班", score: 100}; // o2 繼承 o1 for ( var k in o1 ) { o2[k] = o1[k]; } // 若是但願 o2 能夠繼承自任意的對象. 因此爲了簡化繼承的代碼 // 給 o2 提供一個方法, 叫 extend o2.extend = function (obj) { for (var k in obj) { this[k] = obj[k]; } } o2.extend(o1); // o2 繼承 o1 

2 原型繼承

若是須要讓一個對象擁有某些屬性和方法，能夠把這些屬性和方法放到原型對象中，由於對象會繼承自原型對象，因此就得到了該屬性和方法。把這種繼承方式稱爲：原型繼承

• 實現繼承的方式

1 利用對象的動態特性  添加成員
2 覆蓋原型對象        添加成員
3 利用混入繼承        添加成員

• 原型的一些結論

1 任何函數均可以做爲構造函數
2 函數默認就有一個 prototype 屬性
3 函數的prototype 就是 原型
4 構造函數的prototype的類型是對象 
5 經過構造函數建立出來的對象默認連接到構造函數的prototype中
6 原型的成員（屬性和方法）能夠被對象共享

2.1 原型繼承實現方式

• 1 利用對象的動態特性

// 對象能夠動態的添加屬性
var o = {}; o.name = "川川"; o.age = 19; o.gender = "男"; // ----------------------- function Person() {} // 將須要的屬性添加到原型對象中 Person.prototype.sayHi = function() {}; var p = new Person(); p.sayHi(); 

• 2 覆蓋原型對象

Person.prototype = { sayHi: function() {}, sayNo: function() {}, sayYouAgin: function() {} }; 

注意：
使用覆蓋原型對象方式實現繼承的時候, 
推薦給這個新對象添加一個 constructor 屬性（屬性的值爲：當前的構造函數）
目的是保持和 默認狀況的原型結構同樣（模擬對象的類型）

可是若是對對象的類型要求不嚴格能夠忽略

constructor: Person

• 3 利用混入繼承添加原型成員

對象2.extend( 對象1 )

3 經典繼承 - Object.create

• 1 建立對象
• 2 讓建立出來的對象繼承自參數對象

詮釋 繼承是什麼。

ES5提供的方法（IE9+ 開始支持）
提出者：Douglas Crockford(道格拉斯 克羅克福德) JSON做者 《JavaScript語言精粹》
做用：實現繼承，即：讓一個對象（o2）繼承自另一個對象（o1）
var o2 = Object.create( o1 );

• 基本語法：

var o1 = { sayHi: function() { alert("hello，i am chuanchuan"); } }; var o2 = Object.create(o1); o2.sayHi(); 

• 兩種實現兼容的方式

// 1 給原生對象添加成員
if(!Object.create) { Object.create = function() { // 構造函數 function F() {} // 繼承 F.prototype = obj; return new F(); }; } // 2 統一使用新方法（推薦） var create = function( obj ) { if ( Object.create ) { return Object.create( obj ); } else { function F() {} F.prototype = obj; return new F(); } }