js class类

发表评论
与构造函数类似，但是规定了额外的效果，如继承、多态、封装

传统的 JS 只有 对象 的概念，没有class类的概念，因为 JS 是基于原型的面向对象语言，原型对象特点就是将属性全部共享给新对象

但 ES6 引入了 class 类这个概念，通过 class 关键字可以定义类，这就是更符合我们平时所理解的面向对象的语言

class Person{ // 定义一个名为Person的类
// 构造函数，用来接受参数
constructor(x,y){
this.x = x; // this代表的是实例对象
this.y = y;
}
todoSome(){ // 这是个类的方法，不需要加function，有多个方法也不用逗号隔开
alert(this.x + “的年龄是” +this.y+”岁”);
}
}

constructor 构造函数

该 函数 可以接收传递过来的参数，同时返回实例对象。在类中该函数无需用 function 声明

constructor 函数 只要 new 生成实例时，就会自动调用到这个函数。( 即使我们不写constructor ，系统也会自动生成这个函数 )

JavaScript
class Human{
    constructor(user){
        this.user = user;
    }
}

prototype 属性

每个函数都有一个 prototype 属性，它指向一个对象。这个对象被称为原型对象，它包含了该函数的所有实例共享的属性和方法。当我们创建一个函数时，JavaScript 引擎会自动为该函数创建一个原型对象，并将其赋值给 prototype 属性

通过给原型对象添加属性和方法来实现在所有实例之间共享属性和方法。当我们创建一个函数的实例时，JavaScript 引擎会自动将该实例的 [[Prototype]] 属性指向该函数的原型对象。这样，该实例就可以访问到原型对象中定义的属性和方法了

JavaScript
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
}

extends 继承

继承类的声明，使用 extends 来实现 子类继承父类 的属性 (需要super()) 与方法
super() 可让子类调用父类的构造函数成员，实现属性继承；super() 相当于 调用父类的 constructor
super() 也可以调用父类方法，如super.introduce(); 子类调用父类方法

JavaScript
// 定义父类
class Human {
    constructor(user) {
        this.user = user;
    }
    introduce() {
        console.log('该用户名字为' + this.user);
    }
}
//类的继承
class Student extends Human {
    constructor(user, score) {
        // 调用父类构造函数中的成员，可写多个成员 
        super(user);
        this.score = score;
    }
    // 类方法的复写
    introduce() {
        console.log('该学生名字为' + this.user + '。成绩为' + this.score + '分');
    }
}

子类覆写父类方法

直接在子类 定义 父类 同名方法，达到覆写效果，程序将优先执行实例化 类 中的方法

JavaScript
class Animal {
    seyHi() {
        console.log('hello~');
    }
}
class Cat extends Animal {
    seyHi() {
        console.log('喵喵喵');
    }
}
let cat = new Cat();
cat.seyHi(); //喵喵喵

子类调用父类方法

子类需要在函数执行时用 super 调用父类方法

class Animal {
    eat() {
        console.log(‘它在吃食物’);
    }
}
class Cat extends Animal {
    state(){
        // super 在这可以理解为 父级单位
        super.eat();
    }
}
let cat = new Cat();
cat.state(); //它在吃食物

new 类的实例化

当类定义完成后，需要实例化才能使用这些方法与属性，在js中 class 类似 于模板的存在。需要实例化 赋值给 变量 后，该变量 将继承 目标类的所有属性和方法

// 实例化 teacher 类并赋值给 变量 smm
let smm = new Teacher(‘屎猫’,’JS’);
// 实例化 teacher 类并赋值给 变量 aipo
let aipo = new Student(‘AIpo’,50);
//调用 类方法
smm.introduce();
aipo.introduce();

判断实例对象是否在原型链

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上

JavaScript
function Cat() {
    // ...
}

// 使用 instanceof 判断实例化的对象 是否在原型链上
console.log(smm instanceof Cat); // true
console.log(smm instanceof Dog); // false
console.log(smm instanceof Object); // true 任何对象都继承 Object

发表回复