this浅看

Posted 2020-10-12

一些浅见。

一、非对象函数定义中的this

//非对象定义函数
//当函数被单独定义和调用的时候，应用的规则就是绑定全局变量
const fn1 = () => {
    console.log(this)
};
fn1();

var fn2 = function () {
    console.log(this)
};
fn2()

无关严格模式还是非严格模式，也无关箭头函数写法还是普通写法，打印的都是 window对象。

二、对象扩展中的this

    var obj1 = {
        write: function () {
            console.log(this.color);
            console.log("obj1");
        },
        color: "red"
    };
    obj1.write();
    var obj3 = {
        write(){
            console.log(this.color);
            console.log("obj3")
        },
        color: "red"
    };
    obj3.write();

ES6 允许直接写入变量和函数，作为对象的属性和方法。也可以简写。obj3中write方法就是简写的。obj1和obj3是一样的。打印Object对象；

 

    function fn() {
        console.log(this)
    }

    var obj4 = {
        write: fn
    };
　　 obj4.write()
　　 fn();

打印Object对象(obj4);

打印window对象;

this调用时的上下文。

 

 function fn() {
        console.log(this)
    }
    var obj4 = {
        write: fn
    };
    var obj5 = {
        obj: obj4
    };
    obj5.obj.write()

打印Object对象(obj4);

this调用时的最初的上下文。

 

    function fn() {
        console.log(this)
    }
    var obj4 = {
        write: fn
    };
    var _fn = obj4.write; 
    obj4.write(); 
　　 _fn();

打印Object对象(obj4);

打印window对象;

牵扯一些引用问题：

    function fn() {
        console.log(this)
    }
    var obj4 = {
        write: fn,
    };
    var _fn = obj4.write;
    obj4.write();
    _fn();

    var obj = obj4;
    obj.color = "blue";
    console.log(obj4.color);
    console.log(obj.color);

打印都是blue。

修改obj.color时obj4.color也一起改变了----obj = obj4不是复制黏贴一个新的对象，而是新创建一个变量并将obj4指向的地址又赋值给了新的变量，属于地址引用（地址在栈中，读取栈内存中该地址，然后在堆中找到相应的内容，多对一的关系）

 

        var obj1 = {
            write() {
                setTimeout(function () {
                    console.log(this);
                    console.log("obj1")
                });
            }
        };
        obj1.write();
        var obj2 = {
            write(){
                setTimeout(()=> {
                    console.log(this);
                    console.log("obj2");
                }, 0);
            },
            color: "red"
        };
        obj2.write();

打印window对象；

打印Object对象（obj2）

 

三、遇见call\apply\bind

    function fn() {
        console.log(this.color)
    }
    var obj4 = {
        color:"red"
    };

    fn.call(obj4)

打印red;

将fn中this指向obj4

 周末继续