es5、es6的”类“

<script>
    // es5的语法实现
    function Person1(name, age) {
        this.name = name;
        this.age = age;
    }

    Person1.prototype.run = function () {
        console.log('running')
    }
    console.log(Person1)
    // 输出结果，直接返回函数定义
    /*ƒ Person1(name,age){
        this.name =name;
        this.age =age;
    }*/

    console.log(Person1.prototype);
    // 输出结果，返回函数prototype指向的函数原型对象。
    // （每个函数被解析时，解析器都会隐式添加一个prototype属性，指向函数原型对象，该对象初始内容只包含一个键值对： constructor: f () ，后续通过构造函数的prototype属性添加的内容，将会以键值对的形式出现在该对象中)
    /*{constructor: ƒ}*/

    const p1 = new Person1('张三', 20)
    console.log(p1)
    // 输出结果，返回一个实例对象，包含的键值对内容就是构造函数中含有的，该实例对象有一个隐式__proto__属性，指向Person1.prototype
    /*Person1 {name: '张三', age: 20}*/

    p1.run()
    // 输出结果running,实例对象本身是没有run方法的，实例对象是按照构造函数模板来实例化的，能访问到该方法是因为存在原型链
    /*running*/

    // es6语法实现
    class Person2 {
    }

    console.log((typeof Person2));  //function,本质还是一个函数

    console.log(Person2)
    // 输出结果，返回定义
    /*class Person2 {
    }*/

    console.log(Person2.prototype)
    //输出结果，说明两个事情，第一，prototype属性仍然存在，第二，即使类中没有定义constructor方法，原型默认有一个键值对，且key的value值指向类定义
    /*{constructor: ƒ}*/

    class Person3 {
        name;
        age;
    }

    console.log(Person3)
    // 输出结果，返回定义
    /*class Person3 {
        name;
        age;
    }*/

    class Person4 {
        //定义在类顶部的属性，是实例属性,但注意不要加this
        score = 90;

        //class中所有的方法都是添加在原型链上面的
        constructor(name, age) {
            //constructor中的this紧跟的变量也为实例属性，不在原型链上
            this.sex = 'male';
            this.name = name;
            this.age = age
        }

        swim() {
            console.log('swimming')
        }

        //由于添加了static关键字，该方法（属性名同理）不会出现在实例中，也不会出现在原型链上。只能通过类名.方法名调用；如果该方法中存在this，this指向该类，即this等价与Person4，不是指向实例对象
        static log() {
            console.log('我是静态的')
        }
    }

    console.log(Person4) //返回class Person4的定义
    const p4 = new Person4('zhangsan', 20) //score是实例属性,swim()是原型链上面的方法，即等价与Person4.prototype.swim=function(){},new的过程就是调用constructor方法
    console.log(p4)
    // 输出结果，包含实例属性和constructor中涉及的内容
    /* Person4 {score: 90, name: 'zhangsan', age: 20}*/

    //    注意。Person4的prototype属性仍然存在，且有该关系：Person4 === Person4.prototype.constructor 它们值输出就是类的定义
    console.log(Person4.prototype)
    // 输出结果，包含且仅包含class中定义的所有方法，因为class中定义的所有方法都是定义在原型链上，即Person4.prototype上
    /*{constructor: ƒ, swim: ƒ}*/

</script>