ES6学习-Class类

class

constructor 构造方法

this 代表实例对象

方法之间不需要逗号分隔,加了会报错。

typeof Point // "function"
Point === Point.prototype.constructor // true

类的数据类型就是函数,类本身就指向构造函数。

类的所有方法都定义在类的prototype属性上面

类的内部所有定义的方法,都是不可枚举的(non-enumerable)

ES6类内部定义的方法不可枚举;ES5可以

# es5
console.log(Object.getPrototypeOf(a));//['es5method']
#es6
console.log(Object.getPrototypeOf(a));//[]
point.hasOwnProperty('toString') // false

constructor方法

类的默认方法

通过 new 命令生成对象实例时,自定调用该方法。

没有显式定义的话,会默认添加

constructor 方法默认返回实例对象(即this)

实例的属性除非显式定义在其本身(即定义在this对象上),否则都是定义在原型上

类必须使用new调用,否则会报错。

类的所有实例共享一个原型对象

取值函数(getter)和存值函数(setter)

class Point{get prop() { return 'getter'; }set prop(value) { console.log('setter: '+value); }
}

注意点

严格模式

类和模块的内部,默认就是严格模式,所以不需要使用use strict指定运行模式。

不存在提升

类不存在变量提升(hoist)

这种规定的原因与下文要提到的继承有关,必须保证子类在父类之后定义。

Class 表达式

let Poin = class Point {getName() {console.log(Point.name, 'name')}
}
let point = new Poin()
point.getName() // Point
console.log(Poin.name, 'Poin.name');//Point
console.log(Point1.name, 'Poin.name');//Point is not defined

Point只在 Class 的内部可用,指代当前类。在 Class 外部,这个类只能用Poin引用。

this 的指向

类的方法内部如果含有this,它默认指向类的实例。

但是,如果将这个方法提取出来单独使用,this会指向该方法运行时所在的环境

箭头函数内部的this总是指向定义时所在的对象。

静态方法

static关键字,不会被实例继承,而是直接通过类来调用

如果静态方法包含this关键字,这个this指的是类,而不是实例。

静态方法可以与非静态方法重名。

父类的静态方法,可以被子类继承。

静态方法也是可以从super对象上调用的。

实例属性的新写法

class Point {name;constructor() {/**/}
}

静态属性

class Foo {}
Foo.prop = 1 # 或者class Foo {prop = 1;
}

私有方法和私有属性

只能在类的内部访问的方法和属性,外部不能访问。有利于代码的封装

在属性名之前,使用#表示

class Foo {#count = 0
}

