博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ES6
阅读量:6458 次
发布时间:2019-06-23

本文共 1691 字,大约阅读时间需要 5 分钟。

原型继承和 Class 继承

原型如何实现继承?Class 如何实现继承?Class 本质是什么?

首先先来讲下 class,其实在 JS 中并不存在类,class 只是语法糖,本质还是函数。

那让我们来实现一下继承

组合继承

组合继承是最常用的继承方式,

function Parent(value) {  this.val = value}Parent.prototype.getValue = function() {  console.log(this.val)}function Child(value) {  Parent.call(this, value)}Child.prototype = new Parent()const child = new Child(1)child.getValue() // 1child instanceof Parent // true

以上继承的方式核心是在子类的构造函数中通过 Parent.call(this) 继承父类的属性,然后改变子类的原型为 new Parent() 来继承父类的函数。

这种继承方式优点在于构造函数可以传参,不会与父类引用属性共享,可以复用父类的函数,但是也存在一个缺点就是在继承父类函数的时候调用了父类构造函数,导致子类的原型上多了不需要的父类属性,存在内存上的浪费。

寄生组合继承

function Parent(value) {  this.val = value}Parent.prototype.getValue = function() {  console.log(this.val)}function Child(value) {  Parent.call(this, value)}Child.prototype = Object.create(Parent.prototype, {  constructor: {    value: Child,    enumerable: false,    writable: true,    configurable: true  }})const child = new Child(1)child.getValue() // 1child instanceof Parent // true

以上继承实现的核心就是将父类的原型赋值给了子类,并且将构造函数设置为子类,这样既解决了无用的父类属性问题,还能正确的找到子类的构造函数。

Class 继承

class Parent {  constructor(value) {    this.val = value  }  getValue() {    console.log(this.val)  }}class Child extends Parent {  constructor(value) {    super(value)    this.val = value  }}let child = new Child(1)child.getValue() // 1child instanceof Parent // true

class 实现继承的核心在于使用 extends 表明继承自哪个父类,并且在子类构造函数中必须调用 super,因为这段代码可以看成 Parent.call(this, value)。

模块化

为什么要使用模块化?都有哪几种方式可以实现模块化,各有什么特点?

  • 解决命名冲突
  • 提高代码的可复用性
  • 提高代码的可维护性

立即执行函数

以作用域的方式来解决命名冲突的问题

Module

// 引入模块 APIimport XXX from './a.js'import { XXX } from './a.js'// 导出模块 APIexport function a() {}export default function() {}

Proxy

Proxy 可以实现什么功能?

Proxy 是 ES6 中新增的功能,它可以用来自定义对象中的操作。

转载地址:http://wpizo.baihongyu.com/

你可能感兴趣的文章
HDU 4996 Revenge of LIS(DP)
查看>>
App里面如何正确显示用户头像
查看>>
DATAGUARD维护:从库宕机后如何恢复到管理恢复模式
查看>>
Android中的PID和UID
查看>>
MAC下上公司内网
查看>>
CentOS7.4安装mysql5.7
查看>>
U-BOOT之一:BootLoader 的概念与功能
查看>>
我的路上
查看>>
Velocity处理多余空白和多余空白行问题
查看>>
内容开发平台(PLATFORM)
查看>>
java值传递
查看>>
判断一个数是否为素数的一个讨论(一)
查看>>
DB2与oracle有什么区别
查看>>
创建一个多级文件目录
查看>>
RTS与CTS的含义【转】
查看>>
Selenium2+python自动化4-Pycharm使用
查看>>
Linux常用命令(1)
查看>>
Picasa生成图片幻灯片页面图文教程
查看>>
js获取当前时间的前一天/后一天
查看>>
[洛谷P3978][TJOI2015]概率论
查看>>