this、apply、call、bind关键字

发布日期: 2021-05-20
文章字数: 1.1k
阅读时长: 5 分
<!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>
</head>

<body>
    <script>
let obj = {
    a:{
        b:function(){
            console.log(this);
            (()=>{
                console.log(this);
                
            })()
            function last(){
                console.log(this);
                
            }
            last();
        }
    }
}
obj.a.b();// obj.a  obj.a  window

        //this指向
        //第一、this 永远指向最后调用它的那个对象

        // //函数
        // var name = "windowsName";
        // function a() {
        //     var name = "Cherry";

        //     console.log(this.name);          // windowsName

        //     console.log("inner:" + this);    // inner: Window
        // }
        // a();
        // console.log("outer:" + this)         // outer: Window


        // //对象1
        // var name = "windowsName";
        // var a = {
        //     name: "Cherry",
        //     fn: function () {
        //         console.log(this.name);      // Cherry
        //     }
        // }
        // a.fn();


        // //对象2
        // var name = "windowsName";
        // var a = {
        //     name: null,
        //     fn: function () {
        //         console.log(this.name);      // windowsName
        //     }
        // }


        ////对象3
        // var name = "windowsName";
        // var a = {
        //     // name: "Cherry",
        //     fn: function () {
        //         console.log(this.name);      // undefined
        //     }
        // }
        // window.a.fn();




        // //对象函数赋值新变量
        // //虽然赋值了却没有被a变量调用，而是被f调用
        // var name = "windowsName";
        // var a = {
        //     name: null,
        //     fn: function () {
        //         console.log(this.name);      // windowsName
        //     }
        // }

        // var f = a.fn;
        // f();



        //嵌套函数
        // // 红宝书里有句原话：
        // // 每个函数在被调用时都会自动创建2个特殊变量：
        // // this和arguments。
        // // 内部函数永远不可能直接访问外部函数的这两个变量。
        // var name = "windowsName";
        // function fn() {

        //     var name = 'Cherry';

        //     var innerFunction = function () {

        //         console.log(this.name);//windowsName
        //     }

        //     innerFunction();
        // }

        // fn()
        // //调用是window.fn() 不是window.fn.innerFunction();


        // //这里才是被函数里的对象调用
        // function fn() {
        //     var q = {
        //         c: function () {
        //             console.log(this);
        //         }
        //     }
        //     q.c();
        // }
        // fn()


        /**
         * 由以上五个例子我们可以看出，this 的指向并不是在创建的时候就可以确定的，在 es5 中，
         * 永远是this 永远指向最后调用它的那个对象。
         * */

        //第二、
        //使用 ES6 的箭头函数
        //在函数内部使用 _this = this
        //使用 apply、call、bind
        //new 实例化一个对象


        // //异步函数settimrout
        // //最后调用 setTimeout 的对象是 window，但是在 window 中并没有 func1 函数。
        // var name = "windowsName";

        // var a = {
        //     name: "Cherry",

        //     func1: function () {
        //         console.log(this.name)
        //     },

        //     func2: function () {
        //         setTimeout(function () {
        //             this.func1()
        //         }, 100);
        //     }

        // };

        // a.func2()     // this.func1 is not a function



        // 众所周知，ES6 的箭头函数是可以避免 ES5 中使用 this 的坑的。
        // 箭头函数的 this 始终指向函数定义时的 this，而非执行时。
        // 箭头函数需要记着这句话：“箭头函数中没有 this 绑定，必须通过查找作用域链来决定其值，
        // 如果箭头函数被非箭头函数包含，则 this 绑定的是最近一层非箭头函数的 this，否则，this 为 undefined”。
        // 箭头函数的应用

        // var name = "windowsName";

        // var a = {
        //     name: "Cherry",

        //     func1: function () {
        //         console.log(this.name)
        //     },

        //     func2: function () {
        //         setTimeout(() => {
        //             this.func1()
        //         }, 100);
        //     }

        // };

        // a.func2()     // Cherry


        // //第三、
        // //定义_this
        // var name = "windowsName";

        // var a = {

        //     name: "Cherry",

        //     func1: function () {
        //         console.log(this.name)
        //     },

        //     func2: function () {
        //         let _this = this;
        //         setTimeout(function () {
        //             _this.func1()
        //         }, 100);
        //     }

        // };

        // a.func2()       // Cherry


        // //第四、使用apply

        // var a = {
        //     name: "Cherry",
        //     zhenshi: 'zxc',
        //     func1: function () {
        //         console.log(this.name)
        //     },

        //     func2: function () {

        //         //①基本使用
        //         setTimeout(function () {
        //             console.log(this);//指向a
        //         }.apply(a), 100);

        //         //②传参
        //         setTimeout(function (name, age) {
        //             console.log(this);//指向a
        //             console.log(name);//周贵宏
        //             console.log(age)//18
        //         }.apply(a, ['周贵宏', 18]), 100);

        //         // 原始值（数字，字符串，布尔值）的 this 会指向该原始值的自动包装对象
        //         setTimeout(function () {
        //             console.log(this);//指向该原始值number自动包装对象
        //         }.apply(numberc), 100);


        //         // null 或 undefined 时会自动指向全局对象window
        //         setTimeout(function () {
        //             console.log(this);//指向该原始值number自动包装对象
        //         }.apply(nulla), 100);


        //     }

        // };
        // var numberc = 2;
        // var nulla = null;
        // a.func2();// Cherry


        // //第五、使用 call

        // var a = {
        //     name: "Cherry",

        //     func1: function () {
        //         console.log(this.name)
        //     },

        //     //基本使用
        //     func2: function () {
        //         setTimeout(function () {
        //             this.func1()
        //         }.call(a), 100);
        //     }

        //     //传参
        //     func2: function () {
        //         setTimeout(function (name, age) {
        //             this.func1()
        //             console.log(name)
        //             console.log(age)
        //         }.call(a, '周先生', 18), 100);
        //     }

        // };
        // a.func2();// Cherry


        //第六、使用 bind
        // bind() 方法创建一个新的函数，在 bind() 被调用时，
        // 这个新函数的 this 被指定为 bind() 的第一个参数，
        // 而其余参数将作为新函数的参数，供调用时使用。

        // var a = {
        //     name: "Cherry",

        //     func1: function () {
        //         return {
        //             c: 22,
        //         }
        //     },

        // //基本使用
        // func2: function () {
        //     setTimeout(function () {
        //         console.log(this.c)
        //     }.bind(a.func1()), 100);
        // }

        // //传参
        // func2: function () {
        //     setTimeout(function (name, age) {
        //         console.log(this.c)
        //         console.log(name);
        //         console.log(age);
        //     }.bind(a.func1(), '周贵宏', 18), 100);
        // }


        //正常情况bind要加()调用,现在存在settimeout可不用
        // }.bind(a.func1())(), 100);


        // };

        // a.func2()            // Cherry


        // var a = {
        //     name: "Cherry",
        //     fn: function (a, b) {
        //         console.log(a + b)
        //     }
        // }

        // var b = a.fn;
        // //需要调用
        // b.bind(a, 1, 2)()         // 3














    </script>
</body>

</html>