本文實例講述了JS偽繼承prototype實現方法。分享給大家供大家參考，具體如下：
眾所周知JS中沒有類的概念，但是要想實現類的功能可以同過function模擬。如：
第一種繼承 （屬性繼承）
//該函數相當于是一個構造器，也是一個偽類 function Fn(){ this.a = 4; this.b = 5; this.log = function(){ console.log(this.a,this.b); } } function Fn1(){ Fn.call(this);//調用父類的構造函數 } Fn1.prototype = Fn.prototype; var fn = new Fn(); var fn1 = new Fn1(); //由此可見Fn1 是fn1的子類。 fn1 instanceof Fn; // true fn instanceof Fn1; // true fn.a = 5; //由此可見Fn1 繼承了 Fn得所有屬性和方法 //而是是復制了一份Fn的屬性和方法，并不是對象的引用。 console.log(fn.a); // 5 console.log(fn1.a); // 4 this.log(); // 4 5總結： 這種繼承，是重新拷貝一份放入內存中，他們的值互相獨立，修改一個不會改變另一個。
第二種繼承 原型繼承(prototype)
function Fn(){} Fn.prototype.data = { name: 'zhangsan' } Fn.prototype.getName = function(){ return this.data.name; } function Fn1(){} //原型鏈繼承 Fn1.prototype = Fn.prototype; var fn = new Fn(); var fn1 = new Fn1(); //所用Fn1 繼承了 Fn fn1 instanceof Fn;//true console.log(fn1.getName()); // zhangsan console.log(fn.getName()); // zhangsan //修改了fn的name屬性值 fn.data.name = 'lisi'; // 由此我們可看出 原型鏈繼承 是 引用繼承 //不會重新拷貝一份變量。就像對象的引用一樣。 console.log(fn.getName()); // lisi console.log(fn1.getName()); // lisi兩種類的寫法造成示例的區別
//第一種 function Fn(){ this.a = 4; this.b = 5; this.log = function(){ console.log(this.a,this.b); } } var fn1 = new Fn(); var fn2 = new Fn(); fn1.a = 1; //由此可以看出兩個對象互不影響 //說明每個對象里都存在一份a和b fn1.log(); // 1 5 fn2.log(); // 4 5 //第二種 function Fn(){} fn.prototype.name = 'zhangsan'; fn.prototype.data = { a: 4, b: 5 } fn.prototype.log = function(){ console.log(this.data.a,this.data.b); } var fn1 = new Fn(); var fn2 = new Fn(); fn1.a = 1; //由此可見就算是不同的示例他們他們所指向的值是同一個。 fn1.log();//1 5 fn2.log();//1 5 fn2.name = 'lisi'; //這里fn1.name并沒有被修改 console.log(fn1.name); //zhangan console.log(fn2.name); // lisi總結
類中直接this. 出來的屬性和方法都會直接復制一份給子類或者實例對象。個子類或實例對象之間互不影響。
使用prototype增加的屬性和方法，對象類型的只有一份，值類型的這會被復制。
收獲
由于函數都是通用的，所以比較上面兩種方法，第二種明顯比第一種性能要好的多，因為避免了沒有必要的復制，肯定會比較節省內存。所以以后寫類的時候，盡量使用第二種方式。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
