JS中的this

红叶何时落水

谁调用就指向谁

当一个对象调用时，this指向这个对象的首地址

    var obj = {
        name: "obj_name",
        obj2: {
            name: "obj2_name",
            func: function() {
                console.log(this.name)
            }

        },
        func: function() {
            console.log(this.name)
        }
    }
    obj.func();
    obj.obj2.func();

输出

    obj_name

    obj2_name

引用类型，变量中只储存了用于指向数据的地址//重点理解

    var name = "window_name";
    var obj = {
        name: "obj_name",
        func: function() {
            console.log(this.name)
        }
    }
    let win = obj.func;//win里储存了func的地址，那么调用win的是window
    win();
    obj.func();

输出

    window_name

    obj_name

函数调用，可以看出，调用this的实际上是window这个最大的对象，name和func实际上可以说是window的属性，正如上面的obj.obj2 //== window.obj.obj2;

    name = "window_name"
    function func() {
        console.log(this.name);
    }
    func();
    console.log(window.func, window.name)

输出

    window_name

    ƒ func() {
            console.log(this.name);
        } window_name

构造函数调用，new关键字会返回一个对象，this就指向这个对象的地址

    var name = "window_name";

    var func = function() {
            this.name = "func_name";
            console.log(this.name)
        };
    var func_obj = new func();
        console.log(func_obj.name)

输出

    func_name
    func_name

apply,call动态调用

obj1.func1只代表了函数的储存地址，call(obj2)为调用者，将函数放到自己的作用域内执行

   var name = "window_name";

    var obj1 = {
        name: "obj1_name",
        func1: function() {
            console.log(this.name)
        }
    }
    var obj2 = {
        name: "obj2_name",
        func2: function() {
            console.log(this.name)
        }
    }
  
    obj1.func1.call(obj2);//=>obj2_name

    obj2.func2.call(obj1)//=>obj1_name

箭头函数单纯的对象套用指向最外层

    var name = "window_name";
    var obj2 = {
        name: "obj2_name",
        func2: () => {
            console.log(this.name)
        },
        obj3: {
            name: "obj3_name",
            func3: () => {
            console.log(this.name)
        },  
        }

    }

    obj2.func2();
    obj2.obj3.func3();

输出

    window_name
    window_name

箭头函数在被函数套用时，指向上一层

    var name = "window_name";
    var obj2 = {
        name: "obj2_name",
        func2: () => {
            console.log(this.name)
        },
        obj3: {
            name: "obj3_name",
            func3: function () {
                return (() => {
                    console.log(this.name)
                })()
            },
        }

    }

    obj2.func2();
    obj2.obj3.func3();

输出

    window_name
    obj3_name

 函数的套用，会使其失去this指向，实际上，现在是window在调用函数

    name = "window"
    function foo(x) {
        setTimeout(function() {
            console.log(this.name);
        }, 1000)
    }
    function foo2() {
        setTimeout(() => {
            console.log(this.name);
        }, 1000)
    }
    let obj = {
        name: "obj",
        fn: foo,
        fn2: foo2,
        fn3: () => {
            console.log(this.name)
        }
    }
    obj.fn();//=>window
    obj.fn2();//=>obj
    obj.fn3();//=>window

function一旦调用了function，就会自动把this指向window

    var name = "window_name";
    var obj2 = {
        name: "obj2_name",
        func2: () => {
            console.log(this.name)
        },
        obj3: {
            name: "obj3_name",
            func3: function () {
                console.log("1:"+this.name);
                return (() => {
                    console.log("2:"+this.name);
                    (function () {
                        console.log("3:"+this.name);
                        return (() => {
                            console.log("4:"+this.name);
                        })()

                    })()

                })()
            },
        }

    }

    // obj2.func2();//
    obj2.obj3.func3();

输出

    1:obj3_name

    2:obj3_name

    3:window_name

    4:window_name