lovecoding
/
W250511


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">hello world</div>
    <script>
        // 事件绑定中的 this 指向 事件源
        // let oBox = document.querySelector("#box");
        // oBox.onclick = function(){
        //     console.log(this);
        // }
        // // 全局中的 this 指向 window
        // console.log(this);

        // 一般情况下this都是应用在函数内部的
        // this 谁调用的函数 this一般就是指向谁


        // 普通函数的this
        // function fn(){
        //     console.log(this);
        // }
        // // fn();
        // window.fn();

        // 对象中的方法
        // let obj = {
        //     name:"张三",
        //     age:18,
        //     sex:"男",
        //     talk:function(){
        //         console.log(this.name);
        //     }
        // }
        // obj.talk();

        // 箭头函数中的this
        // 箭头函数中的this 指向的是 定义时的上下文 而不是调用时的上下文
        // var obj = {
        //     name:"张三",
        //     age:18,
        //     sex:"男",
        //     talk:()=>{
        //         console.log(this);
        //     }
        // }
        // obj.talk();

        // let obj = {
        //     name:"张三",
        //     age:18,
        //     sex:"男",
        //     talk:function(){
        //         function fn(){
        //             console.log(this)
        //         }
        //         fn();
        //     }
        // }
        // obj.talk();


        // 修改this指向
        // call() apply() bind()
        // call
        // var obj = {
        //     name:"张三",
        //     age:18,
        //     sex:"男"
        // }
        // var age = 20;
        // function fn(){
        //     // this 指向的 window
        //     console.log(this.age)
        // }
        // fn()

        // call 方法   
        // call 可以改变当前函数默认this指向
        // call 第一个参数 是改变后的this指向 让this指向谁
        // call 从第二个参数开始是要传递的参数
        // var obj = {
        //     name:"张三",
        //     age:18,
        //     sex:"男"
        // }
        // var age = 20;
        // function fn(a,b){
        //     // this 指向的 window
        //     console.log(this.age)
        //     console.log(a+b);
        // }
        // fn.call(obj,1,2)


        // apply 方法
        // apply 方法和call方法基本相同
        // 唯一的区别就是 apply 方法只有两个参数
        // 第一个参数 是改变后的this指向 让this指向谁
        // 第二个参数 是一个数组 数组中的元素是要传递的参数
        // var obj = {
        //     name:"张三",
        //     age:18,
        //     sex:"男"
        // }
        // var age = 20;
        // function fn(a,b){
        //     // this 指向的 window
        //     console.log(this.age)
        //     console.log(a+b);
        // }
        // fn.apply(obj,[1,2])

        // bind 方法
        // bind 方法和call \ apply 不同地方
        // bind 方法不会调用函数 而是返回一个新的函数
        // 返回的心函数是已经绑定好this的函数
        // bind 参数部分跟call 方法参数部分是一样的 
        // var obj = {
        //     name:"张三",
        //     age:18,
        //     sex:"男"
        // }
        // var age = 20;
        // function fn(a,b){
        //     // this 指向的 window
        //     console.log(this.age)
        //     console.log(a+b);
        // }
        // var fn2 = fn.bind(obj,1,2);
        // fn2();
    </script>
</body>
</html>