ES6精讲 - 类Class基础

es5中创建构造函数和实例

原来在es5中的写法

定义好Point后,在原型对象上定义getPostion的方法

实例自身是没有这个方法的,我们调用的时候会去创建他的构造函数上原型上往上寻找

输出的结果

调用getPosition方法

es6中

有了类的概念用class去定义一个类。

constructor是构造函数,this指向创建的实例。每个类的定义必须有constructor方法,若果你在定义类的时候没有写构造函数,它也会默认加上一个空的

getPosition方法是创建在Point的原型对象上的

多个方法之间可以用分号隔开,切记不要用逗号

也可以自己去返回一个对象

自己定义了return的返回,那么创建的实例就不在是你的实例了。这里我们使用instanceof来监测一下。返回的是false。我们创建的结果并不是你的类的实例的对象

es6中的类必须使用new 关键字去创建

生成的实例上添加属性或者方法

判断是否是实例上自身有的属性,返回的结果是true说明自身就有这个属性

方法不是自有属性

getPostion实际上是p1继承来的

取值函数,存值函数

es6中加入了set和get关键字,来看下他们是怎么使用的

设置为19

看完这个例子大概就知道set和get大概是干嘛的。把一个属性age拆开成两个存取值函数。

当我们去读取属性值的时候,就会调用get修饰的方法。

当我们给这个属性赋值的时候就会调用set修饰的方法,set修饰的方法有个参数newValue 就是新赋的值

在es6中类也可以使用set和set修饰

访问属性值

class表达式

函数有两种定义形式

class也有两种形式的定义:

第一种

第二种方式

最后实际的类型是Infos

静态方法

直接定义在类里面的方法都会被实例继承,如果不希望实例继承某个方法,只想这个方法被类本身调用的时候,就需要将方法标记为静态方法

使用static关键字来标识一个静态方法

每个类里面都有一个name属性

es5里面定义一个函数,打印出函数的name

只能Point自己调用。这就是静态方法的定义

实例属性的其他写法

这里定义的类,要添加到类上的属性都是通过this来添加

另外一种写法在 constructor的外面,并且给了z的初始值为0。这里因为没有安装es的loader所以只能在浏览器里面执行

静态属性

es6中只有静态方法,并没有静态属性

通过这种形式可以实现静态属性

私有方法

目前es6并不提供私有方法私有属性,需要使用一些技巧来实现

把方法定义在外面

通过实例是没有办法拿到func2的

第三中方用到es6中新增的基本数据类型symbol,唯一性,独一无二的

这里的p是没有办法拿到func1方法的

创建a.js

如果想调用必须拿到symbol值才可以调用,这就是通过symbol值定义私有方法

私有属性

就是属性前面加#号,处于提案阶段,暂时还没法使用

new.target

es6中新增的,一般用于构造函数中,返回new命令作用于的构造函数

new.target就表示构造函数

普通的调用方式

同样在类中也可以使用new.target

定义父类,子类继承父类

虽然是在父类中使用的new.target.这里的原因下节课学习了继承就清楚了

利用这个特点,我们就可以实现,定义一个类,这个类不能直接用来创建实例,只能通过继承它的子类来实例化

父类就会有异常

