jswhat-is-继承

应用场景
例如在前端开发中,几乎每一个页面都有http请求,请求前都要显示loading,请求完成后loading要显示。如果请求出错需要捕捉错误,还可以根据后端返回的状态码统一判断请求是否成功。
如果把这些共同点封装成一个http,而每一个页面都继承了这个类就可以大大的提高开发效率。

原型链
提到继承,不得不说原型链。
在JavaScript中所有的类型都继承自Object。也许有人会有疑问,你怎么证实这一点呢?

let str = 'hello'
str.toString() // hello

str 明明是一个基本类型,为什么可以调用方法呢?
通过浏览器打印str.__proto__ 发现这个属性指向String类型的prototype;
再打印String.prototype的__proto__ 发现它执行Object的prototype;
也就等于 str —> str.__proto –> str.__proto__.__proto__(也就是String) —> Object.prototype

str.__proto__ === String.prototype //true
String.prototype.__proto__ === Object.prototype  //true

每一个对象的__proto__指向它的构造函数的原型对象
每一个构造函数的prototype指向它的原型对象
当str通过这样链式的查找调用了Object里的.toString()方法,这就是继承的体现。

原型链继承

function Parent(addr){
    this.addr = addr
}
Parent.prototype = {
    getAddr(){
        return this.addr
    }
}
function Child(addr){
    Parent.call(this,addr)
}
Child.prototype = Object.create(Parent.prototype,{
    constructor:{
        value: Child,
        enumerable: false,
        writable: true,
        configurable:true
    }
})
let baby = new Child('mzdd')
baby.getAddr() // mzdd

Class继承
ES6提供了Class这个API,可以更简单的实现继承

Class Parent {
    constructor(addr) {
        this.addr = addr
    }
    getAddr() {
        return this.addr
    }
}
Class Child extends Parent {
    constructor(addr) {
        super(addr)
    }
}

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理