jswhat-is-继承

13次阅读

共计 1087 个字符,预计需要花费 3 分钟才能阅读完成。

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

正文完
 0