繼承在前端邏輯操作中是比較常見的，今天我們就從零開始寫一個js的繼承方式
在es5中繼承實質上是先創建子類的實體物件，然后再將父類的方法添加到this上Parent.call(this)，在es6中則是先創建父類的實體物件this呼叫父類的super()，然后再用子類的建構式修改this，所以無論是哪種方法必然牽扯到的操作是
一、 以另一個物件替換當前執行物件的call方法
Function.prototype.myCall = function() { let obj = Array.from(arguments)[0] || window, arg = Array.from(arguments).slice(1), key = Symbol(), result obj[key] = this result = obj[key](...arg) delete obj[key] return result }
二、創建實體物件的new方法
function myNew(fn, arg) { let obj = {},
fn = Array.from(arguments)[0],
arg = Array.from(arguments).slice(1) Object.setPrototypeOf(obj, fn.prototype) fn.myCall(obj,...arg) return obj }
完成這兩步前提條件之后我們開始用自己的方法完成js繼承
function Fa(name) { this.name = name } Fa.prototype.set1 = function() { return [...this.name] } function Sa(name, age) { Fa.myCall(this,name) this.name = name; this.age = age } Sa.prototype.set2 = function() { return [...this.age] } Sa.prototype = myNew(Fa) Sa.prototype.constructor = Sa var qq = myNew(Sa, 123, 456) qq.set1() // [1,2,3]
因為es6中class的繼承方式必須用new關鍵字來呼叫，所有在此不做過多描述，代碼如下
class Fa { constructor(name) { this.name = name } set() { return [...this.name] } } class Sa extends Fa { constructor(name, age) { super(name) this.age = age } } var dd = new Sa(123, 456) dd.set() //[1,2,3]
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/27694.html
標籤：其他
上一篇：H5網頁布局+css代碼美化