TypeScript完全解读(26课时)_7.ES6精讲 - 类Class基础的更多相关文章

  1. TypeScript完全解读(26课时)_8.ES6精讲-ES6中的类(进阶)

    8.TypeScript完全解读-ES6精讲-类(进阶) 在index.ts内引入 Food创建的实例赋值给Vegetabled这个原型对象,这样使用Vegetables创建实例的时候,就能继承到Fo ...

  2. TypeScript完全解读(26课时)_14.ES6和Nodejs中的模块

    创建modules文件夹,我们的文件都写在这里面 modules下面新建index.js文件,在index.ts内引入这个js文件 es6的模块 最主要的两个关键字 import和export imp ...

  3. TypeScript完全解读(26课时)_汇总贴

    ECMAScript 6 入门:http://es6.ruanyifeng.com/ 官网:http://www.typescriptlang.org/ 中文网:https://www.tslang. ...

  4. TypeScript完全解读(26课时)_12.TypeScript完全解读-高级类型(1)

    12.TypeScript完全解读-高级类型(1) 高级类型中文网的地址:https://typescript.bootcss.com/advanced-types.html 创建新的测试文件 ind ...

  5. TypeScript完全解读(26课时)_2.TypeScript完全解读-基础类型

    2.TypeScript完全解读-基础类型 src下新建example文件夹并新建文件.basic-type.ts.截图中单词拼错了.后需注意一下是basic-type.ts 可以装tslint的插件 ...

  6. TypeScript完全解读(26课时)_4.TypeScript完全解读-接口

    4.TypeScript完全解读-接口 初始化tslint tslint --init:初始化完成后会生成tslint.json的文件 如果我们涉及到一些规则都会在这个rules里面进行配置 安装ts ...

  7. TypeScript完全解读(26课时)_5.TypeScript完全解读-函数

    5.TypeScript完全解读-函数 新建function.ts.然后在index.ts内引用 给函数定义参数类型:上面是es5的写法 下面是ts6的写法 一个完整的函数类型.括号 箭头 numbe ...

  8. TypeScript完全解读(26课时)_9.TypeScript完全解读-TS中的类

    9.TypeScript完全解读-TS中的类 创建class.ts文件,并在index.ts内引用 创建一个类,这个类在创建好后有好几个地方都标红了 这是tslint的一些验证规则 一保存就会自动修复 ...

  9. TypeScript完全解读(26课时)_1.TypeScript完全解读-开发环境搭建

    1.TypeScript完全解读-开发环境搭建 初始化项目 手动创建文件夹 D:\MyDemos\tsDemo\client-demo 用VSCode打开 npm init:初始化项目 然后我们的项目 ...

随机推荐

  1. WPF03(样式)

    说起样式,大家第一反应肯定是css,好的,先上一段代码. 1 html{border:0;} 2 ul,form{margin:0; padding:0} 3 body,div,th,td,li,dd ...

  2. qt的下载链接

    http://download.qt.io/archive/qt/5.8/5.8.0/ http://download.qt.io/archive/qt/ http://download.qt.io ...

  3. oracle sql修改序列为当前序列开始

    declare   v_num integer;  last_value integer;Begin  select SEQ_TBM_ID.NEXTVAL into last_value from d ...

  4. NFC 标签类型

    NFC 标签类型 Type 1:Type 1 Tag is based on ISO/IEC 14443A. This tag type is read and re-write capable. T ...

  5. Memcached服务端自动启动(转载)

    Memcached服务端自动启动 原文链接:http://www.cnblogs.com/technet/archive/2011/09/11/2173485.html  经测试,要使得Memcach ...

  6. android studio 程序真机执行中文显示乱码

    代码里中文显示正常,真机执行后中文显示乱码,解决的方法: build.gradle中加入一句 android { compileOptions.encoding = "GBK" }

  7. 开源流媒体服务器EasyDarwin支持epoll网络模型,大大提升流媒体服务器网络并发性能

    经过春节前后将近2个月的开发和稳定调试.测试,EasyDarwin开源流媒体服务器终于成功将底层select网络模型修改优化成epoll网络模型,将EasyDarwin流媒体服务器在网络处理的效率上提 ...

  8. 对于atomic nonatomic assign retain copy strong weak的简单理解

    atomic和nonatomic用来决定编译器生成的getter和setter是否为原子操作 1)atomic 设置成员变量的@property属性时,atomic是默认值,提供多线程安全 在多线程环 ...

  9. php设计模式之单例模式实例(设计mysqli连接数据的数据处理类)

    一直在研究php的设计模式,但是没有亲历使用过,所以还是一知半解,通过几天的学习终于对php的单例设计模式稍稍的有些了解,特此写出一个数据库处理类(只涉及到简单的原理),以便自己以后方便查阅,至于其他 ...

  10. NOIP2010_T4_引水入城 bfs+贪心

    在一个遥远的国度,一侧是风景秀美的湖泊,另一侧则是漫无边际的沙漠.该国的行政区划十分特殊,刚好构成一个 N 行 M 列的矩形,如上图所示,其中每个格子都代表一座城 市,每座城市都有一个海拔高度.为了使 ...