es6中类和extends的本质

URLOS 发布于2019-08-20 13:39 / 2905人阅读

摘要：首先有一个地方就是把指向了本身，这里有什么用呢，的时候是指向一个这样的匿名函数。我们平时使用的和就是存在这个匿名函数里的。

理解es6的类和extends的原理，主要是先理解es5里面函数和对象间的关系（__proto__和prototype的知识）

class c { 
   constructor(){} 
   //static f() {} 
   a() {} 
} 

class d extends c{
}

通过typeof打印我们知道，c和d本质其实还是一个函数.接下来我们看最开始的地方c.prototype。

从图中我们可以看出，我们在class c里面定义的东西其实都是定义在c的prototype里的，然后我们再看一下d.__proto__。

从图中我们可以知道，d的原型proto是等于函数c的，继续，我们看看d的prototype属性

从图中我们可以看到d的prototype指向一个c生成的对象。并且我们可以通过打印看到虽然d.prototype指向了c，但是d.pototype.constructor === d是返回true的，这应该是js引擎做了修改，这也和我们平时实现继承时的做法一样。所以es6的继承其实是基于es5的方法的，只是写法变了，语法是为了方便我们写代码，最后由js做转化，但是也加了一些特性。
首先有一个地方就是把d.__proto__指向了c本身，这里有什么用呢，es5的时候d.__proto__是指向一个function(){}这样的匿名函数。我们平时使用的call和apply就是存在这个匿名函数里的。es6这个做法我觉得应该是为了支持static这个语法。在class c里面定义一个静态的函数f，他的子类d也可以通过d.f去访问，我们把刚开始的那段代码里的注释去掉，通过打印我们可以知道Object.prototype.hasOwnProperty.call(c,’f’)//true，Object.prototype.hasOwnProperty.call(d,’f’)//false
d.f访问的f其实是源于他的父类c的，这就是d.proto = c的作用。最后还有一个地方是，在c里可以定义getter和setter，比如get a(){},这些和es5里都是一样的，这些属性都会被挂在到c.prototype里面去。

云服务器服务器托管中类对象类型的转化云计算的本质 CDN的本质机器学习的本质

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

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

深入学习TypeScript

摘要：是的超级，遵循最新的规范相当于包含了的语法。表示方法没有返回任何类型类型表示的是那些永不存在的值的类型，例如异常错误写法错误三函数内容概述函数的定义可选参数默认参数剩余参数函数重载箭头函数。一、Typescript 介绍、环境搭建 1.1 Typescript 介绍 1.TypeScript 是由微软开发的一款开源的编程语言，像后端 java、C#这样的面向对象语言可以让 js 开发...

赵连江 2019-08-23 11:39 评论0 收藏0
JS 装饰器解析

摘要：在的中，定义了种不同装饰器的接口，其中装饰类以及装饰类方法的接口定义如下所示下面对这两种情况进行解析。作用于类的装饰器当装饰的对象是类时，我们操作的就是这个类本身。相关链接中的装饰器装饰器场景实战修饰器 showImg(https://segmentfault.com/img/remote/1460000013825346?w=640&h=280); 随着 ES6 和 TypeScri...

zzbo 2019-08-22 15:30 评论0 收藏0
谈一谈创建React Component的几种方式

摘要：用这种方式创建组件时，并没有对内部的函数，进行绑定，所以如果你想让函数在回调中保持正确的，就要手动对需要的函数进行绑定，如上面的，在构造函数中对进行了绑定。当我们谈起React的时候，多半会将注意力集中在组件之上，思考如何将页面划分成一个个组件，以及如何编写可复用的组件。但对于接触React不久，还没有真正用它做一个完整项目的人来说，理解如何创建一个组件也并不那么简单。在最开始的时候...

mylxsw 2019-08-20 14:24 评论0 收藏0
ES6系列---类

摘要：原型会自动调整，通过调用方法即可访问基类的构造函数。在简单情况下，等于类的构造函数的值是输出这段代码展示了当调用时等于。大多数面向对象编程语言都支持类和类继承的特性，而JavaScript只能通过各种特定方式模仿并关联多个相似的对象。这个情况一直持续到ES5。由于类似的库层出不穷，最终ES6引入了类特性，统一了类和类继承的标准。 ES5模仿类先看一段ES5中模仿类的代码： func...

huayeluoliuhen 2019-08-22 11:09 评论0 收藏0
es6之js的类

摘要：生成的类的原型会被自动调整，而你还能调用方法来访问基类的构造器。唯一能避免调用的办法，是从类构造器中返回一个对象。起源 JS 从创建之初就不支持类，也没有把类继承作为定义相似对象以及关联对象的主要方式，这让不少开发者感到困惑。而从 ES1 诞生之前直到ES5 时期，很多库都创建了一些工具，让 JS 显得貌似能支持类。尽管一些 JS 开发者强烈认为这门语言不需要类，但为处理类而创建的代...

libin19890520 2019-07-31 10:15 评论0 收藏0