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 相关文章推荐
javascript编程起步(第一课)
Jan 10 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 Javascript
jQuery中scrollLeft()方法用法实例
Jan 16 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
《APMServ 5.1.2》使用图解
2006/10/23 PHP
php部分常见问题总结
2008/03/27 PHP
PHP 面向对象实现代码
2009/11/11 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
thinkPHP查询方式小结
2016/01/09 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
python使用正则表达式提取网页URL的方法
2015/05/26 Python
Python实现合并字典的方法
2015/07/07 Python
python实现人脸识别代码
2017/11/08 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
django如何实现视图重定向
2019/07/24 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
怒海潜将观后感
2015/06/11 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
python状态机transitions库详解
2021/06/02 Python
python字符串的一些常见实用操作
2022/04/06 Python
python中redis包操作数据库的教程
2022/04/19 Python