《十八》E6+ 中的 class 类

已于 2023-04-02 19:24:47 修改
阅读量220 收藏
点赞数
分类专栏： ES6+ 文章标签： ES6+
于 2020-02-07 11:15:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wsln_123456/article/details/104206836
版权

类：

ES6 引入了 class 类的概念。通过 class 关键字，可以定义类，类名一般首字母大写。通过 new 命令来实例化类，可以得到实例对象。

class 类的正确写法：

  1. 由于属性占用的内存空间小，一般会将属性定义在实例对象上。
  2. 但是为了避免多个实例对象创建多个方法，一般会将方法定义在原型上。

ES6 中的 class 类本质上只是构造函数、原型链的语法糖。类中默认开启了严格模式。class 类不存在函数提升。
语法糖：语法糖的作用其实就是让写的代码更加简单，看起来也更容易理解。

类可以看做是实例对象的模板，用一个类可以创建出许多不同的实例对象。例如：人类。
实例对象可以看做是类的具象化。例如：某个人。

// 定义类
class Person {} // 声明形式
const Person = class {} // 表达式形式：将一个匿名类赋值给一个变量

// 实例化类
const p = new Person() // 正确
Person() // 错误。只能通过 new 来实例化类，不能直接调用

class 类本质上也是函数，因此也有显式原型。

console.log(typeof Person) // function
console.log(p.__proto__ === Person.prototype) // true
console.log(Person.prototype.constructor === Person) // true

constructor 构造方法：

constructor 构造方法是类的默认方法，通过 new 关键字调用类生成实例对象时，会自动执行该方法。可以写，也可以不写，不写的时候会被默认添加。

class Person{
	// 构造方法：new 实例化类的时候会自动执行。执行 constructor 时，和 new 构造函数时内部执行的操作一样
	constructor() {
		console.log('constructor')  // constructor
	}
}
const  p = new Person()

实例化类时传入的参数，会在 constructor 构造方法中接收。

class Person{
	constructor(name) {
		console.log(name) // Lee
	}
}
const  p = new Person('Lee')

constructor 构造方法中的 this 指向实例对象。

class Person{
	constructor(name) {
		// constructor 构造方法中的 this 指向实例对象，给 this 添加属性和方法就相当于给实例对象添加属性和方法
		this.name = name
	}
}
const  p = new Person('Lee')
console.log(p.name) // Lee

静态代码块：

ES13 开始，class 类支持静态块。以 static 开头的大括号就是静态代码块，在 JS 引擎解析 class 类的时候就会执行静态代码块，且只会执行一次。

class Person {
	// 并没有 new Person()，在解析阶段就会执行
	static {
		console.log('执行静态代码块')
	}
}

实例属性、实例方法：

实例属性、实例方法：定义在实例对象身上，通过实例对象来调用，每个实例对象身上都有自己的实例属性和实例方法。

class Person{
	constructor(name, age){
		// 实例属性、实例方法
		this.name = name
		this.age = age
		// 一般不将方法定义为实例方法。因为会直接定义在实例对象上，导致每一个生成的实例对象都有各自独立的方法，不是同一个引用，浪费内存空间
	    this.show = function(){
	    	console.log(`${this.name}：${this.age}`) // 通过实例对象来调用实例方法，因此，此处的 this 指向实例对象
	  }
	}
}

const p= new Person('Lee', 18)
p.show()

请添加图片描述

公共属性、公共方法：

ES13 新增了公共属性和公共方法：定义在实例对象身上，通过实例对象来调用，所有实例对象身上都有相同的公共属性和公共方法。

class Person {
  	// 公共属性、公共方法
	publicName = 'Tom'
	publicShow = function(){
		console.log(this.publicName)
	}
}

const p1 = new Person()
const p2 = new Person()
console.log(p1)
console.log(p2)

请添加图片描述

原型属性、原型方法：

原型属性、原型方法：定义在 class 类的显示原型对象上，会被实例对象继承，可以通过 构类.prototype 或者实例对象来调用。

class Person{
  // 原型方法：方法前面不需要加 function 关键字；方法之间不需要逗号分割
  // 一般将方法定义为原型方法。因为会定义在类的 prototype 上，所有实例对象都共享这一个方法。
  showSex1(){
     console.log(this.sex)
  }
}

// 原型属性、原型方法
Person.prototype.sex = '男'
Person.prototype.showSex2 = function() {
	console.log(this.sex)
}

const p = new Person('Lee', 18)
p.showSex()

请添加图片描述

