js實現繼承的三種方式

兩情迢迢發表於2019-01-25
JS繼承

1.Object擴充方法

在Object的原型上增加一個繼承方法

function Parent (name, age) {
    this.name = name
    this.age = age
    this.say = function () {
        console.log(this.name, this.age)
    }
}
function Child (height, sex) {
    this.height = height
    this.sex = sex
}

Object.prototype.extend = function (parObj) { // 在Object原型上定義一個繼承方法，遍歷需要繼承的構造方法的例項屬性，新增到自身物件中
    for(let key in parObj) {
        this[key] = parObj[key]
    }
}

let child = new Child(177, '男')
console.log(child.name) // undefined

child.extend(new Parent('老王', 40))
console.log(child.name) // 老王
child.say() // 老王, 40


複製程式碼

2.使用call關鍵詞內部改變

// 還是引用上面的父類 子類方法
function Parent (name, age) {
    this.name = name
    this.age = age
    this.say = function () {
        console.log(this.name, this.age)
    }
}
function Child (height, sex, name, age) {
    Parent.call(this, name, age) // 將Parent類中的this改成Child例項，並傳入name age引數
    this.height = height
    this.sex = sex
}

let child = new Child(177, '男', '老王', 40)

console.log(child.name) // 老王
console.log(child.age) // 40
console.log(child.height) // 177
console.log(child.sex) // 男

複製程式碼


3.原型繼承


// 還是引用上面的父類 子類方法
function Parent (name, age) {
    this.name = name
    this.age = age
    this.say = function () {
        console.log(this.name, this.age)
    }
}
function Child (height, sex) {
    this.height = height
    this.sex = sex
}
Child.prototype = new Parent('老王', 40)
let child = new Child(177, '女')
console.log(child.name) // 老王
console.log(child.height) // 177
...複製程式碼


相關文章