JS类—class

典型的面向对象编程语言（比如C++和Java）存在类（class）这个概念。所谓类就是对象的模板，对象是类的实例

JS中没有类，在ES5中使用构造函数（constructor）作为对象的模板。但是ES5中实现继承的代码非常冗长与混乱（盗用构造函数、组合继承、原型式继承等等），因此在ES6中新引入了class关键字具有了正式定义类的能力

　　类（class）是ECMAScript中新的基础性语法糖结构。其背后使用的仍然是原型和构造函数的概念

1.类定义

class Person {}
const Person = class {}

 说明：

• class声明不存在变量提升：

  • console.log(classDemo);
    class classDemo {};        // var_let_const.html:12 Uncaught ReferenceError: Cannot access 'classDemo' before initialization

• 函数受函数作用域限制，而类受块作用域限制：

  •         {
                class classDemo { };
            }
    
            console.log(classDemo);        // var_let_const.html:16 Uncaught ReferenceError: classDemo is not defined

• 类名首字母同函数构造函数一样，建议类名首字母大写

2.类构造函数

constructor关键字用于在类定义块内部创建类的构造函数。方法名constructor会告诉解释器在使用new操作符创建类的新实例时，应该调用这个函数。

构造函数非必须，不定义相当于构造函数为空

示例：

        class Person { 
            constructor(override){
                console.log("我是一个人")
            }
        };

        let p1 = new Person()        // 我是一个人

 （1）使用new实例化类

　　使用new实例化的操作等于使用new调用其构造函数，new执行的操作有：

• 在内存中创建一个新对象
• 这个新对象内部的__proto__属性赋值为构造函数的prototype属性
• 构造函数内部的this被赋值为这个新对象（this指向了新对象）
• 执行构造函数内部的代码
• 如果构造函数返回非空对象，则返回该对象，否则返回刚创建的新对象

说明：

• 类实例化时传入的参数会用作构造函数的参数。如果不需要参数，则类名后面的括号是可选的
• 类构造函数与构造函数的主要区别在于：
  • 调用类构造函数必须使用new操作符。不使用new则会抛出错误（Uncaught TypeError: Class constructor Person cannot be invoked without 'new'）
  • 而普通构造函数如果不使用new调用，那么就会以全局的this（window）作为内部对象

（2）把类当成特殊函数

JS中并没有正式的类这个类型。从各方面看，ECMAScript的类就是一种特殊的函数。可以使用typeof 检测表明它是一个函数：

        class Person { };

        console.log(typeof Person);    // function

• 可以使用instanceof操作符检查一个对象是不是类的实例：

        class Person {};

        let p = new Person()

        console.log(p instanceof Person);    // true

• 类也可以向其他对象或者函数引用一样把类作为参数传递

        let pList = [
            class Person {
                constructor ( id ){
                    this._id = id
                    console.log("类作为参数:",this._id)
                }
            }
        ]

        function createIns( classDefinition, id ){
            return new classDefinition(id)
        }

        let foo = createIns(pList[0],1234)    // 类作为参数: 1234

•  类还可以立即实例化

        let foo = new class Person {
            constructor(id) {
                console.log("立即实例化对象")
            }
        }

3.实例、原型和类成员

每次通过new调用类标识符时，都会执行类构造函数，在这个函数内部，可以为新创建的实例（this）添加自有属性。且构造函数执行完毕以后，仍然可以给实例继续添加新成员。

（1）实例成员

每个实例都对应一个唯一的成员对象，即所有成员都不会在原型上共享：

        class Person {
            constructor(id) {
                this.name = new String('Jack')

                this.sayName = () => console.log(this.name);

                this.nickNames = ['张三','李四']
            }
        }

        let p1 = new Person(),p2 = new Person();

        p1.sayName();    // Jack
        p2.sayName();    // Jack
        console.log(p1.name === p2.name); // false
        console.log(p1.sayName === p2.sayName); // false
        console.log(p1.nickNames === p2.nickNames); // false

（2）原型方法与访问器

为了在实例间共享方法，类定义语法把在类块中定义的方法作为原型方法

        class Person {
            constructor() {
                // 存在这个类的不同的实例上
                this.locate = () => console.log("instance");
            }
            // 在类块中定义的所有内容都会定义在类的原型上
            locate() {
                console.log("prototype");
            }
        }

        let p = new Person()

        p.locate()    // instance
        Person.prototype.locate()    // prototype

• 可以把方法定义在类构造函数中或者类块中，但不能在类块中给原型添加原始值或对象作为成员数据

        class Person {
            name: '张三'
        }
        // Uncaught SyntaxError: Unexpected identifier

• 类方法等同于对象属性，因此可以使用字符串、符号或计算的值作为键

        let funName = "fn02"

        class Person {
            
            fn01(){
                console.log("字符串属性名");
            }

            [funName](){
                console.log("变量属性名");
            }

            ['fn' + '03'](){
                console.log("计算属性名");
            }

        }
        
        let p = new Person()
        p.fn01()    // 字符串属性名
        p.fn02()    // 变量属性名
        p.fn03()    // 计算属性名

• 类定义也支持get与set访问器：

        class Person {

            set name(newName){
                console.log("设置新值为：",newName);
                this._name = newName
            }
            
            get name(){
                console.log("读取到新值：",this._name);
                return this._name
            }

        }
        
        let p = new Person()
        p.name = "张三"        // 设置新值为： 张三
        p.name    // 读取到新值： 张三

 （3）非函数原型和类成员

类定义并不显式支持在原型或类上添加成员数据，但是可以在类定义外部手动添加：

        class Person {

            sayName() {
                console.log(`${ Person.greeting }${ this.name }`);
            }

        }
        // 在类上定义数据成员
        Person.greeting = ' 我的名字是'
        // 在原型上定义数据成员
        Person.prototype.name = '张三'
        
        let p = new Person()
        p.sayName()    // 我的名字是张三