es6之class

最新推荐文章于 2025-05-23 02:01:42 发布

转载最新推荐文章于 2025-05-23 02:01:42 发布 · 137 阅读

es6 专栏收录该内容

10 篇文章

订阅专栏

本文深入探讨了JavaScript中类的概念及其实现方式，包括构造函数、原型链、静态属性和方法等内容。此外还介绍了如何使用类实现继承，以及super关键字的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

class：类类别的意思

js为什么引入类

类：加强之后的构造函数

以前版本的构造函数

1，不看函数体不知道是不是构造函数

2，构造函数能当普通函数执行，并且产生全局变量

为什么用原型：降低代码耦合性，链式调用，节省空间，增加代码复用

什么是静态属性和方法：定义在原型上的（不是原型链上）的属性和方法，class 通过static声明静态方法

class

构造函数 constructor （也是定义在原型上的）

定义在原型链上的函数除了constructor以外，除了静态方法之外的函数。

静态属性，方法通过static 声明的方法（定义在原型上的如 Object.is()）

class demo {
    constructor(name, age) {  //构造函数 通过new才能用
        this.name = name
        this.age = age
        console.log('我是Con')
    }
    add() {                     //原型链上的方法
        console.log('我是原型链上的方法')
    }
    static() {                 // 静态方法  通过 static 声明
        console.log('我是静态方法')
    }
}

Object.is() 增强的 === （能判断NaN）

一等公民 class 应用灵活

function

函数的参数作为匿名函数

可以立即被返回作为匿名函数

可以赋值给被人

//可以做参数
function createObj(classDefine){
    return new classDefine()
}

let obj = new createObj(class{
    constructor(){
        this.type = 'node'

    }
    add(){
        console.log(11)
    }
})

// 立即执行class

let obj = new class {
    constructor(value) {
        this.value = value
    }
}('BaiMAX')

// 可以被返回
function returnClass() {
    return class {

    }
}

class 生成器方法

class IteratorArray {
    constructor(arr = []) {
        this.arr = arr
    }
    *[Symbol.iterator]() { //必须写 不然不能迭代
        yield* this.arr  //默认为 arr[Symbol.iterator] 也可以写 values()  entries()
    }
}

let arr = new IteratorArray([1, 2, 3, 4, 5, 6, 7])

for (let key in arr) {
    console.log(arr[key])
}

for (let item of arr) {
    console.log(item)
}

关于 class 的 extends 和super

class Animal {
    constructor(name){
        this.name = name
    }
    shouMsg(){
        console.log(this.name)
    }
    eat(){
        console.log('Animal eat')
    }
}

class Person extends Animal { // p 是 A 的派生类 也叫子类  p是A生出来的
    constructor(name){
        // Animal.call(this,name)               
        super(name)           //super 作为函数执行 调用父类构造函数 默认this 指向当前对象、
        // console.log(this)
    }
    eat(){
        // super.eat()  //super 作为对象的时候 指的是父类的原型 并自动绑定当前函数的this 
        
        console.log('person eat')  //重写eat 
    }
    show(){
        super.shouMsg() //this 指向当前对象
    }
    // constructor(...arg){  //系统默认创建super
    //     super(...arg)
    // }

}
let p = new Person('baibai')

子类派生类 必须调用super函数（构造函数默认）

super 作为函数执行 调用父类构造函数默认this 指向当前对象、(产生this 指向当前对象 )

super 作为对象的时候 指的是父类的原型并自动绑定当前函数的this