react中类的基本知识&原型链

类的基本知识

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery.js"></script>
</head>
<body>
    <script type="text/javascript">
        // 创建一个类
        class Person {
            // 如果想要接住new传过来的参数 有借助构造器 构造属性和方法
            constructor (name,age) {
                // 构造器中的this 指向的是实例化对象p1或p2
                this.name=name
                this.age=age
            }
            // 一般方法 就是除了构造方法以为 程序员根据业务需求编写的代码
            speak(){
                //  speak方法放在了类的原型对象上，供实例使用
                //   通过Person实例调用的speak，则speak中的this指向的是person实例
                // 注意这里运用的是字符串模板
                console.log(`我是${this.name},我的年龄是${this.age}`);
            }
        };
        // 调用类
        const p1=new Person("tom",18);
        console.log(p1);
        p1.speak();
        // call改变函数的this指向
        p1.speak.call({a:1,b:2})
    </script>
</body>
</html>

类的继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery.js"></script>
</head>
<body>
    <script type="text/javascript">
        // 创建一个Person类
       class Person{
           constructor(name,age) {
               this.name=name;
               this.age=age;
           }
           speak(){
               console.log(`我是${this.name},年龄是${this.age}`);
           }
       }
        // 创建一个Student类，继承Person类(extends)
        class Student extends Person{
            // 继承中的构造器不用必须写，构造器可以写Student中特有的
            constructor(name,age,grade) {
                // super是在类，继承类，构造器三者又存在的基础上使用的，使用时必须放在特有属性的上面，super是是继承Person类的构造器
                super(name,age)
                this.grade=grade
                // 所有有student缔造的实例都含有一个属性，名：school，值：尚硅谷
                this.school= '尚硅谷'
            }
            speak(){
               console.log(`我是${this.name},年龄是${this.age},我现在上${this.grade}`);
           }
           study(){
               console.log('一起学前端');
           }
        }
        const s1 = new Student('seven',19,'大一');
        console.log(s1);
        s1.speak();
        s1.study()
    </script>
</body>
</html>

总结：

类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性是采写。
如果A类继承了B类，且A类中写了构造器，则A类构造器中的super就必须调用
类中所有定义的方法，都是放在类的原型对象上，供实例使用

原型链

是什么

原型链就是实例对象和原型对象之间的链接，每一个函数都有一个prototype属性，这个prototype属性就是原型对象。

用这个函数通过new构造函数创建出来的实例对象，这个实例对象自己会有一个指针(proto_)指向它的构造函数的原型对象，这样构造函数和实例对象之间就通过____proto__连接在一起形成原型链

为什么

为了实现继承，简化代码，实现代码重用
只要是这一条链上的内容都可以被访问和使用到