彻底搞清函数中的this指向

Posted 2020-09-19 四两websir

近日阅读《javascript设计模式与开发实践》

书中的apply和call调用函数层出不穷，很多妙用；

 

函数中的this是根据调用方式来决定的

函数调用方式有4中
1、直接调用 a(...arg); 函数a中的this总是绑定的window /严格模式下绑定的undefined
2、方法调用 a.b(...arg); 方法函数b会返回当前执行上下文的对象a；如果a.b.c(); 那么此时返回的就是b
3、构造器调用 new a(...arg);构造器不会引用任何上下文的内容，只是单纯的根据自己生成一个对象并且返回；
4、使用call/apply调用 a.call(this,...arg)；

 

function add(){
        this.a = "add-a";
        console.log(this)
    }
    add();
    //控制台：window;
    //数据改变：此时会多一个全局变量a；window.a="add-a";

    var obj = {
        a:1,
        b:{
            a:2,
            c:add
        }
    }
    obj.b.c();
    //控制台：obj.b指向的对象 {a:"add-a",c:function add()...}
    //数据改变：直接调用类似，add会改变上下文的属性值；obj.b.a==="add-a"


    new obj.b.c();
    //控制台：通过构造器调用，不会改变obj.b.a;所以此时obj.b.a依然等于"add-a"
    //数据改变:无

    obj.b.c.call();
    //控制台：window;
    //数据改变：window.a的值会重新被赋值"add-a"
    //不传入参数或者传入undefined、null时，add中的this就会是全局对象
    //否则传入什么对象、运行时的this就是传入的对象
    //注意:这里其他的数据类型  String Number Boolean Object也会当做一个对象进行处理
    //例如: 
    obj.b.c.call(1);
    //控制台： Number {a: "add-a", [[PrimitiveValue]]: 1}
    obj.b.c.call(false);
    //控制台：Boolean {a: "add-a", [[PrimitiveValue]]: false}