JavaScript ES6 Class类实现原理详解


Posted in Javascript onMay 08, 2020

JavaScript ES6之前的还没有Class类的概念,生成实例对象的传统方法是通过构造函数。

例如:

function Mold(a,b){
         this.a=a;
         this.b=b;
     }
     Mold.prototype.count=function(){
       return this.a+this.b;
     };
     let sum=new Mold(1,2);
    console.log(sum.count())//3

这中写法跟传统的面向对象语言差异较大,写起来也比较繁杂。

ES6提供了更加接近其他语言的写法,引入了Class(类)的概念,作为对象的模板,可以通过class关键字,定义类(类似python、java等);

当然ES6的大部分功能再ES5都能实现,ES6的class可以看作是一个语法糖,只是新的class定义类的写法让对象原型的写法更加简单明了、更接近与面向对象的编程思想。与上面ES5写的类使用ES6实现,例如:

class Mold{
       constructor(a,b){
         this.a=a;
         this.b=b;
       }
       count(){
         return this.a+this.b;
       }
    }
    let sum=new Mold(1,2);
    console.log(sum.count())//3

这里ES6的类,只需用class定义,并且类的方法不需要用function定义;还有ES6的constructor方法,代表这该类的构造方法;并且它的this关键字指向着实例对象。这里ES5的构造函数Mold,相当于ES6Mold类的constructor方法。

constructor

ES6实例对象的构造函数就是该类本身;并且当我们new 类名()就是执行了constructor这个函数。

例如:

class Mold{
       constructor(){
        console.log("aaa")
       }
    }
 let m=new Mold();// aaa
 console.log(m.constructor===Mold);//true

上面代码Mold类的constructor,实例化对象时执行默认constructor;

任何对象都有构造函数,并且构造函数与当前对象的类是相同;

例如:

let arr=new Array();
 console.log(arr.constructor===Array);//true
 let str=new String();
 console.log(str.constructor===String);//true
 let obj=new Object();
 console.log(obj.constructor===Object);//true

2. 类的继承 extends

继承父类后,子类会继承父类所有的方法和属性(包括静态方法和属性)

如果子类没有定义constructor方法,会默认被添加该方法

任何子类都有constructor方法;

例如:

//class 类名 extends 被继承的类{}
Class Father{
   constructor(){
   }
   sum(){
     console.log("abc");
   }
   static fn(){
     console.log("hello")
   }
 }
 Class Son extends Father{
  
 }
 let s=new Son();
 s.sum()//abc,继承了父类的sum()方法
 Son.fn()//hello 继承了父类的静态方法fn()

继承后的子类方法的三种处理:

1). 完全继承,不需要重写这个方法,子类执行继承方法内容与父类相同

2). 重写覆盖,只需要在这个类中重写这个方法就可以覆盖继承过来的内容

3). 加工,子类可以用super调用父类的方法或属性进行加工,再加上子类自己的方法和属性

3. super

调用父类的构造函数直接使用super(),并且可以传参;

子类的构造函数中,只有调用了super之后才可以使用this关键字,否则会报错;

例如:

//super.父类函数();
 class Father{
   constructor(){
    console.log("bbb");
   }
 }
 class Son extends Father{
   constructor(x){
    this.x=x;//ReferenceError,报错
    super();
    this.x=x;//正确
   }
 }
 let sum=new Son();//bbb

4. 类的static静态

在属性或方法前面使用 static定义类的静态属性和方法;

所有的静态属性和静态方法都不能通过实例化的对象调用;

需要通过类来调用,静态属性和静态方法是类的专属属性和方法,和实例化对象无关,比如数组和数学方法中的:Array.from();Math.random()。

例如:

class Mold{
     static x=0;
     y=1;
     static fn1(){
       console.log("aaa")
     }
     fn2(){
       console.log("bbb");
     }
    }
   let m=new Mold();
   console.log(m.x,m.y);//undefined , 1
   m.fn1(); // TypeError 
   m.fn2(); // bbb
   //需要通过类来调用
   Mold.fn1(); //aaa
   console.log(Mold.x);//0

静态的使用场景:

一般静态的方法是用来解决一系列该类型的方法;

解决具体类型的方法,不是解决某个具体对象的方法

静态属性,一般用于存储该类型的一系列通用的属性变量

这种存储,在类创建的时候就已经变成全局的了,可在任何地方调用,并且不会被自动销毁

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
JavaScript日历实现代码
Sep 12 Javascript
JavaScript:Div层拖动效果实例代码
Aug 06 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
JS实现根据文件字节数返回文件大小的方法
Aug 02 Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
vue脚手架搭建过程图解
Jun 06 Javascript
微信小程序实现下拉刷新动画
Jun 21 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 Javascript
JavaScript cookie原理及使用实例
May 08 #Javascript
JavaScript中的各种宽高属性的实现
May 08 #Javascript
element-ui 实现响应式导航栏的示例代码
May 08 #Javascript
JS控制下拉列表左右选择实例代码
May 08 #Javascript
VSCode搭建React Native环境
May 07 #Javascript
Javascript查看大图功能代码实现
May 07 #Javascript
用VsCode编辑TypeScript的实现方法
May 07 #Javascript
You might like
开发大型PHP项目的方法
2006/10/09 PHP
如何利用php+mysql保存和输出文件
2006/10/09 PHP
PHP 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
thinkphp分页实现效果
2016/10/13 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
jQuery.each()用法分享
2012/07/31 Javascript
JS 页面计时器示例代码
2013/10/28 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
解读Django框架中的低层次缓存API
2015/07/24 Python
python基础while循环及if判断的实例讲解
2017/08/25 Python
解决已经安装requests,却依然提示No module named requests问题
2018/05/18 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
用python实现名片管理系统
2020/06/18 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
《在大海中永生》教学反思
2014/02/24 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
小学生学习保证书
2015/02/26 职场文书
学校计划生育责任书
2015/05/09 职场文书
2015年教师国培感言
2015/08/01 职场文书
Java 数组内置函数toArray详解
2021/06/28 Java/Android