FE_JS class定义及使用

什么是class? 程序中专门集中保存一种类型的所有子实例的统一属性结构和方法定义的程序结构。如何定义class？js 的原生的定义方式：

    function Student(name,age){
    
    
      this.name= name ;
      this.age = age;
    }
    Student.prototype.intr= function(){
    
    
        console.log(`我叫${
      
      this.name};我今年${
      
      this.age}岁`)
    }
    var person = new Student('张三',18)
    person.intr(); //我叫张三;我今年18岁

在这里插入图片描述

使用class定义：

用class{}包裹原构造函数 + 原型对象方法
原构造函数名升级为整个class的名字，所有构造函数统一更名为constructor
原型对象中的方法，不用再加prototype前缀，也不用=function，直接简写为: 方法名(){ … …}

    class Student {
    
    
        constructor(name, age) {
    
    
            this.name = name;
            this.age = age;
        }

        intr() {
    
     // 自动放入原型对象中
            console.log(
                `我叫${
      
      this.name}, 我${
      
      this.age}岁`);
        }
    }

    var person = new Student('张三', 18)
    person.intr(); //我叫张三;我今年18岁

在这里插入图片描述
问题：在class{}内的方法定义保存在哪里？结果：都保存在原型对象上；其本质都是一样的，打印person 之后出现的数据结构都是一样的。

问题：如果多个子对象共用的相同的属性值，应该放在那里？该如何访问
共有属性放置：static className=“高一（2）班”
共有属性访问：Student.className

class{
    
    
    constructor(name, age) {
    
    
        this.name = name;
        this.age = age;
      }
    static className="高一（2）班"  // static 共有属性名=属性值
    intr() {
    
     // 自动放入原型对象中
        console.log(
          `我叫${
      
      this.name}, 我${
      
      this.age}岁`,${
    
    Student.className});
      }
    }
}

class 中 extends 和 super 的使用：

    class people {
    
    
        constructor(name, sex, age) {
    
    
            this.name = name;
            this.sex = sex;
            this.age = age;
        }

        peopleAction() {
    
    
            console.log(`我叫${
      
      this.name},我是${
      
      this.sex},我今年${
      
      this.age}岁`)
        }
    }

    class men extends people {
    
    
        constructor(name, sex, age, noBirthBaby) {
    
    
            super(name, sex, age)
            this.noBirthBaby = noBirthBaby;
        }

        action() {
    
    
            console.log(`我叫${
      
      this.name},我是${
      
      this.sex},我今年${
      
      this.age}岁,我${
      
      this.noBirthBaby}生娃`)
        }
    }

    var tom = new men('Tom', '男', '5', '不会')
    tom.peopleAction() //我叫Tom,我是男,我今年5岁 --使用父类的方法
    tom.action()  //我叫Tom,我是男,我今年5岁,我不会生娃

    var Mill = new men('Mill', '女', '21', '会')
    Mill.action() //我叫Mill,我是女,我今年21岁,我会生娃

FE_JS class定义及使用

猜你喜欢