静态属性、静态方法：

静态属性、静态方法：定义在类自身上，不会被实例对象继承，直接通过类来调用。

class Person{
  // 类的静态属性、类的静态方法：前面加上 static 关键字
  static sex = '男'
  static showSex(){
    console.log(this.sex) // 通过类来调用静态方法，因此，此处的 this 指向 Person 类
  }
}

 // 类的静态属性、类的静态方法
Person.hobby = '吃东西'
Person.showHobby = function(){
  console.log(this.hobby)
}

Person.showSex()

私有属性、私有方法：

私有属性、私有方法：定义的属性和方法只能在类的内部使用，不能在类的外部使用。

可以将一些不希望被外界访问、修改的属性和方法私有化。

ES6 中 class 类没有原生的私有属性和私有方法的语法，只能模拟实现。可以 用 _ 开头表示私有，但这只是一种约定俗成，并没有强制作用，只能一定程度上避免开发人员主观上的误操作。

class Person{
  _showSex(){
    console.log(this.sex)
  }
}

ES13 新增了私有属性和私有方法：以 # 开头的会被定义为私有属性和私有方法。

class Person {
	#privateName = 'Lee'
	#privateShow() {
		console.log(this.#privateName) // 可以访问
	}
   
   static #privateSex = '男'
}
const p = new Person()
console.log(p.#privateName) // 无法访问

访问器方法：

class Person {
	constructor() {
		// 定义一个私有变量
		this._name = ''
	}

	// setter 方法
	set name(value) {
		console.log('设置 name')
		this._name = value
	}

	// gettter 方法
	get name() {
		console.log('获取 name')
		return this._name
	}
 }
 var p = new Person()
 p.name = 'Lee'
 console.log(p.name)

类的属性名可以使用表达式，要用中括号括起来。

let method = 'show'
let str = 'Name'
class Person{
	[method+str](){
	   return 'Lee'
	}
}

let p = new Person()
console.log(p.showName())
console.log(p[method+str]())

类的继承：

class 类可以通过 extends 关键字来实现继承，父类的所有属性和方法都会被子类继承。

ES6 中的 class 类只支持单继承，也就是只能有一个父类。

// 父类
class Person{
	constructor(name, age){
		this.name = name
		this.age = age
	}
    show(){
       console.log(`${this.name}：${this.age}`)
    }

	 static sex = '男'
	 static showSex(){
	     console.log(this.sex)
	  }
}

// 子类
class Student extends Person {
	constructor(name, age) {
	   // 必须在子类的构造方法中调用父类的构造方法，调用 super() 就相当于是调用父类的 constructor()
		super(name, age)
	}
}

const s = new Student('Lee', 18)
console.log(s.name)
s.show()
console.log(Student.sex)
Student.showSex()

添加自己的属性和方法：

// 父类
class Person{
	constructor(name, age){
		this.name = name
		this.age = age
	}
}

// 子类
class Student extends Person {
	constructor(name, age, profession) {
		super(name, age)
		// 添加子类自己的实例属性。this 操作不能放在 super() 前面，因为此时子类还没有 this 对象
		this.profession = profession
	}

	// 添加子类自己的原型方法
	showProfession() {
		 console.log(this.profession)
	}
}
const s = new Student('Lee', 18, '学生')
console.log(s.profession) // 学生
p.showProfession()

改写继承的属性和方法：

如果在子类中添加了和父类相同的属性和方法，则子类方法会覆盖掉父类的属性和方法，这种称为方法重写。

class Person{
   speak(){
       console.log('p speak')
   }

	static speak(){
	   console.log('Person static speak')
	}
}

class Student extends Person {
	// 改写继承自父类的实例方法
	speak(){
       console.log('s speak')
    }

    // 改写继承自父类的静态方法
	static speak(){
	   console.log('Student static speak')
	}
}
const s = new Student()
s.speak() // s speak
Student.speak() // Student static speak

constructor 构造方法：

子类的 constructor 构造方法可以写，也可以不写。

  1. 如果不写的话，constructor 构造方法会被默认添加。

  2. 如果写的话，必须在 constructor 构造方法中明确调用 super 方法，且必须在使用 this 之前。

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

ES5 的继承，实质是先创造子类的实例对象 this，然后再将父类的方法添加到 this 上面（Parent.apply(this)）。
ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到 this 上面（所以必须先调用 super 方法），然后再用子类的构造函数修改 this。

如果在子类中添加了和父类相同的属性和方法，则子类方法会覆盖掉父类的属性和方法，这种称为方法重写。
因此，如果在子类中明确写了 constructor 方法，则会覆盖掉父类的 constructor 方法，所以必须在子类的构造函数中手动地调用一下父类的构造函数，super 作为函数用在子类的构造函数之中时，代表的是父类的构造函数，因此调用一下 super() 即可。

class Student extends Person {
	constructor() {
	   super()	   
	}
}

super 关键字：

super 关键字既可以当做函数使用，也可以当做对象使用。在这两种情况下，它的用法完全不同，因此在使用 super 的时候，必须显式地指定 super 是作为函数还是作为对象使用，否则会报错。

super 作为函数时，只能用在子类的构造方法中，代表的是父类的构造方法。内部的 this 指向的是子类的实例。
super 作为对象时，在非静态方法中（构造方法或普通方法），代表的是父类的原型对象。通过 super 调用父类的方法时，方法内部的 this 指向的是子类的实例对象。
super 作为对象，在静态方法中，代表的是父类。通过 super 调用父类的方法时，方法内部的 this 指向的是子类。

class Person {}

class Student extends Person {
  constructor() {
    super()
    console.log(super) // 错误。必须显式地指定 super 是作为函数还是作为对象使用
  }
}
  1. super 作为函数时，只能用在子类的构造方法中，代表的是父类的 constructor 构造方法，用在其他地方就会报错。
    class Person {}

class Student extends Person {
  constructor() {
    super() // 正确
  }
  
  show() {
     super() // 错误
  }
}
    super() 虽然代表了父类的构造方法，但是内部的 this 指向的却是子类的实例，因此 super() 相当于父类.prototype.constructor.call(this)。
    class Person{
	constructor(){
		console.log(this) // Student{}
	}
}

class Student extends Person {
	constructor() {
		super()
	}
}
const s = new Student()
  2. super 作为对象时，在非静态方法中（构造方法或其他普通方法），代表的是父类的原型对象；在静态方法中，代表的是父类。
    • super 作为对象时，在非静态方法中，代表的是父类的原型对象。
      // super 作为对象在构造方法中，代表的是父类的原型对象
class Person {
  constructor(name) {
      this.name = name
  }
  show() {
    console.log(this.name)
  }
}

class Student extends Person {
  constructor(name) {
  	// 必须要先调用 super()，然后才能使用 super，否则会报错
    super(name)
    // 相当于 Person.prototype.show()，show 方法是定义在 Person 类的原型对象上，因此可访问到
    super.show() // Lee
    // 相当于 Person.prototype.name，name 是定义在 Person 类的实例对象上，因此访问不到
	console.log(super.name) // undefined
  }
}
const s = new Student('Lee')

      // super 作为对象在普通方法中，代表的是父类的原型对象
class Person {
	constructor(name) {
		this.name = name
	}
	show() {
		console.log(this.name)
	}
}

class Student extends Person {
	extendShow() {
		// 相当于 Person.prototype.show()，show 方法是定义在 Person 类的原型对象上，因此可访问到
		super.show() // Lee
		// 相当于 Person.prototype.name，name 是定义在 Person 类的实例对象上，因此访问不到
		console.log(super.name) // undefined
	}
}
const s = new Student('Lee')
s.extendShow()
      在子类的非静态方法中通过 super 对象调用父类的方法时，父类方法内部的 this 指向的是子类的实例对象。
      class Person {
	constructor() {
		this.name = 'Person'
	}
	show() {
		// 此时父类方法内部的 this 指向的是子类的实例对象
		console.log(this.name) // Student
	}
}

class Student extends Person {
	constructor() {
		super()
		this.name = 'Student'
	}
	speak() {
		// 在子类非静态方法中通过 super 对象调用父类的方法
		super.show()
	}
}
const s = new Student()
s.speak()
    • super 作为对象，在静态方法中，代表的是父类。
      //  super 作为对象，在静态方法中，代表的是父类
class Person {
	show() {
		console.log('show')
	}

	static show() {
		console.log('static show')
	}
}

class Student extends Person {
	static speak() {
		//  相当于 Person.show()
		super.show()
	}
}	
Student.speak() // static show
      在子类的静态方法中通过 super 调用父类的方法时，父类方法内部的 this 指向的是子类。
      class Person {
	static name = 'Person'
	static show() {
		// 此时父类方法内部的 this 指向的是子类
		console.log(this.name) // Student
	}
}

class Student extends Person {
	static name = 'Student'
	static speak() {
		// 在子类静态方法中通过 super 对象调用父类的方法
		super.show()
	}
}
Student.speak()
花铛
关注
专栏目录
webSocket封装，心跳检测+断线重连基于ES6 class
禅思院
01-16 8116
ES6 class 封装websocket 使用 介绍 在《菜鸟教程中》这样介绍WebSocket WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的...
vue 在路由中使用动态绑定class，实现简单的标签导航效果
liangyk1005的博客
06-15 1083
我们在使用路由切换页面时，有时可能需要实现和标签导航类似的效果。 在页面切换时，会把当前路由的path存入 $route.path 中。我们可以根据 $route.path 的值，动态的给标签绑定class，从而实现标签导航的效果。 <router-link to="/main/search/music“ replace><p :class=" $route.path == '/main/search/music' ? 'chosed':'' ">歌曲</p></
E6知识点-----class，类的继承，包装对象
BigWind3的博客
11-13 916
class Drag{ //静态属性 static height = "178cm" static test() { console.log("test") } constructor(){ this.name = "张三" } hobby(){ console.log("篮球") } } ...
关于学习中遇到的E6新增特性
weixin_34195142的博客
08-11 659
一，变量声明：Let与const ES6推荐使用Let来声明变量，Let提供块作用域(block-scoping)，这会比var提供的以函数为作用域有更加精细化的控制。请看下面例题 问：在下面程序中，控制台打印的最终结果？ function fn() { var arr = []; for (var i = 0; i < 5; i++) { ...
ES6 类(Class)基本用法和静态属性+方法详解
热门推荐
pcaxb的专栏
12-20 11万+
转载请注明预见才能遇见的博客：http://my.csdn.net/ 原文地址： ES6 类(Class)基本用法和静态属性+方法详解 JavaScript语言的传统方法是通过构造函数,定义并生成新对象,prototype 属性使您有能力向对象添加属性和方法。下面是通过传统的方式创建和使用对象的案例: //Person.js function Person(x,y){ this
Java中的实体类（entity class）和model
SakuraMG的博客
01-12 9952
实体类的简单介绍
Scala中Object和Class区别(伴生类和伴生对象)
陈小哥cw
03-30 5039
文章目录一,介绍二,类Class2.1 类定义2.2 构造器1.基本语法2.构造器参数2.3 私有成员和Getter/Setter语法三,单例对象Object四,伴生对象和伴生类介绍五,总结 一,介绍 Scala是一个完全面向对象的语言，故Scala去掉了Java中非面向对象的元素，如static关键字，void类型，为了能够调用静态语法(模拟静态语法)，采用伴生对象单例的方式 Scala源码中包含了main方法,在编译后自动形成了public static void main scala在编译源码
机器学习 朴素贝叶斯实现中文垃圾短信分类
逆羽@每日coding的博客
12-21 2834
我是用的伯努利来实现中文垃圾短信的分类，其中中文分词因为用的jieba没设置停用词，所以垃圾短信的召回率会降低，建议最好加上停用词。 数据集用的常见的80w条带标签的中文短信，下载链接https://github.com/hrwhisper/SpamMessage/blob/master/data/%E5%B8%A6%E6%A0%87%E7%AD%BE%E7%9F%AD%E4%BF%A1.txt...
检索COM类工厂中CLSID为 {00024500-0000-0000-C000-000000000046}的组件失败的解决方案
07-16
工作过程中，需要在后台C#中操作Excel...错误信息：检索 COM 类工厂中 CLSID 为{00024500-0000-0000-C000-000000000046} 的组件 因是出现以下错误:80070005 拒绝访问。 (异常来自HRESULT:0x80070005 (E_ACCESSDENIED))
《十八》ES6+ 中的 Module
花铛
04-23 3121
在 ES6 之前，为了让 JavaScript 支持模块化，社区涌现出了很多不同的模块化规范：AMD、CommonJS、CMD 等。但是目前，AMD 和 CMD 已经很少使用了。直到 ES6，ECMAScript 官方才推出了 JavaScript 的模块化方案 ES Module。ES Module 中使用 export 将当前模块的内容导出，使用 import 将其他模块的内容导入。ES Module 自动采用严格模式。
《十七》ES6+ 中的 async 函数
花铛
05-21 927
ES8 引入了 async 异步函数，它是 Generator 生成器函数的语法糖。async 异步函数内部代码的执行过程和普通函数是一样的。默认情况下也是同步执行。
《十八》ES6+ 中新增的类
花铛
03-31 567
ES12 中新增了 FinalizationRegistry 类，可以用来监听一个对象是否被垃圾回收器回收。通过创建一个 FinalizationRegistry 实例，可以传入一个回调函数作为参数，当某一个对象被回收时，传入的回调函数会被自动执行。通过来注册对象，可以注册多个对象。第一个参数就是要注册的对象；第二个参数可以在传入的回调函数中接收到，以此来区分被回收的是哪一个对象。
《十五》ES6+ 中的 Iterator
花铛
03-13 436
在 JS 中，Iterator 迭代器其实就是一个可以帮助开发人员遍历某个数据结构的对象。迭代器必须实现一个名为next()的特定方法。
《三》ES6+ 中的解构赋值、展开运算符、逻辑赋值运算符
花铛
06-03 339
解构赋值是对赋值运算符的一种扩展。ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。
《七》ES6+ 中对象的扩展
花铛
05-29 306
ES11 引入了 globalThis 对象，在浏览器 和 node 环境下， globalThis 都指向全局对象。之前，在浏览器中，全局对象是 window；在 node 环境下，全局对象是 global。
《十二》ES6+ 中的 Proxy
花铛
06-09 283
ES6 中新增了一个 Proxy 类，Proxy 的原意是代理，用在这里表示由它来代理某些操作，可以译为代理器。可以理解成，在目标对象之前架设一层拦截，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。通过也可以实现监听对象属性的操作。但是是存在弊端的：首先，设计的初衷并不是为了去监听一个完整对象中所有的属性；其次，如果想监听更加丰富的操作，比如新增属性、删除属性、是否存在属性等，是无法做到的。Vue2 就是通过。
《十四》ES6+ 中的 Promise
花铛
02-05 283
Promise （承诺）是 ES6 引入的异步操作的一种解决方案。Promise 是一个类，用于封装异步操作并可以获取其成功或失败的结果。用同步的方式去写异步代码，链式调用相比于层层嵌套来说代码变得扁平了，解决了之前回调地狱的问题，但是还是需要维护一条调用链。Promise 解决的不是回调函数的问题，而是层层嵌套的回调函数形成的回调地狱的问题。
《十三》ES6+ 中的 Reflect
花铛
06-10 280
Reflect 是 ES6 新增的一个对象，提供了很多方法用来操作 JS 对象。也就是说，现在可以用 Reflect 来代替 Object 统一操作 JS 对象。
《十六》ES6+ 中的 Generator
花铛
05-09 264
Generator 函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号。不同的是，调用 Generator 函数后，该函数并不执行，返回的也不是函数的运行结果，而是一个指向内部状态的指针对象(是一个遍历器对象)。下一步，必须调用遍历器对象的 next 方法，使得指针移向下一个状态，也就是说，每次调用 next 方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个 yield 表达式或 return 表达式。
JavaScript中E6的五个知识点
最新发布
06-07
1. 箭头函数：箭头函数是ES6中的一种新的函数语法。它相对于传统的函数表达式具有更加简洁的语法和更加方便的作用域绑定。例如： ``` // 传统的函数表达式 function (a, b) { return a + b; } // 箭头函数 (a, b) => a + b; ``` 2. 模板字符串：模板字符串是ES6中的一种新的字符串语法。它允许在字符串中使用表达式，并且可以跨越多行。例如： ``` const name = "Tom"; const message = `Hello ${name}, How are you today?`; ``` 3. let 和 const：let和const是ES6中的新的变量声明方式。它们提供了块级作用域，并且const还可以用于声明常量。例如： ``` let x = 10; const y = 20; if (x === 10) { let x = 20; const y = 30; console.log(x, y); // 20, 30 } console.log(x, y); // 10, 20 ``` 4. 解构赋值：解构赋值是ES6中的一种新的语法。它允许从对象或数组中提取值，并将这些值赋给变量。例如： ``` const obj = {a: 1, b: 2}; const {a, b} = obj; console.log(a, b); // 1, 2 const arr = [1, 2, 3]; const [x, y, z] = arr; console.log(x, y, z); // 1, 2, 3 ``` 5. 类和继承：ES6引入了类和继承的概念。类是一种定义对象的模板，它包含数据和方法。继承允许一个类继承另一个类的特性。例如： ``` class Animal { constructor(name) { this.name = name; } speak() { console.log(`${this.name} makes a noise.`); } } class Dog extends Animal { constructor(name) { super(name); } speak() { console.log(`${this.name} barks.`); } } const dog = new Dog('Fido'); dog.speak(); // "Fido barks." ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值