前端知识点复盘

news2025/5/26 7:17:00

组件和jsx

<body>
    <div id="root"></div>
    <script type="text/babel">
        const root = ReactDOM.createRoot(document.getElementById("root"))
        class App extends React.Component {
            render() {
                return (
                    <div> <h1>sherry</h1>
                        <input type="search" />
                    </div>

                )
            }
        }
        root.render(<App />)

    </script>
</body>

箭头函数

普通函数： function（）{}
箭头函数（）=>{}
只有一个参数的时候我们不需要为参数添加上括号，只有一个表达式的时候可以不添加大括号，箭头函数会自动返回箭头后面的处理结果
1.箭头函数不能用new来创建构造函数的实例，普通函数可以（因为箭头函数创建的时候程序不会为它创建construct方法，也就是没有构造能力，用完就丢掉了，不像普通函数重复利用，因此也不需要构造函数原型，也就是不会自动生成prototype属性）
2.程序不会给箭头函数创建arguments对象
3.普通函数中的this是动态的，而箭头函数中的this指向的是紧紧包裹箭头函数的那个对象（定义时决定的）
4.箭头函数不能通过bind、call、apply来改变this的值，但依然可以调用这几个方法（只是this的值不受这几个方法控制）
在这里插入图片描述

插值与状态

map

map
直接写state也行，用constructor写state也行

class 类

class和new

class App{}
class首字母小写，类名首字母大写
创建实例var xx = new name();

类 constructor 构造函数

创建类–类名后面不要加小括号，生成实例–类名后面加小括号，构造函数不需要加 function 关键字

自定义方法

不需要加function关键字，不需要this

extends和super

static

静态方法
类里面的this指向：
constructor 里面的 this指向实例对象
方法里面的this指向这个方法的调用者
静态方法里的this指向类本身，用类来调用静态方法，而不是用实例去调用静态方法。一个静态方法可以调用另一个静态方法
凡是被static修饰的属性和方法都是静态方法和属性,只能被类名调用,不能被实例化对象调用.同时也不能被子类继承,换句话说它属于当前这个类的.
static