React-class-extends-类和函数的区别/类的执行原理

class类的基础知识回顾

类和函数的区别

new 调用函数的执行顺序=>类的执行原理

new调用函数修改返回值

总结：类中的注意事项

实例和类的关系判断

---

class类的基础知识回顾

<script>  
    // class基础知识回顾
    class A{
        constructor(props){
            console.log('A',props);
            this.x = props
        }

        getX(){
            console.log(this.x);
        }
    }
    class B extends A{
        constructor(props){
            super(props)//super调用父类
            console.log('B',props);
            // B实例添加私有属性
            this.y = 200;
        }
        // 实际上是
        getY(){
            console.log(this.y);
        }
    }
    // b是实例
    let b = new B(100)
    console.log(b.x);//100
    console.log(b);

    console.log(B.prototype);
    console.log(b.__propto__);
    console.log(B.prototype===b.__proto__);//输出true
    console.log(B.prototype.getY);
    </script>

探究其中原因：

类和函数的区别

对象 类 实例   关系靠原型和原型链连接

类和函数的区别：本质上没有区别，类是特殊的函数，调用方式不同

(类：类将行为和状态打包在一起，即对象是类的具体实体，一般称为“类的实例”。从一个类创建对象时，每个对象会共享这个类的行为（类中定义的方法），但会有自己的属性值（不共享状态）。更具体一点：“方法代码是共享的，属性数据不共享”。)

<script>
      
        // 函数执行
        function f(){
            console.log(this);//window
            let a = 10
            this.b = a+10//window.b
        }
        // 类也是一种函数，是一种特殊的函数
        // 调用方式不同
        function c(){
            console.log(this);//this指向c 指向实例
            let a = 10
            this.b = a + 10//在c实例上追加了一个b属性 {b:20}
        }
        // 函数调用的方式不同，函数执行的方式就不同
        // new 关键字 变成类的执行方式
        let c1 = new c()
        console.log(c1);
    </script>

new 调用函数的执行顺序=>类的执行原理

// new 调用函数的执行顺序=>类的执行原理
        function c(){
            // 01：内部执行：实例化对象 let obj = {} new c1实例本本质上就是obj
            // 02:内部执行：改变this指向，默认this指向window,让this指向声明的实例对象obj,所以this打印出来空对象obj
            //03.外部执行代码
            console.log(this);//this指向c 指向实例
            let a = 10
            this.b = a + 10//在c实例上追加了一个b属性 {b:20}
            // 内部默认返回obj
        }
        // 调用结果给c1 let c1 = {b:20}
        // new 默认返回内部对象
        // let c1 = new c()

实例化两次对象时：

function C(){
            // 在实例化对象let obj = {}时,在内存中开辟空间，生成一个营地址给c1，二次new实例时，再次生成一个营地址给c2，两地址不一致，所以c1 === c2为false
            console.log(this);//实例化对象 obj={}
            let a = 10
            this.b = a + 10//{b:20}
        }
        let c1 = new C()
        let c2 = new C()
        console.log(c1);
        console.log(c2);
        console.log(c1 === c2); 
        //输出false 每次new时，都创建一个新的实例对象，堆内存中创建两不同地址

控制台打印：

输出false 原因：每次new时，都创建一个新的实例对象，堆内存中创建两不同地址

在实例化对象let obj = { }时,在内存中开辟空间，生成一个营地址给c1，二次new实例时，再次生成一个营地址给c2，两地址不一致，所以c1 === c2为false

new调用函数修改返回值

function c(){
            console.log(this);//实例化对象
            let a = 10
            this.b = a + 10//{b:20}
            return {a:10}
        }
        let c1 = new c()
        console.log(c1);

打印出：

 

function c(){
            console.log(this);//实例化对象
            let a = 10
            this.b = a + 10//{b:20}
            // return {a:10}
            return 10
        }
        let c1 = new c()
        console.log(c1);

打印出：

总结：类中的注意事项

类中的注意事项：

如果自定义了返回数据，数据类型为引用数据类型，会覆盖默认类返回实例对象;数据类型为普通将数据类型，不会生效，返回默认的类的实例对象

数据类型：

I) 放在堆内存中：引用数据类型：也就是对象类型Object type，比如：Object 、Array 、Function 、Data等

II) 放在栈内存中：基本数据类型：数字(Number)、字符串（String）、布尔(Boolean)、空（Null）、未定义（Undefined）

实例和类的关系判断

// 怎样判断一个实例对象是属于类的
function C(){
            console.log(this);//实例化对象 obj={}
            let a = 10
            this.b = a + 10//{b:20}
        }
        let c1 = new C()
        let c2 = new C()
        
        console.log(c1 instanceof C);
        console.log(c2 instanceof C);

控制台打印：