我们说类的时候,先回忆一下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初探的更多相关文章

  1. 初探领域驱动设计(2)Repository在DDD中的应用

    概述 上一篇我们算是粗略的介绍了一下DDD,我们提到了实体.值类型和领域服务,也稍微讲到了DDD中的分层结构.但这只能算是一个很简单的介绍,并且我们在上篇的末尾还留下了一些问题,其中大家讨论比较多的, ...

  2. CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探

    CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码 ...

  3. 从273二手车的M站点初探js模块化编程

    前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...

  4. JavaScript学习(一) —— 环境搭建与JavaScript初探

    1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...

  5. .NET文件并发与RabbitMQ(初探RabbitMQ)

    本文版权归博客园和作者吴双本人共同所有.欢迎转载,转载和爬虫请注明原文地址:http://www.cnblogs.com/tdws/p/5860668.html 想必MQ这两个字母对于各位前辈们和老司 ...

  6. React Native初探

    前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...

  7. 【手把手教你全文检索】Apache Lucene初探

    PS: 苦学一周全文检索,由原来的搜索小白,到初次涉猎,感觉每门技术都博大精深,其中精髓亦是不可一日而语.那小博猪就简单介绍一下这一周的学习历程,仅供各位程序猿们参考,这其中不涉及任何私密话题,因此也 ...

  8. Key/Value之王Memcached初探:三、Memcached解决Session的分布式存储场景的应用

    一.高可用的Session服务器场景简介 1.1 应用服务器的无状态特性 应用层服务器(这里一般指Web服务器)处理网站应用的业务逻辑,应用的一个最显著的特点是:应用的无状态性. PS:提到无状态特性 ...

  9. NoSQL初探之人人都爱Redis:(3)使用Redis作为消息队列服务场景应用案例

    一.消息队列场景简介 “消息”是在两台计算机间传送的数据单位.消息可以非常简单,例如只包含文本字符串:也可以更复杂,可能包含嵌入对象.消息被发送到队列中,“消息队列”是在消息的传输过程中保存消息的容器 ...

  10. Unity3D游戏开发初探—1.跨平台的游戏引擎让.NET程序员新生

    一.Unity3D平台简介 Unity是由Unity Technologies开发的一个让轻松创建诸如三维视频游戏.建筑可视化.实时三维动画等类型互动内容的多平台的综合型游戏开发工具,是一个全面整合的 ...

随机推荐

  1. express高效入门教程(4)

    4.静态文件 4.1.普通处理静态文件的方法 在./views/index.html文件中去引入另一个css文件index.css,index.css文件放在public/css目录下,目录结构是这样 ...

  2. js语法基础入门(4)

    4.运算符 4.1.什么是运算符? 运算符就是用来表示具体运算规则的符号,例如数学计算中的加减乘除就是具体的运算规则,我们分别用"+ - * /"等符号来表示 4.2.运算符的分类 ...

  3. 优雅关闭服务下线(Jetty)

    在很多时候 kill -9 pid并不是很友好的方法,那样会将我们正在执行请求给断掉,同时eureka 中服务依旧是处于在线状态,这个时候我们可以使用官方提供的actuator来做优雅的关闭处理 - ...

  4. 每日一题 - 剑指 Offer 47. 礼物的最大价值

    题目信息 时间: 2019-07-02 题目链接:Leetcode tag:动态规划 难易程度:中等 题目描述: 在一个 m*n 的棋盘的每一格都放有一个礼物,每个礼物都有一定的价值(价值大于 0). ...

  5. nodejs gulp如何获取参数

    比如执行gulp test 如果需要获取test,使用命令process.argv即可 如果执行gulp test --module aaaa,这句话表示的意思执行gulp test,顺带参数modu ...

  6. Layui数据表格加入自定义扩展方法(重新渲染Render当前页数据)

    具体开发中遇到的问题如下, 数据表格的重新渲染或重新加载会导致当前操作的分页 或 配置被清空.我正在操作第5页,重新渲染后就回到了最原始第1页. 需要达到的效果是: 不调用接口,仅仅只是从table. ...

  7. 「疫期集训day13」雾天

    我们千里迢迢赶来这里支援协约国----与德军正面交锋的美国士兵 今天考试签到题都没A,失误重大,T1几周前做过的拓扑排序板子都没写,T2失误在没敢调试,对自己信心不足,30分钟写了个DP,几分钟没调出 ...

  8. Java实现上传文件到指定服务器指定目录(ChannelSftp实现文件上传下载)

    package com.tianyang.task.utils; import java.io.File;import java.io.FileInputStream;import java.io.I ...

  9. Vue防止按钮重复提交

    参考了:https://www.cnblogs.com/adbg/p/11271237.html 方法:使用全局指令的方式. 一.新建指令 1.我们首先新建一个js文件,例如起名为plugins.js ...

  10. vue+element-ui JYAdmin后台管理系统模板-集成方案【项目搭建篇2】

    项目搭建时间:2020-06-29 本章节:讲述基于vue/cli, 项目的基础搭建. 本主题讲述了: 1.跨域配置 2.axios请求封装 3.eslint配置 4.环境dev,test,pro(开 ...