lovecoding
/
VIP32


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./babel.min.js"></script>
    <script src="./react.development.js"></script>
    <script src="./react-dom.development.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        const root = ReactDOM.createRoot(document.getElementById("root"));
        let aa = <h1>111</h1>
        // 1.监听器的this 实际开发时  是在类组件中
        // 2.类数组中 绑定事件时 => this.xxx 此时 事件的this指向是undefined
        // 3.修改this指向：bind apply call 
        function  Goods() {
            function handleClick() {
                let aa = '12';
                aa = 22;
                console.log("点击了1",aa)
            }
            return <button onClick={handleClick}>你好哈哈哈</button>;
        }
        class Good extends React.Component {
            
            constructor() {
                super();
                this.state = {
                    hi:"你好啊"
                }
                this.handleClick = this.handleClick.bind(window);
            }
            handleClick() {
                console.log("点击了",this)
                this.setState({
                    hi:"你好，世界" 
                })
            }
            render() {
                return <button onClick={this.handleClick}>{this.state.hi}</button>;
                // return <button onClick={this.handleClick.bind(this)}>{this.state.hi}</button>;
            }
        }
        root.render(<Goods />);
        // let obj = {
        //     fn1() {
        //         console.log('fn1',this);
        //         return 1;
        //     },
        //     aa: 12
        // }
        // obj.fn1(); //指向对象

        // let a = obj.fn1;
        // a(); // undefined

        // a.call(window); 

    </script>
</body>
</html>