ES6 学习 -- Class
Class的基本语法
(1)// 定义类
class Point {
test() {
console.log("hello test");
}
}
通过 new 定义好的类即可生成一个类的实例对象
let point = new Point();
point.test(); // 打印 “hello test”
(2)类下面的所有方法,其实是定义在类的prototype(原型)属性上面,如下
class Point {
test(){...}
hehe(){...}
heihei(){...}
}
// 等同于
Point.prototype = {
test(){...}
hehe(){...}
heihei(){...}
}
(3)实例对象的constructor方法指向类的原型对象的constructor,即pointer.constructor === Pointer.prototype.constructor
(4)由于类的方法都是定义在prototype上的,所有类的新方法的添加可以通过Object.assigin()方法一次添加多个方法
Object.assign(Pointer.prototype, {
huhu(){},
wawa(){}
})
(5)类实例生成,也必须像ES5那样,通过new 关键字来生成,否则报错,与ES5一样,实例的属性除非显示的定义在其本身(即定义在this对象上),否则是定义在原型上(即定义在class上)
(6)this的指向
类的方法内如果含有this,它默认指向类的实例对象,而在class中定义的方法test,test内部的this指向Class本身,如果直接使用这个方法,报错not found test,如下:
class Logger {
printName(){
this.print("jack");
}
print(name) {
console.log(name);
}
}
const logger = new Logger();
const {printName} = logger;
printName(); // TypeError: Cannot read property 'print' of undefined
/* 此时的this指向printName方法运行的所在环境(运行环境已经不在Logger的作用域内了,故找不到print方法), */
解决方法:在类的构造函数中绑定this
class Logger {
constructor(){
this.printName = this.printName.bind(this); // 此时无论在哪里调用printName,this都指向Class
}
printName(){
this.print("jack");
}
print(){...}
}
(7)Class的静态方法
类相当于实例的原型,所有定义在类中的方法,都会被实例继承,如果在一个方法前面添加static关键字,那么这个方法不会被实例所继承,只能通过类类调用,如下
class Foo {
static say() {
return "rose";
}
}
let foo = new Foo();
foo.say(); // TypeError: foo.say is not a function
Foo.say(); // "rose",
***类下面的方法前面如果有关键字static的,不会被实例对象继承,只能通过类本身来调用
(8)new.target
Class内部使用new.target返回当前Class,如果当前类有子类,new.target返回子类
ES6 学习 -- Class的更多相关文章
- ES6学习目录
前面的话 ES6是JavaScript语言的下一代标准,已经在 2015 年 6 月正式发布.它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言 为什么要学 ...
- es6学习笔记-class之继承
继承 上一篇学习了class的概念,在es5时,对象的继承有好几种,原型链继承,借用构造函数继承,组合继承,原型式继承,寄生式继承以及寄生组合式继承,都是按照函数的形式去集成的,现在class也有它的 ...
- es6学习笔记-class之一概念
前段时间复习了面向对象这一部分,其中提到在es6之前,Javasript是没有类的概念的,只从es6之后出现了类的概念和继承.于是乎,花时间学习一下class. 简介 JavaScript 语言中,生 ...
- javascript的ES6学习总结(第二部分)
1.数组循环 介绍数组循环之前,先回顾一下ES5数组的循环 (1)数组遍历(代替普通的for):arr.forEach(callback(val,index,arr){todo}) //val是数组的 ...
- javascript的ES6学习总结(第一部分)
ES6(ESNext学习总结——第一部分) ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版. ECMA每年6月份,发布一个版本 201 ...
- ES6学习笔记<五> Module的操作——import、export、as
import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...
- ES6学习笔记<四> default、rest、Multi-line Strings
default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...
- ES6学习笔记<三> 生成器函数与yield
为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...
- ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
- ES6学习笔记<一> let const class extends super
学习参考地址1 学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...
随机推荐
- windows每天定时执行脚本
windows每天定时执行脚本 这里说的定时器就是Windows下的任务计划,当时遇到的坑正好总结一下,因为Windows10的定时器去执行脚本当时试了好多遍,都是没有成功,后来通过自己的观察发现是 ...
- Openstack组件部署 — Nova overview
目录 目录 前文列表 前言 Compute service overview Nova 的组件 nova-api service nova-api-metadata service nova-comp ...
- JAVA学习之数组
一.数组定义同一种类型数据的集合,其实数组就是一个容器数组定义格式:1.数据类型[] 变量名 = new 数据类型[数组长度] int[] arr = new int[5]; 2.数据类型[] 数组名 ...
- JWT(JSON Web Token) 多网站的单点登录,放弃session 转载https://www.cnblogs.com/lexiaofei/p/7409846.html
多个网站之间的登录信息共享, 一种解决方案是基于cookie - session的登录认证方式,这种方式跨域比较复杂. 另一种替代方案是采用基于算法的认证方式, JWT(json web token) ...
- 16. Jmeter-监听器
jmeter-监听器介绍与使用 察看结果树 Summary Report 聚合报告 Backend Listener Aggregate Graph 断言结果 Comparison Assertion ...
- Codeforces 1169A Circle Metro
题目链接:codeforces.com/contest/1169/problem/A 题意:有俩个地铁,一个从 1 → 2 → …→ n → 1→ 2 →…, 一个 从 n → n-1 →…→ 1 → ...
- Java DOM解析器
文档对象模型是万维网联盟(W3C)的官方推荐.它定义了一个接口,使程序能够访问和更新样式,结构和XML文档的内容.支持DOM实现该接口的XML解析器. 何时使用? 在以下几种情况时,应该使用DOM解析 ...
- ArrayList、Vector、LinkedList的区别
ArrayList.Vector.LinkedList的区别 1.底层数据结构: ArrayList底层实现是动态数组 Vector底层实现是动态数组 LinkedList底层实现是双链表 2.扩容 ...
- layui 封装自定义模块
转自:https://lianghongbo.cn/blog/430585105a35948c layui是国人开发的一款非常简洁的UI框架,使用了模块化加载方式,因此在使用过程中我们难免需要添加自己 ...
- NetCore2.2使用Nlog自定义日志写入路径配置方式
在一些特定场景的业务需求下,日志需要写入到不同的路径下提供日志分析.第一种:默认Nlog可以通过日志级别来区分路径,——优点是不需要额外配置,开箱即用——缺点是不够灵活,如果超过级别数量,则不满足需求 ...