只能在类的内部使用(this.#count)。如果在类的外部使用,就会报错

私有属性也可以设置 getter 和 setter 方法。

new.target 属性

该属性一般用在构造函数之中

返回new命令作用于的那个构造函数。如果构造函数不是通过new命令或Reflect.construct()调用的,new.target会返回undefined,因此这个属性可以用来确定构造函数是怎么调用的。

function Person(name) {if (new.target !== undefined) {this.name = name;} else {throw new Error('必须使用 new 命令生成实例');}
}
var person = new Person('张三'); // 正确
var notAPerson = Person.call(person, '张三');  // 报错

Class 内部调用new.target,返回当前 Class。

子类继承父类时,new.target会返回子类。

class Fu {constructor() {console.log( new.target) //Son}
}
class Son extends Fu {constructor () {super()}
}

Class 继承

通过extends关键字实现继承

super关键字:表示父类的构造函数,用来新建父类的this对象。

子类必须在constructor方法中调用super方法,否则新建实例时会报错。

这是因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,加上子类自己的实例属性和方法。如果不调用super方法,子类就得不到this对象。

子类的构造函数中,只有调用super之后,才可以使用this关键字,否则会报错。这是因为子类实例的构建,基于父类实例,只有super方法才能调用父类实例。

class Son extends Fu {constructor() {this.color = color // ReferenceErrorsuper(x,y)}
}

父类的静态方法,也会被子类继承。

Object.getPrototypeOf()

父类的静态方法,也会被子类继承。

Object.getPrototypeOf(ColorPoint) === Point
// true

super关键字

既可以当作函数使用,也可以当作对象使用。

作为函数调用时

作为函数调用时代表父类的构造函数,super内部的this指的是B的实例

只能用在子类的构造函数之中,用在其他地方就会报错。

class A {}
class B extends A {m() {super(); // 报错}
}

作为对象时

在普通方法中,指向父类的原型对象;在静态方法中,指向父类
如果通过super对某个属性赋值,这时super就是this,赋值的属性会变成子类实例的属性。

class A {constructor() {this.p = 2}say() {console.log('say', p)}
}
A.prototype.name = "Ren"
class B {constructor() {super()this.p = 99console.log(super.x) //undefinedsuper.say() //99console.log(super.name) //Renthis.b = 1super.b = 2console.log(super.b)//undefinedconsole.log(this.b)//2}
}

获取属性 p 失败

获取方法 say 成功

获取属性 name 成功

注意:super.say()虽然调用的是 A.prototype.say(),但A.prototype()内部的this指向B所以输出的是 99

由于this指向子类实例,所以如果通过super对某个属性赋值,这时super就是this

如果super作为对象,用在静态方法之中,这时super将指向父类,而不是父类的原型对象。

class Point {static age = 18;name = 19static say() {console.log(this.age, 'age')//18	console.log(this.name, 'name')//undefined}
}
class Son extends Point {static say() {super.say()}
}
Son.say()

在子类的静态方法中通过super调用父类的方法时,方法内部的this指向当前的子类,而不是子类的实例。

类的 Prototype 和 __proto__属性

Class 作为构造函数的语法糖,同时有prototype属性和__proto__属性,因此同时存在两条继承链。

(1)子类的__proto__属性,表示构造函数的继承,总是指向父类。

(2)子类prototype属性的__proto__属性,表示方法的继承,总是指向父类的prototype属性。

这两条继承链,可以这样理解:作为一个对象,子类(B)的原型(__proto__属性)是父类(A);作为一个构造函数,子类(B)的原型对象(prototype属性)是父类的原型对象(prototype属性)的实例。

class A {}
class B {}
Object.setPrototypeOf(B.prototype, A.prototype)// B 继承 A 的静态属性
Object.setPrototypeOf(B, A)// B 继承 A 的静态属性
const b = new B()

Object.setPrototypeOf方法的实现。

Object.setPrototypeOf = function (obj, proto) {obj.__proto__ protoreturn obj
}

原生构造函数的继承

没看

Mixin 模式的实现

没看

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/28252.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VMware16.2.5版本虚拟机克隆服务步骤(图解版)

目录 一、VMware16.2.5版本虚拟机克隆服务具体步骤二、VMware16.2.5版本虚拟机克隆服务后如何配置静态ip 一、VMware16.2.5版本虚拟机克隆服务具体步骤 1.1、先停止需要克隆的服务,选中需要克隆的服务——>鼠标右键选择【电源】——>【关闭客户机】&#xff…

【Linux升级之路】5_基础IO

🌟hello,各位读者大大们你们好呀🌟 🍭🍭系列专栏:【Linux升级之路】 ✒️✒️本篇内容:文件操作,文件管理,重定向,简易shell添加重定向功能,文件属…

骑士牛(BFS)

题面 john用他的一头母牛和Don先生交换了一头“骑士牛”。这头牛有一个独特的能力——在牧场中能像中国象棋中的马一样跑跳(会中国象棋吗?不会?注意:本题不考虑马被“蹩脚”的情况)。 当然,这头牛不能跳到岩…

python接口自动化之正则用例参数化

前言 ​ 我们在做接口自动化的时候,处理接口依赖的相关数据时,通常会使用正则表达式来进行提取相关的数据。 ​ 正则表达式,又称正规表示式、正规表示法、正规表达式、规则表达式、常规表示法(Regular Expression,在代码中常简写…

【搜索框的匹配功能】

功能需求: 1. 输入关键字的同时,以下拉列表的形式显示匹配的内容; 2. 点击下拉列表的选项,跳转到对应的新的页面 注意:这里读取data.txt(检索的文件对象),会存在跨域的问题&#x…

ImportError: No module named pkg_resources

ImportError: No module named pkg_resources 当使用 pip 命令时,如果出现 ImportError: No module named pkg_resources 错误,通常表示你的 Python 环境中缺少了 setuptools 模块或该模块损坏。 解决此问题的一种方法是重新安装或升级 setuptools 模块…

瞅一眼nginx

目录 🦬什么是nginx? 🦬nginx配置官方yum源: 🦬nginx优点 🦬nginx 缺点 🦬查看nginx默认模块 🐌nginx新版本的配置文件: 🐌nginx目录索引 🐌nginx状态…

Echarts图表Java后端生成Base64图片格式,POI写入Base64图片到Word中

Echarts图表Java后端生成请看上篇,此篇为Base64图片插入Word文档中Java后台生成ECharts图片,并以Base64字符串返回_青冘的博客-CSDN博客 try {XWPFParagraph xwpfParagraphimage doc.createParagraph(); // 创建图片段落xwpfParagraphimage.setAlignment(Paragraph…

【C++】开源:ceres和g2o非线性优化库配置使用

😏★,:.☆( ̄▽ ̄)/$:.★ 😏 这篇文章主要介绍ceres和g2o非线性优化库配置使用。 无专精则不能成,无涉猎则不能通。——梁启超 欢迎来到我的博客,一起学习,共同进步。 喜欢的朋友可以关注一下&…

IT 基础架构自动化

什么是 IT 基础架构自动化 IT 基础架构自动化是通过使用技术来控制和管理构成 IT 基础架构的软件、硬件、存储和其他网络组件来减少人为干预的过程,目标是构建高效、可靠的 IT 环境。 为什么要自动化 IT 基础架构 为客户和员工提供无缝的数字体验已成为企业的当务…

【网络安全】等保测评系列预热

【网络安全】等保测评系列预热 前言1. 什么是等级保护?2. 为什么要做等保?3. 路人甲疑问? 一、等保测试1. 渗透测试流程1.1 明确目标1.2 信息搜集1.3 漏洞探索1.4 漏洞验证1.5 信息分析1.6 获取所需1.7 信息整理1.8 形成报告 2. 等保概述2.1 …

Nginx代理接口访问返回404

Nginx代理接口访问返回404 一、背景 因为不同业务系统间有接口调用,存在跨域问题,为了解决同源策略,需要将接口通过nginx去转发,但是配置完后通过postman请求一直存在访问404的问题。 访问地址:https://a.test.com/n…

卫星照片(dfs)

题面 农夫约翰总是想要一个农场的地图,所以他拍摄了一张 N 行 M 列的卫星照片。一部分的照片看起来像这样: .................. ..#####.......##.. ..#####......##... .................. #.......###.....#. #.....#####.......他认为每个联通块都是一…

【HarmonyOS】【续集】实现从视频提取音频并保存到pcm文件功能(API6 Java)

【关键字】 视频提取类Extractor、视频编解码、保存pcm文件、getAudioTime 【背景和问题】 上篇中介绍了从视频提取音频并保存到pcm文件功能,请参考文档:https://developer.huawei.com/consumer/cn/forum/topic/0209125665541017202?fid0101591351254…

【深度学习推荐系统】目录

前言 在搜广推等业务场景下做了3年工程(主要专注在模型推理方向),最近终于有时间对该领域的知识做个整理,这里做个总的目录,方便以后查找; 后续更新的文章会陆续添到这个目录里来 一、系统架构篇 【深度…

多个excel的sheet合并到一个excel下

目标:多个excel的sheet合并到一个excel下(不同sheet) 要求:原始数据不同excel中的sheet名不同 import pandas as pd import os# 多个Excel文件所在的文件夹路径 folder_path r"D:\data\sheet"# 输出合并后的Excel文件…

元宇宙3D数字虚拟客服打造年轻化、数字化营销新品牌

融合了元宇宙、AI和云计算等技术的虚拟数字人,成为元宇宙数字内容交互的载体,将现实世界中的人与虚拟数字世界的场景、模型及产品链接起来,特别是为电力企业打造的电力元宇宙平台,带来营销宣传多重好处的同时,树立了数…

TOPIAM 社区版 1.0.0 发布,开源 IAM/IDaaS 企业身份管理平台

文章目录 产品概述系统架构功能列表管理端门户端 技术架构后续规划相关地址 ​Hi,亲爱的朋友们,今天是传统 24 节气中的立秋,秋天是禾谷成熟、收获的季节。经过长时间优化和迭代,TOPIAM 企业身份管控平台也迎来了当下的成长和收获…

现代C++中的从头开始深度学习:【5/8】卷积

一、说明 在上一个故事中,我们介绍了机器学习的一些最相关的编码方面,例如 functional 规划、矢量化和线性代数规划。 现在,让我们通过使用 2D 卷积实现实际编码深度学习模型来开始我们的道路。让我们开始吧。 二、关于本系列 我们将学习如何…