es6之class 基本用法解析

原创 Fly丶 教程 前端 17阅读 4 天前 举报

javaScript 语言中,生成实例对象的传统方法是通过构造函数,与传统的面向对象语言(比如 C++ 和 Java)差异很大,ES6 提供了更接近传统语言的写法,引入了 class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。

es6 class 与es5的面向对象的区别:

  1. 写法不同,使用关键字class

    2.当new一个实例,默认有一个constructor方法,且默认返回实例对象(this),也可以返回另一对象

    3.类的所有方法都在prototype属性上,但是不可枚举,且每方法结束不能使用分号

    4.类的调用必须通过new 一个实例,且类的内部默认使用严格模式

    5.不存在变量提升,必须先声明,再调用

    6.class的this 默认指向当前类

    7.class 的静态方法,使用关键字static,不需new,直接通过类来调用

  2. 实例属性和静态属性的写法,实例属性在类的内部直接使用等式(=)写法,也可以写在constructor 方法里,静态属性只需在实例属性前加一个关键字static即可

9.类的继承使用关键字extends,继承机制与es5完全不同,

  es5的继承原理:先new子类的实例对象this,再通过将父类的方法和属性添加到子类的this上(parents.call(this))。

  Es6的继承原理:先创造父类的实例对象this,所以要构造函数constructor()访问父类的属性使用this,必须先调用super()方法;再通过子类的constructor()来修改this

10.类的继承可以继承原生的构造函数,es5不可以

  1. 一般写法(es5 与es6)

前端全栈学习交流圈:866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈,提升思维能力,群内有大量PDF可供自取,更有干货实战项目视频进群免费领取。

ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到

注意 :class 类的本质还是一个函数,类本身就指向构造函数。

我们使用Object的一些属性或者方法检测一下 用es6 写的实例对象

2.表达式写法

3.class的私有方法(ES6不提供写法)和私有属性(也不提供写法,提案用#识别)

  所谓私有方法和私有属性,是指只能在类的内部使用,不能在类外部调用

4.ES6规定Class类没有静态属性,只有静态方法:static

 所谓静态,不需要实例化对象,直接调用

5.new.target属性

new是在构造函数生成实例的命令,ES6为new提供了一个属性.target,

返回通过new 命令实例对象的class(构造函数),一般用于类的内部

前端全栈学习交流圈:866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈,提升思维能力,群内有大量PDF可供自取,更有干货实战项目视频进群免费领取。

6.this指向

类的方法内部如果含有this,它默认指向类的实例。但是,必须非常小心,一旦单独使用该方法,很可能报错

如下示例

分析以上示例:prinName 的方法中this,默认指向 类Logger,但是将改方法单独调用,就会报错,this会指向所在运行的环境,所以因为找不到this.print()方法而报错。

针对以上解决this指向的方法:

(1). 使用bind(this)

(2). 使用es6 的箭头函数 ()=>{}

(3).使用Proxy 代理

7.class 的get() 和set() 方法

与 ES5 一样,在“类”的内部可以使用get和set关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为。

前端全栈学习交流圈:866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈,提升思维能力,群内有大量PDF可供自取,更有干货实战项目视频进群免费领取。

8.继承

Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。

8.1:super关键字:在子类中不同情况用法不同,既可以当作函数使用,也可以当作对象使用。

(1):super作为函数,只能在constructor中使用:代表父类,返回子类的this

(2):super作为对象,在普通函数中,cuper指向父类的原型对象,可以访问原型对象的属性和方法,注意,父类的实例的属性和方法是访问不了的

(3):super作为对象,在静态方法中,cuper指向的是父类,不是父类的原型对象

示例分析如下:

8.2.原生构造函数的继承,ES5不支持,ES6利用extend可以继承原生构造函数

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复