js css html

Class 类

2022-07-18  本文已影响0人  5cc9c8608284

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 = "你好";
上一篇下一篇

猜你喜欢

热点阅读