【Javascript】手寫運算符new實現繼承

new 運算符

在js中,new()常被用來建立一個用戶定義的對象類型的實例或具備構造函數的內置對象的實例
本文，主要講如何手寫function new建立實例並實現js繼承

對於想完全捋清楚new作了哪些操做的同窗，能夠查看個人這篇文章:

【Javascript】完全捋清楚javascript中 new 運算符的實現

手寫實現 new()

function subNew(){
  var obj = {}
 將父級的原型prototype指向子級的隱式原型__proto__
  obj.__proto__ = Parent.prototype
 //建立實例的時候傳參
  var res = Parent.call(obj,...arguments)
 //當構造函數有return時，返回return值,沒有則返回obj{}
  return typeof(res) === 'object'&&res || obj    
}
複製代碼

使用 subNew() 建立實例並對比new()

var obj1 = new Constructor()
var obj2 = subNew()
console.log(new Constructor(123),subNew(123))
console.log(new Constructor({a:123}),subNew({a:123}))
console.log(obj1.__proto__,obj2.__proto__,Constructor.prototype)
複製代碼

能夠發現 咱們已經成功建立了new的實例,而且obj1,obj2的__proto__都指向Constructor的prototype

如今咱們來嘗試使用subNew()實現js繼承

function Parent(sex) {
  this.sex = sex   
}  
Parent.prototype.saySex=function(){
  console.log(this.sex)
}
function Child() {  
  Parent.apply(this,[...arguments])
}  
function subNew(){
  var obj = {}
  obj.__proto__ = Parent.prototype
  var res = Parent.call(obj,...arguments)
  return typeof(res) === 'object'&&res || obj 
}
Child.prototype = subNew()   // 等同於 Child.prototype = new Parent()
var c=new Child('男');
c.saySex();
複製代碼

Child 繼承成功了！！！

若是個人文章對你有幫助，歡迎關注個人博客,JS/Python/算法系列,碼不停題！！！