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: ƒ}