Class 类

藏宝库编辑 2024-9-19 20:33:32 174 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 = "你好";
您需要登录后才可以回帖 登录 | 立即注册

Powered by CangBaoKu v1.0 小黑屋藏宝库It社区( 冀ICP备14008649号 )

GMT+8, 2025-4-19 19:13, Processed in 0.133717 second(s), 32 queries.© 2003-2025 cbk Team.

快速回复 返回顶部 返回列表