Class 类

作者: 5cc9c8608284 | 来源:发表于2022-07-18 22:02 被阅读0次

    ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板,通过关键字class,可以定义类,基本上,ES6的class可以看成只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰, 更像买你想对象编程的语法而已
    知识点:
    (1)class声明类
    (2)constructor定义构造函数初始化
    (3)extends继承父类
    (4)super调用腹肌构造方法
    (5)static定义静态方法和属性
    (6)父类方法可以重写
    案例1:es5构造函数创建对象

          // ES5构造函数实例化对象
          function Person(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
          }
          //添加方法
          Person.prototype.sayName = function () {
            console.log(this.name);
          };
          //实例化对象
          let p = new Person("张三", 18, "male");
          console.log(p.sayName());
    

    案例2:es6 class创建对象

        // ES6 class 创建对象
          class Person {
            //构造函数 名字不能和修改
            constructor(name, age, sex) {
              this.name = name;
              this.age = age;
              this.sex = sex;
            }
            //添加方法
            //方法必须使用该语法 不能使用es5的对象完整形式
    
            sayHi() {
              console.log(`我是${this.name},你好啊`);
            }
          }
          let p = new Person("lisi", 18, "female");
          console.log(p.sayHi());
    

    静态成员

            //静态成员
            function Person() {}
            Person.name = "wangmei";
            Person.sayHi = function () {
              console.log("Hi");
            };
            let p = new Person();
            console.log(p.name); //undefined 也就是说实例身上是没有构造函数对象身上的属性的
            console.log(p.sayHi()); //Uncaught TypeError: p.sayHi is not a function 说明实例身上没有构造函数对象身上的方法的 实例和构造函数身上的属性是不相通的
    

    构造函数身上的属性是属于函数对象的,实例对象不能访问,对于这样的属性,我们称之为静态成员,对于class而言,被static标记的成员是属于class的,而不是实例对象的,如下所示:

          class Person {
            //静态属性
            static name = "static";
            static sayHi() {
              console.log("Hi");
            }
          }
          let p = new Person();
          console.log(p.name);//undefined
          console.log(p.sayHi);//undefined
    

    案例3:es5 实现继承

      function Person(name, age) {
            this.name = name;
            this.age = age;
          }
          //添加方法
          Person.prototype.sayHi = function () {
            console.log("Hi");
          };
          //   子类
          function Student(name, age, grade, score) {
            //通过call 让Perosn的this指向Student的实例对象 继承父类的name age属性
            Person.call(this, name, age);
            this.grade = grade;
            this.score = score;
          }
          //设置子级构造函数的原型
          Student.prototype = new Person();
          //   将子类的构造器还原
          Student.prototype.constructor = Student;
    
          //生命子类的方法
          Student.prototype.study = function () {
            console.log("I love study");
          };
          //实例化子类对象
          let s = new Student("danny", 2, 1, 100);
          console.log(s);
    

    案例4:es6 类继承

        class Person {
            //构造方法
            constructor(name, age) {
              this.name = name;
              this.age = age;
            }
            //父类的方法
            sayHi() {
              console.log(`Hi,我是${this.name}`);
            }
          }
          //   子类继承自父类
          class Student extends Person {
            constructor(name, age, grade, score) {
              super(name, age);
              this.score = score;
              this.grade = grade;
              //子类的方法
            }
            study() {
              console.log("I love Studying");
            }
            eat() {
              console.log("I love eating");
            }
          }
          //实例化子类对象
          let s = new Student("lili", 12, 3, 100);
          console.log(s.name); //lili
    

    从这两个案例可以看出,es6的类继承更简单,更切合面向对象编程,需要注意的是,如果子类中的方法父类中也定义了,那我们是无法直接调用父类的同名方法的,相当于重写了父类的方法
    案例5:es6中的get和set

      //class中的get和set
          class Person {
            get name() {
              console.log("name属性被读取了");
              return "11";
            }
            set name(newVal) {
              console.log("name属性被修改了");
            }
          }
          let s = new Person();
          console.log(s.name);
          s.name = "你好";
    

    相关文章

      网友评论

        本文标题:Class 类

        本文链接:https://www.haomeiwen.com/subject/lfysirtx.html