class初探
我们说类的时候,先回忆一下es5的构造函数
function myobj(x,y){
this.x= x;
this.y =y;
}
myobj.prototype.add = function(){
return this.x+this.y
}
var num = new myobj(10,5);
console.log(num.add()); //
这是构造函数的写法,到了es6出现clss类的写法。下面代码等价于上面的代码
class muobj{
constructor(x,y){
this.x = x;
this.y = y;
}
add(){
return this.x+this.y
}
}
var numb = new myobj(10,5);
console.log(numb.add()); //
在上面的代码中我们可以看到出现了关键字class,它可以和对象模板定义一个类。
可以在上面我们看到了一个 constructor 它是es6的构造方法,而this指向实例的对象。
constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。
也就是说es6的构造方法对应es5构造函数
class定义的类,里的方法都是直接定义在原型上的。
class b{
s(){}
d(){}
}
// 等价于
function b(){}
b.prototype = {
s(){},
d(){}
}
而且class定义的类都是是不能枚举的。
属性表达式的写法
let myname = "getdata";
class stk {
constructor(x){
this.x =x;
}
[myname](){
return this.x
}
}
var stkn = new stk("好");
console.log(stkn.getdata()); //好
上面我们定义一个变量,并且赋值“getdata”,在书写类的时候使用 [myname] 表达式。
我们使用的时候,使用的是getdata,并不是myname了。
class表达式的写法
//class 表达式
const myc = class me{
constructor(x){
this.x =x
}
} let hu = new myc('李四');
console.log(hu.x); //李四
采用 Class 表达式,可以写出立即执行的 Class。
name属性
name属性用于获得class类名
class Point {}
Point.name // "Point"
Generator 方法
如果某个方法之前加上星号(*),就表示该方法是一个 Generator 函数。
class Foo {
constructor(...args) {
this.args = args;
}
* [Symbol.iterator]() {
for (let arg of this.args) {
yield arg;
}
}
}
for (let x of new Foo('hello', 'world')) {
console.log(x);
}
// hello
// world
this指向问题
在使用的过程中可能会存出现 TypeError: Cannot read property 'XXXX' of undefined
很可能是this的指向问题。
建议的写法就是使用箭头函数
先暂停一下。我去回头补上
原文地址:https://es6.ruanyifeng.com/#docs/class
class初探的更多相关文章
- 初探领域驱动设计(2)Repository在DDD中的应用
概述 上一篇我们算是粗略的介绍了一下DDD,我们提到了实体.值类型和领域服务,也稍微讲到了DDD中的分层结构.但这只能算是一个很简单的介绍,并且我们在上篇的末尾还留下了一些问题,其中大家讨论比较多的, ...
- CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探
CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码 ...
- 从273二手车的M站点初探js模块化编程
前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...
- JavaScript学习(一) —— 环境搭建与JavaScript初探
1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...
- .NET文件并发与RabbitMQ(初探RabbitMQ)
本文版权归博客园和作者吴双本人共同所有.欢迎转载,转载和爬虫请注明原文地址:http://www.cnblogs.com/tdws/p/5860668.html 想必MQ这两个字母对于各位前辈们和老司 ...
- React Native初探
前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...
- 【手把手教你全文检索】Apache Lucene初探
PS: 苦学一周全文检索,由原来的搜索小白,到初次涉猎,感觉每门技术都博大精深,其中精髓亦是不可一日而语.那小博猪就简单介绍一下这一周的学习历程,仅供各位程序猿们参考,这其中不涉及任何私密话题,因此也 ...
- Key/Value之王Memcached初探:三、Memcached解决Session的分布式存储场景的应用
一.高可用的Session服务器场景简介 1.1 应用服务器的无状态特性 应用层服务器(这里一般指Web服务器)处理网站应用的业务逻辑,应用的一个最显著的特点是:应用的无状态性. PS:提到无状态特性 ...
- NoSQL初探之人人都爱Redis:(3)使用Redis作为消息队列服务场景应用案例
一.消息队列场景简介 “消息”是在两台计算机间传送的数据单位.消息可以非常简单,例如只包含文本字符串:也可以更复杂,可能包含嵌入对象.消息被发送到队列中,“消息队列”是在消息的传输过程中保存消息的容器 ...
- Unity3D游戏开发初探—1.跨平台的游戏引擎让.NET程序员新生
一.Unity3D平台简介 Unity是由Unity Technologies开发的一个让轻松创建诸如三维视频游戏.建筑可视化.实时三维动画等类型互动内容的多平台的综合型游戏开发工具,是一个全面整合的 ...
随机推荐
- 一条SQL删除重复记录,重复的只保留一条
情景: 我们的数据库中可能会存在很多因各种原因而重复的记录,我们需要对这些重复的记录进行删除,每组组重复的记录只保留一条就行 例如我们有这么个表:两个框框都是有重复记录的,红框和绿框都只需要留下一条, ...
- 《Java并发编程之美》
简介 码云笔记 java-concurrent/TheBeautyOfConcurrentProgram
- nginx 代理post请求做负载均衡
项目中遇到nginx代理post请求nodejs服务.但是一直404.发现好像是nginx重定向的时候将post请求变成了get请求.上配置: # 负载均衡服务器配置 upstream pdf_ups ...
- 解决SELinux阻止Nginx访问服务
在使用 yum 安装 nginx 后可能会出现配置完成后却无法访问的问题,查看 audit.log 会发现类似于以下的错误信息 出现此问题的原因是 SELinux 基于最小权限原则默认拦截了 Ngin ...
- apache frpClien操作报错解决
#打开配置文件vim /etc/vsftpd/vsftpd.conf #修改配置100行chroot_local_user=NO
- mdcChipSet中mdcChip事件selectedChange
项目中遇到一个问题,由于每个mdcChip上都有一个change事件,所以想在change事件中操作执行最新被选中的item时,就会遇到一些麻烦. 如何解决呢? 全局设置一个变量,例如:mark 然后 ...
- 联通BSS-ESS-CBSS系统安装相关
前言 1. 版本信息 版本 日期 记录 1.0 2016.08.15 初始版本 2. 作者信息 信息 内容 部门 夷陵区分公司 作者 Z.J.T 邮箱 coralfoxzjt@163.com 必须操作 ...
- JS的一些知识点
1.介绍一下js的数据类型有哪些,值是如何存储的 JavaScript一共有8种数据类型,其中有7种基本数据类型:Undefined.Null.Boolean.Number.String.Symbol ...
- css制作简单loading动画效果【css3 loading加载动画】
曾经以为,loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用“障眼法”做出来.比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止图像,然后让它旋转就 ...
- css实现自适应正方形的多种方法实现
方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的长度单位vw.vh.vmin.vmax.其中vw是相对于视口宽度百分比的单位,1vw = 1% viewport width, ...