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 相关文章推荐
JS获取父节点方法
Aug 20 Javascript
表单JS弹出填写提示效果代码
Apr 16 Javascript
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 Javascript
JQuery学习总结【二】
Dec 01 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
vue视频播放暂停代码
Nov 08 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
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
PHP修改session_id示例代码
2014/01/08 PHP
PHP5.3新特性小结
2016/02/14 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
Django分页功能的实现代码详解
2019/07/29 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
学院书画协会部门岗位职责
2013/12/01 职场文书
军训的自我鉴定
2013/12/10 职场文书
指导教师评语
2014/04/26 职场文书
课外活动总结范文
2014/07/09 职场文书
交通安全责任书范本
2014/07/24 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
党课主持词大全
2015/06/30 职场文书
离婚协议书格式范本
2016/03/18 职场文书
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android
Python实现为PDF去除水印的示例代码
2022/04/03 Python