js中的Class类详解

目录

什么是类?

定义一个简单的类

定义一个类为Person,每个Person都会跑,都有名字

看一下Person类 和 Person的实例 

但是为什么Person实例多出来的两个属性?

new 一个类发生了什么

类的静态属性和实例属性

类的私有属性

继承


什么是类?

class 类是一种抽象的体现,用来表示具有相同特性的一类事物,是面向对象编程(oop)不可缺少的工具。

定义一个简单的类

定义一个类为Person,每个Person都会跑,都有名字

class Person {
      constructor(surname, name) {
        this.surname = surname
        this.name = name
      }
      work() {
        console.log("我们会一直跑");
      }
      getName() {
        return this.surname + this.name
      }
    }
    const p1 = new Person("张", "三")
    p1.work()
    console.log(p1.getName());

毫无疑问执行代码肯定会打印 我们会一直跑 和 张三

看一下Person类 和 Person的实例 

可以看到 Person实例的[[Prototype]]是指向Person的prototype的 

但是为什么Person实例多出来的两个属性?

因为在new Person实例的时候,执行了constructor函数, 可以把它叫做构造器函数,这个构造器函数的this执行了实例, 所以给p1实例增加了俩个属性 name, surname,大家不用往上看了

constructor(surname, name) {
        this.surname = surname
        this.name = name
      }

其实上面的现象都是在new 一个类实例的结果,接下来看看new一个实例发生了什么

new 一个类发生了什么

  1. 在堆空间创建一个对象
  2. 对象的[[Prototype]]指向其构造函数的prototype的
  3. constructor 中this被赋值为这个对象
  4. 执行 constructor构造器函数 给对象创建属性
  5. 最后一点  如果constructor函数内返回了一个对象,则实例就是该对象,反之实例就是刚刚在堆内存中创建的对象

针对第五步的代码示例

    class Person {
      constructor(surname, name) {
        this.surname = surname
        this.name = name
        return { a: 1 }
      }
      work() {
        console.log("我们会一直跑");
      }
      getName() {
        return this.surname + this.name
      }
    }
    const p1 = new Person("张", "三")
    console.dir(Person);
    console.dir(p1);

类的静态属性和实例属性

实例属性是所有的实例都可以访问的属性,静态属性是只有类本身才能访问的, 静态属性通过static关键字来定义,或者直接Person.xxx

假设Person有一个秘密,只有他自己可以访问到

class Person {
      constructor(surname, name) {
        this.surname = surname
        this.name = name
        return { a: 1 }
      }
      work() {
        console.log("我们会一直跑");
      }
      getName() {
        return this.surname + this.name
      }
      static secret() {
        return "我的秘密是 xxxxxx"
      }
    }
    const p1 = new Person("张", "三")
    console.log(Person.secret());
    try {
      p1.secret()
    } catch (error) {
      console.log(error);
    }
    console.dir(Person);

细心的同学可能已经发现了,通过static关键字设置的静态属性直接挂在Person类对象上了,实例属性都是挂在prototype上的,这更加验证了new关键字的五个步骤

类的私有属性

我们可以为每一个类实例都定义私有属性,在生活中每个人都有个人隐私,比如说女生不愿意透露的身高体重等等,在类中也可以实现类似的

  class Person {
      #height
      constructor(surname, name) {
        this.surname = surname
        this.name = name
        this.#height = "120cm"
      }
      work() {
        console.log("我们会一直跑");
      }
      getName() {
        return this.surname + this.name
      }
      secret() {
        console.log(this.#height);
        return "我的秘密是 xxxxxx"
      }
    }
    const p1 = new Person("张", "三")
    console.dir(p1);
    p1.secret()

类的私有属性只能在当前类中访问,对照上面的代码就是只能在secret中访问,类之外的地方访问就会报以下的错

继承

继承是面对对象编程的三大特性之一,js中通过extends来实现继承,需要注意的是字类继承父类时需要调用super函数,作用就是调用父类的constructor,还要注意不要再super前访问this

class Father {
      constructor(money) {
        this.money = 1000000
      }
    }
    class Son extends Father {
      constructor() {
        super()
      }
    }
    const S1 = new Son()
    console.dir(S1);

暂时就先说这么多,后续有发现再补充

  • 31
    点赞
  • 97
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
ES6class可以让我们更方便地定义和面向对象的编程模式。下面是一些关于ES6 class的详细解释: 1. 定义 使用class关键字定义一个名通常首字母大写。例如: ``` class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() { console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`); } } ``` 上面的代码定义了一个Person,包含一个构造函数和一个sayHello方法。 2. 构造函数 的构造函数使用constructor关键字定义,用于初始化对象的属性。例如: ``` class Person { constructor(name, age) { this.name = name; this.age = age; } } ``` 上面的代码定义了一个Person,包含一个构造函数,构造函数接收name和age两个参数,并将其分别赋值给对象的name和age属性。 3. 方法 的方法可以像普通函数一样定义,例如: ``` class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() { console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`); } } ``` 上面的代码定义了一个Person,包含一个sayHello方法,该方法用于打印对象的name和age属性。 4. 继承 ES6class支持继承,使用extends关键字实现继承。例如: ``` class Student extends Person { constructor(name, age, grade) { super(name, age); this.grade = grade; } study() { console.log(`${this.name} is studying in grade ${this.grade}.`); } } ``` 上面的代码定义了一个Student,该继承自Person,包含一个构造函数和一个study方法。构造函数接收name、age和grade三个参数,其name和age由父的构造函数初始化,grade由子的构造函数初始化。 5. 静态方法 的静态方法使用static关键字定义,可以直接通过名调用,例如: ``` class MathUtils { static add(x, y) { return x + y; } static subtract(x, y) { return x - y; } } ``` 上面的代码定义了一个MathUtils,包含两个静态方法add和subtract,这两个方法可以直接通过名调用。 6. 属性 ES6class支持定义属性,可以使用get和set关键字定义属性的读写方法。例如: ``` class Person { constructor(name, age) { this._name = name; this._age = age; } get name() { return this._name; } set name(name) { this._name = name; } get age() { return this._age; } set age(age) { this._age = age; } } ``` 上面的代码定义了一个Person,包含两个属性name和age,这两个属性的读写方法分别由get和set关键字定义。注意,属性名前面加上了一个下划线,这是一种约定俗成的做法,用于表示私有属性,防止属性被直接访问。 7. 静态属性 ES6class支持定义静态属性,使用static关键字定义静态属性。例如: ``` class MyClass { static myStaticProperty = 42; } ``` 上面的代码定义了一个MyClass,包含一个静态属性myStaticProperty,该属性的初始值为42。 总结: ES6classJavaScript提供了更加完整和规范的面向对象编程模式,支持继承、静态方法、属性等等。使用class可以让我们更方便地定义和对象,提高代码的可读性和维护性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值