应用场景
例如在前端开发中,几乎每一个页面都有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 //trueString.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) }}