首页 > 代码库 > 彻底搞清函数中的this指向

彻底搞清函数中的this指向

近日阅读《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}

 

彻底搞清函数中的this指向