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开发的一个让轻松创建诸如三维视频游戏.建筑可视化.实时三维动画等类型互动内容的多平台的综合型游戏开发工具,是一个全面整合的 ...
随机推荐
- express高效入门教程(4)
4.静态文件 4.1.普通处理静态文件的方法 在./views/index.html文件中去引入另一个css文件index.css,index.css文件放在public/css目录下,目录结构是这样 ...
- js语法基础入门(4)
4.运算符 4.1.什么是运算符? 运算符就是用来表示具体运算规则的符号,例如数学计算中的加减乘除就是具体的运算规则,我们分别用"+ - * /"等符号来表示 4.2.运算符的分类 ...
- 优雅关闭服务下线(Jetty)
在很多时候 kill -9 pid并不是很友好的方法,那样会将我们正在执行请求给断掉,同时eureka 中服务依旧是处于在线状态,这个时候我们可以使用官方提供的actuator来做优雅的关闭处理 - ...
- 每日一题 - 剑指 Offer 47. 礼物的最大价值
题目信息 时间: 2019-07-02 题目链接:Leetcode tag:动态规划 难易程度:中等 题目描述: 在一个 m*n 的棋盘的每一格都放有一个礼物,每个礼物都有一定的价值(价值大于 0). ...
- nodejs gulp如何获取参数
比如执行gulp test 如果需要获取test,使用命令process.argv即可 如果执行gulp test --module aaaa,这句话表示的意思执行gulp test,顺带参数modu ...
- Layui数据表格加入自定义扩展方法(重新渲染Render当前页数据)
具体开发中遇到的问题如下, 数据表格的重新渲染或重新加载会导致当前操作的分页 或 配置被清空.我正在操作第5页,重新渲染后就回到了最原始第1页. 需要达到的效果是: 不调用接口,仅仅只是从table. ...
- 「疫期集训day13」雾天
我们千里迢迢赶来这里支援协约国----与德军正面交锋的美国士兵 今天考试签到题都没A,失误重大,T1几周前做过的拓扑排序板子都没写,T2失误在没敢调试,对自己信心不足,30分钟写了个DP,几分钟没调出 ...
- Java实现上传文件到指定服务器指定目录(ChannelSftp实现文件上传下载)
package com.tianyang.task.utils; import java.io.File;import java.io.FileInputStream;import java.io.I ...
- Vue防止按钮重复提交
参考了:https://www.cnblogs.com/adbg/p/11271237.html 方法:使用全局指令的方式. 一.新建指令 1.我们首先新建一个js文件,例如起名为plugins.js ...
- vue+element-ui JYAdmin后台管理系统模板-集成方案【项目搭建篇2】
项目搭建时间:2020-06-29 本章节:讲述基于vue/cli, 项目的基础搭建. 本主题讲述了: 1.跨域配置 2.axios请求封装 3.eslint配置 4.环境dev,test,pro(开 ...