72-ES6类和对象

1. 在ES6之前如何定义一个类?

• 通过构造函数来定义一个类

      function Person(myName, myAge) {
          // 实例属性
          // this.name = "lnj";
          // this.age = 34;
          this.name = myName;
          this.age = myAge;
          // 实例方法
          this.say = function () {
              console.log(this.name, this.age);
          }
  
          // 静态属性
          Person.num = 666;
          // 静态方法
          Person.run = function () {
              console.log("run");
          }
      }
      // let p = new Person();
      // p.say(); // lnj 34
      let p = new Person("zs", 18);
      p.say();    // zs 18
      console.log(Person.num);
      Person.run();   // run
  

2. 在ES6开始如何定义一个类?

• 从ES6开始系统提供了一个名称叫做 class 的关键字, 这个关键字就是专门用于定义类的

      class Person{
          // 当我们通过new创建对象的时候, 系统会自动调用constructor
          constructor(myName, myAge){ // 构造方法
              this.name = myName;
              this.age = myAge;
          }
          // 实例属性
          // name = "lnj";
          // age = 34;
          // 实例方法
          say(){
              console.log(this.name, this.age);
          }
  
          // 静态属性
          static num = 666;
          // 静态方法
          static run() {
              console.log("run");
          }
      }
      // let p = new Person();
      // p.say(); // lnj 34
      let p = new Person("zs", 18);
      p.say();    // zs 18
      // console.log(Person.num);
      // Person.run();   // run
  

3. 类和对象注意点

注意点1: 在ES6标准中添加实例属性都需要在constructor中添加

      class Person{
          // 注意点1:以下定义"实例属性"的方式并不是ES6正版标准中的写法, 大部分浏览器不支持
          // 在ES6标准中添加实例属性都需要在constructor中添加
          // 实例属性
          // name = "lnj";
          // age = 34;
          constructor(){
              this.name = "lnj";
              this.age = 34;
          }
      let p = new Person();
      console.log(p);  // Person {name: "lnj", age: 34}

注意点2: 在ES6标准中static只支持定义静态方法不支持定义静态变量

      class Person{
          // 注意点2: 以下定义"静态属性"的方式并不是ES6正式版标准中的写法, 大部分的浏览器不支持
          // 在ES标准中static只支持定义静态方法不支持定义静态变量
          // 静态属性
          // static num = 666;    // 这样定义静态属性在有些浏览器中会报错

          // 静态方法
          static run(){
              console.log("run");
          }
      }
      // 必须通过外部动态添加静态属性
      Person.num = 666;

      let p = new Person();
      console.log(p);  // Person {}

注意点3: 在ES6中如果想给实例对象添加实例方法, 那么必须将实例方法写到constructor构造方法中

      class Person{
          constructor(myName, myAge){ // 这里的代码相当于ES6之前在构造函数中的代码
              this.name = myName;
              this.age = myAge;
              // 实例方法
              this.hi = function () {
                  console.log("hi");
              }
          }
          // 在这里写方法会默认保存到原型对象中
          say(){  // 这里的代码相当于ES6之前给原型对象添加的代码
              console.log("say");
          }
      }
      let p = new Person("lnj", 34);
      console.log(p);  // Person {name: "lnj", age: 34, hi: ƒ}

4. 如何在原型对象中保存属性和方法

• 在ES6之前如何在原型对象中保存属性和方法
  • 1. 动态的给原型对象添加属性和方法

      function Person(myName, myAge) {
          // 实例属性
          this.name = myName;
          this.age = myAge;
          // 实例方法
          this.hi = function () {
              console.log("hi");
          }
      }
    
      // 动态的给原型对象添加属性和方法
      Person.prototype.type = "人";
      Person.prototype.say = function () {
          console.log(this.name, this.age);
      }
    
    
      let p = new Person("lnj", 34);
      console.log(Person.prototype);  // {constructor: ƒ, type: "人", say: ƒ}
    

  • 2. 自定义原型对象

      function Person(myName, myAge) {
          // 实例属性
          this.name = myName;
          this.age = myAge;
          // 实例方法
          this.hi = function () {
              console.log("hi");
          }
      }
    
      // 2.自定义原型对象
      Person.prototype = {
          constructor: Person,
          type: "人",
          say: function () {
              console.log(this.name, this.age);
          }
      }
    
      let p = new Person("lnj", 34);
       console.log(Person.prototype);  // {constructor: ƒ, type: "人", say: ƒ}
    

• 在ES6开始如何在原型对象中保存属性和方法
  • 1. 动态的给原型对象添加属性和方法

      class Person{
          constructor(myName, myAge){
              this.name = myName;
              this.age = myAge;
              this.hi = function () {
                  console.log("hi");
              }
          }
      }
      // 1.动态的给原型对象添加属性和方法
      Person.prototype.type = "人";
      Person.prototype.say = function () {
          console.log(this.name, this.age);
      }
    
      let p = new Person("lnj", 34);
       console.log(Person.prototype);  // {constructor: ƒ, type: "人", say: ƒ}
    

  • ES6中如果是通过class创建的类, 不能自定义原型对象

      class Person{
          constructor(myName, myAge){
              this.name = myName;
              this.age = myAge;
              this.hi = function () {
                  console.log("hi");
              }
          }
      }
      // 2.ES6中如果是通过class创建的类, 不能自定义原型对象
      let obj = {
          constructor: Person,
          type:"人",
          say: function () {
              console.log(this.name, this.age);
          }
      }
      Person.prototype = obj;
    
      console.log(Person.prototype);  // {constructor: ƒ}