為什么80%的碼農都做不了架構師？>>> ??

繼承模式一、

var?Parent?=?function(name){this.name?=?name?||?'parent'; }Parent.prototype?=?{obj:{a:?1},getName:?function(){return?this.name;} }var?Child?=?function(name){this.name?=?name?||?'Child'; }Child.prototype?=?new?Parent()var?p?=?new?Parent();var?c?=?new?Child();console.log(?p.getName()?) console.log(?c.getName()?)

缺點：子類如果要實現父類構造器里的初始化，需要重寫。

模式二、

var?Parent?=?function(name){this.name?=?name?||?'parent'; }Parent.prototype?=?{obj:{a:?1},getName:?function(){return?this.name;} }var?Child?=?function(name){Parent.apply(this,?arguments);??//?改進點 }Child.prototype?=?new?Parent()var?p?=?new?Parent();var?c?=?new?Child('child');console.log(?p.getName()?) console.log(?c.getName()?)

缺點：父類構造函數被執行了兩次，一次是在子類構造函數中，一次在賦值子類原型時，這是很多余的。

模式三、

var?Parent?=?function(name){this.name?=?name?||?'parent'; }Parent.prototype?=?{obj:{a:?1},getName:?function(){return?this.name;} }var?Child?=?function(name){Parent.apply(this,?arguments);? }Child.prototype?=?Parent.prototype??//改進點var?p?=?new?Parent();var?c?=?new?Child('child');console.log(?p.getName()?) console.log(?c.getName()?)

缺點：子類的修改會改變父類的值。

模式四、

var?Parent?=?function(name){this.name?=?name?||?'parent'; }Parent.prototype?=?{getName:?function(){return?this.name;},obj:?{a:1} }var?Child?=?function(){Parent.apply(this,?arguments); }var?F?=?function(){}F.prototype?=?Parent.prototype;Child.prototype?=?new?F();var?p?=?new?Parent('parent'); var?c?=?new?Child('child');console.log(child.obj.a)?;?//1 console.log(parent.obj.a)?;?//1 child.obj.a?=?2?; console.log(child.obj.a)?;?//2 console.log(parent.obj.a)?;?//2

模式五、

var?deepClone?=?function(source,target){source?=?source?||?{}?;target?=?target?||?{};for(var?i?in?source){if(source.hasOwnProperty(i)){if(typeof?source[i]?===?'object'){target[i]?=?(source[i]?instanceof?Array)???[]?:?{};deepClone(source[i],target[i])?;????}else{target[i]?=?source[i];}}}return?target?; }?;var?extend?=?function(Parent,Child){Child?=?Child?||?function(){}?;????if(Parent?===?undefined)????????return?Child?;????//借用父類構造函數Child?=?function(){Parent.apply(this,argument)?;}?;???//通過深拷貝繼承父類原型????Child.prototype?=?deepClone(Parent.prototype)?;????//重置constructor屬性Child.prototype.constructor?=?Child?; }?;

轉載于:https://my.oschina.net/shyl/blog/625994

總結

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

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