面向对象

• class：类，可以看作是对象的模版，用一个类可以创建许多不同的对象
• 定义class

类名一般首字母大写
class Person {} √
class Person() {} ×
class Person {}; 一般不在结尾加分号

添加构造方法，实例化对象时自动执行，必须有构造方法
<script>
  class Person {
    constructor() {
      console.log("构造方法, 会在实例化对象的时候, 自动执行...");
    }
  }

  const xiaoming = new Person();
  const xiaohong = new Person();
  const xiaohua = new Person();
  const xiaogang = new Person();
</script>

 

• 实例化时传值

<script>
  class Person {
    constructor(name, age) {
      this.name = name;
      this.age = age;
    }
  }

  const xiaoming = new Person("小明", 18);
  const xiaohong = new Person("小红", 20);
  const xiaohua = new Person("小花", 22);
  console.log(xiaoming.name);
  console.log(xiaoming.age);
  console.log(xiaohong.name);
  console.log(xiaohong.age);
  console.log(xiaohua.name);
  console.log(xiaohua.age);
</script>

 

• 定义方法

 class Person {
    constructor(name, age) {
      this.name = name;
      this.age = age;
    }
    introduce() {
      return "大家好, 我的名字叫" + this.name + "今年" + this.age + "岁!";
    }
  }

  const xiaoming = new Person("小明", 18);
  const xiaohong = new Person("小红", 20);
  const xiaohua = new Person("小花", 22);
  console.log(xiaoming.introduce());
  console.log(xiaohong.introduce());
  console.log(xiaohua.introduce());

 

• 类属性/方法（不是类的属性/方法，是对象的属性/方法，类本身不能调用）

　　　　属性写法：属性 = 属性值 ，前面不加var const let

　　　　方法写法：方法名(){}，不需要加；

　　　　方法内定义的属性和方法可以共享

• 　类的静态属性（类本身的属性/方法，两者不通用，可以共存，可以同名），不需要实例就可以调用的属性或方法

使用关键字static定义
class Person{
    constructor(name,age){
        this.username = name;
        this.userage = age;
    }
    static weight = 200;
    weight = 100;
    static introduce(){
        return 0
    }
    introduce(){
        return this.username + "今年" + this.userage + "岁";
    }
}
const xiaoming = new Person("小明",18);
console.log(Person.weight);//200
console.log(xiaoming.weight);//100
console.log(Person.introduce());//0
console.log(xiaoming.introduce());//小明今年18岁

也可以给定义好的类添加静态方法/实例

class Person {
weight = 120;
}
Person.weight = 1000; // 静态属性
const xiaoming = new Person();
console.log(xiaoming.weight); // 120
console.log(Person.weight); // 1000

类的静态方法，this指向类
实例的方法，this指向实例

 

• 类的私有方法/属性

　　　　一些属性和方法，只能在类的内部调用，不能在类的外部（如对象）调用

　　　　公有的属性可以被外界修改 

　　　　私有属性和方法：使用_开头，表示私有（约束性不强）

class Person {
    constructor(username) {
        this._username = username;
    }
}
const xiaoming = new Person("小明");
console.log(xiaoming.username);//undefined
console.log(xiaoming._username)//小明

 

• extends（继承，使用extend子类可以继承父类的属性和方法）

// 父类
class Person {
    // 构造函数
    constructor(name, sex) {
        this.name = name;
        this.sex = sex;
        this.say = function () {
            console.log("大家好");
        };
    }
    speak() {
        console.log("实例方法 speak");
    }
    static speak() {
        console.log("类的静态方法 speak");
    }
}
// 子类
class Coder extends Person {
    constructor(name, sex) {
        super(name, sex);
    }
}
const xiaoming = new Coder("小明", "男");
console.log(xiaoming.name);//小明
console.log(xiaoming.sex);//男
xiaoming.say();//你好
xiaoming.speak();//实例方法 speak
Coder.speak();//类的静态方法 speak

 

• 子类改写继承的属性和方法：同名覆盖

// 父类
class Person {
    // 构造函数
    constructor(name, sex) {
        this.name = name;
        this.sex = sex;
        this.say = function () {
            console.log("大家好");
        };
    }
    speak() {
        console.log("实例方法 speak");
    }
    static speak() {
        console.log("类的静态方法 speak");
    }
}
// 子类
class Coder extends Person {
    constructor(name, sex) {
        super(name, sex);
        this.say = function () {
            console.log("大家好!!!!!!!!!!!!!!!!!!!");
        };
    }
    speak() {
        console.log("实例方法 speak !!!!!!!!!!!!!");
    }
    static speak() {
        console.log("类的静态方法 speak !!!!!!!!!!!!!!!!");
    }
}
const xiaoming = new Coder("小明", "男");
console.log(xiaoming.name);//小明
console.log(xiaoming.sex);//男
xiaoming.say();//大家好!!!!!!!!!!!!!!!!!!!
xiaoming.speak();//实例方法 speak !!!!!!!!!!!!!
Coder.speak();//类的静态方法 speak !!!!!!!!!!!!!!!!

 

• 子类新增自己的方法和属性

// 父类
class Person {
    // 构造函数
    constructor(name, sex) {
        this.name = name;
        this.sex = sex;
        this.say = function () {
            console.log("大家好");
        };
    }
    speak() {
        console.log("实例方法 speak");
    }
    static speak() {
        console.log("类的静态方法 speak");
    }
}
// 子类
class Coder extends Person {
    constructor(name, sex, hobby) {
        //this必须要在super下面！！！
        super(name, sex);
        this.hobby = hobby;
        this.say = function () {
            console.log("大家好!!!!!!!!!!!!!!!!!!!");
        };
    }
    speak() {
        console.log("实例方法 speak !!!!!!!!!!!!!");
    }
    static speak() {
        console.log("类的静态方法 speak !!!!!!!!!!!!!!!!");
    }
    work() {
        console.log("要想健康又长寿, 抽烟喝酒996, 晚睡晚起不锻炼, 多与异性交朋友");
    }
}
const xiaoming = new Coder("小明", "男", "加班");
console.log(xiaoming.hobby);//加班
xiaoming.work(); //要想健康又长寿, 抽烟喝酒996, 晚睡晚起不锻炼, 多与异性交朋友

 

• super：作为函数使用，代表父类的构造方法，只能用在子类的构造方法中（在静态方法中，super指向的是类；在非静态方法中，super指向的是对象）

super内部的this指向子类的实例
class Person {
    constructor() {
        console.log(this);
    }
}
class Coder extends Person {
    constructor() {
        super();
    }
}
new Person();//Person{}
new Coder();//Coder{}

如果作为对象，在构造方法中使用，代表父类的原型对象Person.prototype
class Person {
    constructor() {}
    say() {
        console.log("hello");
    }
}
class Coder extends Person {
    constructor() {
        super();
        super.say();//相当于Person.say()
    }
}
new Coder();//hello

借助super，在父类的方法上做修改，而不是覆盖重写
class Person {
    say() {
        console.log("你好啊");
    }
}
class Coder extends Person {
    say() {
        super.say();
        console.log("我可以用一下你的代码吗?");
    }
}
new Coder().say();

 

• super注意事项

　　　　子类不写constructor的情况下可以不写super，子类中若有constructor，则必须加super