【js】what is 继承

0xE7A38A 发布于2019-08-23 18:18 / 2514人阅读

摘要：如果请求出错需要捕捉错误，还可以根据后端返回的状态码统一判断请求是否成功。如果把这些共同点封装成一个，而每一个页面都继承了这个类就可以大大的提高开发效率。原型链提到继承，不得不说原型链。原型链继承继承提供了这个，可以更简单的实现继承

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

GPU云服务器云服务器 What is webrtc js 继承 js继承 js继承模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105013.html

klass 是如何实现JS的类以及类的相关属性和作用

摘要：前面介绍了和是如何实现类，及其类的属性和作用的。今天介绍的就是单纯的实现面向对象的库，只有多行，也照例分析吧。前面介绍了prototype.js和Mootools.js是如何实现类，及其类的属性和作用的。今天介绍的klass.js就是单纯的实现面向对象的库，只有90多行，也照例分析吧。实现类的步骤第一步是使用klass新建类，初始化的固定函数是initialize，不能使用其它...

Kross 2019-08-20 18:26 评论0 收藏0
js实现继承的方法中为何总是要修正constructor方法的指向呢？

摘要：由于属性是可以变更的，所以未必真的指向对象的构造函数，只是一个提示。不过，从编程习惯上，我们应该尽量让对象的指向其构造函数，以维持这个惯例。问题引入最近看了许多关于js继承实现的相关文章，许多实现方式中都会存在这么一行代码： A.prototype.constructor = A 于是感到好奇，这行代码的实际意义是什么？如果没有的话，还能达到继承的目的吗？前置知识为了熟悉jav...

fancyLuo 2019-08-23 11:28 评论0 收藏0
JavaScript选择题解答（1-20）

摘要：最近做了个上的的测试题目地址，错了一大堆，感觉的概念还有很多不是很清晰，这里记录一下个人博客文章地址第一题解答这里考的是的用法。如果出现的数字不符合后面输入的进制，则为，所以第二个值为。最近做了个heroku上的JavaScript的测试（题目地址），错了一大堆，感觉js的概念还有很多不是很清晰，这里记录一下个人博客文章地址第一题 What is the result of...

Worktile 2019-08-21 12:10 评论0 收藏0
ES6 入坑笔记：说说一些新概念

摘要：虽然现在还需要借助的力量但未来一定是属于。将类引入了，大大简化了原先复杂的工作从前要实现继承得多麻烦工厂模式无法解决对象识别，构造函数模式内存浪费，原型模式私有方法还要结合构造模式定义实例实现类的继承，我要用到继承类可以重写父类的方法虽然现在还需要借助babel的力量但未来一定是属于ES6。（那ES7？-_-|||） let 在ES6之前javascript只有两种作用域，即全局作用...

scq000 2019-08-20 10:21 评论0 收藏0
JS学习笔记 - 代码复用

摘要：本文章记录本人在学习中看书理解到的一些东西，加深记忆和并且整理记录下来，方便之后的复习。但是在开发的过程中，并不是所有的代码复用都会使用到继承。而且整个代码都无法按照预期来运行。为了修复绑定对象与方法之间的关系。本文章记录本人在学习 JavaScript 中看书理解到的一些东西，加深记忆和并且整理记录下来，方便之后的复习。 js 中复用代码说道代码复用，一般都会涉及到对...

cheng10 2019-08-21 10:35 评论0 收藏0