js this学习

浅浅的花香味﹌ 2023-07-18 13:00 14阅读 0赞

this的指向是调用时决定的

this 永远指向最后调用它的那个对象

var name = "windowsName";
        function a() {
            var name = "Cherry";
            console.log(this.name);  // windowsName
            console.log(this);    // Window
        }
    a(); //window来调用的a函数，所以this指向window
    console.log(this)  // Window

谁调用的this指向谁，a2调用的this指向a2

var name2 = "windowsName";
        var a2 = {
            name2: "Cherry",
            fn : function () {
                console.log(this.name2); // Cherry
            }
        }
        a2.fn(); //对象 a2 通过 . 方法调用了其中的 fn 方法。

a3里面没有name3，所以找不到

var name3 = "windowsName";
        var a3 = {
            // name: "Cherry",
            fn : function () {
                console.log(this.name3);      // undefined
            }
        }
        a3.fn();

调用f()的是window

改变 this 的指向有以下几种方法：

使用 ES6 的箭头函数

在函数内部使用 \_this = this

使用 apply、call、bind

new 实例化一个对象

使用 apply

var a8 = {
         name8 : "Cherry",
    
         func1: function () {
             console.log(this.name8)
         },
    
         func2: function () {
             setTimeout(  function () {
                 this.func1()
              }.apply(a8),100);
            }
        };
        a8.func2() // Cherry

使用 call

var a9 = {
            name : "Cherry",
    
            func1: function () {
                console.log(this.name)
            },
            func2: function () {
                setTimeout(  function () {
                    this.func1()
                }.call(a9),100);
            }
        };
        a9.func2()   // Cherry

使用bind()

var a10 = {
            name : "Cherry",
            func1: function () {
                console.log(this.name)
            },
    
            func2: function () {
                setTimeout(  function () {
                    this.func1()
                    console.log("func10")
                }.bind(a10)(),100);
            }
        };
        a10.func2() // Cherry

bind 是创建一个新的函数，我们必须要手动去调用 才会执行

var a11 ={
            name : "Cherry",
            fn : function (a,b) {
                console.log( a + b)
            }
        }
        var b = a11.fn;
        b.bind(a11,1,2)()  // 3