javascript原型鏈繼承方式用法與缺點實例詳解

原型鏈方式

function Person(){
     this.name = 'Simon';
}
Person.prototype.say = function(){
     alert('My name is '+this.name);
}
function F2E(id){
     this.id = id;
     this.showId = function(){
          alert('Good morning,Sir,My work number is '+this.id);
     }
}
F2E.prototype = new Person();

var simon = new F2E(9527);
simon.say();
simon.showId();
alert(simon.hasOwnProperty('id')); //检查是否为自身属性

接下來按照上面的範例來理解以下js原型鏈概念：

原型鏈可以理解成：js中每個物件均有一個隱藏的__proto__屬性，一個實例化物件的__proto__屬性指向其類別的prototype方法，而這個prototype方法又可以被賦值成另一個實例化對象，這個對象的__proto__又需要指向其類，由此形成一條鏈，也就是前面程式碼中的

F2E.prototype = new Person()

這句話是關鍵。 js物件在讀取某個屬性時，會先尋找自身屬性，沒有則再去依序查找原型鏈上物件的屬性。也就是說原型鏈的方法是可以共用的，這樣就解決了物件冒充浪費記憶體的缺點。

下面再來來說缺點：
缺點顯而易見，原型鏈結方式繼承，就是實例化子類別時不能將參數傳給父類，也就是為什麼這個範例中function Person ()沒有參數，而是直接寫成了this.name=”Simon」的原因。下面的程式碼將無法達到預期的效果：

function Person(name){
     this.name = name;
}
Person.prototype.say = function(){
     alert('My name is '+this.name);
}
function F2E(name,id){
     this.id = id;
     this.showId = function(){
          alert('Good morning,Sir,My work number is '+this.id);
     }
}
F2E.prototype = new Person();

var simon = new F2E("Simon",9527);
simon.say();
simon.showId();

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

Person.prototype.say = function(){
     alert('My name is '+this.name);
}

function F2E(name,id){
     this.id = id;
     this.showId = function(){
          alert('Good morning,Sir,My work number is '+this.id);
     }
}

F2E.prototype = new Person();  //此处无法进行传值，this.name或者name都不行，直接写F2E.prototype = new Person('wood')是可以的，但是这样的话simon.say()就变成了My name is wood

var simon = new F2E("Simon",9527);
simon.say();  //弹出 My name is undefined
simon.showId();

最後，總結一下自認為較好的繼承實作方式，成員變數採用物件冒充方式，成員方法採用原型鏈方式，程式碼如下：

function Person(name){
     this.name = name;
}
Person.prototype.say = function(){
     alert('My name is '+this.name);
}
function F2E(name,id){
     Person.call(this,name);
     this.id = id;
}
F2E.prototype = new Person(); 
//此处注意一个细节，showId不能写在F2E.prototype = new Person();前面
F2E.prototype.showId = function(){
     alert('Good morning,Sir,My work number is '+this.id);
}
var simon = new F2E("Simon",9527);
simon.say();
simon.showId();

以上是javascript原型鏈繼承方式用法與缺點實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！