关于This对象
js 中的this 是一个比较难理解的对象;所以也经常作为面试的考点,考察应聘者的js 基础能力;其实this的指向也就那么几种情况,接下来我们一一看一下:
函数中的this取何值是在函数真正被调用时确定的(也就是运行时),函数定义时确定不了。
1、在全局调用函数 this 指向 window
var a=10;
function fn(){console.log(this);// widowconsole.log(this.a);//10
}
var foo=document.getElementById('foo');
foo.addEventListener('click',fn);
function fn(){console.log(this); // <div id="foo">click</div>
}
var obj={name:"daxiong",fn:function(){console.log(this);}
};
obj.fn(); // obj
var obj={name:"daxiong",fn:function(){console.log(this);}
};
var f1= obj.fn;
f1(); // window
var obj={name:'daxiong',fn:function(){return function(){console.log(this);}}
};
obj.fn()(); // window
var obj={name:'daxiong',fn:function(){console.log(this); var f1=function(){console.log(this);}f1();}
};
obj.fn();
// obj
// window
var obj={name:'daxiong',fn:function(){console.log(this);var f1=()=>{console.log(this);}f1();}
}
obj.fn();
//obj;
var f2=obj.fn;
f2();
// window
// window
所以说 箭头函数f1的作用域是 obj.fn的作用域;
5、当然也有例外,比如箭头函数中的this,是词法作用域,this 指向定义所在的作用域。
var bar =foo();
4、如果都不是的话,就是默认绑定。在严格模式下,就绑定到 undefined,否则绑定到全局对象。
var bar=obj1.foo();
3、函数是否在某个上下文对象中调用(隐式绑定)?如果是的话,this 指向那个上下文对象。
var bar =foo.call(obj2);
2、函数是否通过call、apply (显示绑定)?如果是this指向的是指定的对象;
var bar = new foo();
1、函数是否在new 中调用(new绑定)?如果是的话this 绑定的就是新创建的对象。
8、综上所述,我们可以使用下面的规则,对this的指向进行判断:
function foo(){console.log(this.a);
}
var obj={a:1
}
foo.call(obj); //1;
1、call、apply 可以显式绑定;这两个函数的第一个参数是一个对象;他们会把这个对象绑定到this,接着调用函数时指定这个this;
7、显式绑定 改变this的指向
//伪代码;
var new1=function(fn){var newObj=Object.create(fn);fn.call(newObj);return newObj;
};
4、返回这个对象;
3、执行构造函数中的代码(这个函数的调用会绑定到新对象的this);
2、将这个新对象的原型指向 构造函数的 Prototype
1、创建一个新的对象;
我们看一下 new 关键字主要做了哪些事:
6、构造函数中的this 指向创建的实例对象
f1定义的作用域,是obj.fn 的作用域;所以f1 的作用域指向了obj;
箭头函数中this 指向与其他不同,他是在函数定义是就确定了(词法作用域);
5、箭头函数中的This
第一个输出是obj是一位函数在obj中调用了; f1的调用为什么会是window呢:因为他没有绑定到任何一个对象中;
我们在看下这个例子:
在红皮书中有这么一句话:匿名函数的执行环境具有全局性 所以这个输出的是window; 那么为什么呢,其实在这个上下文(执行环境)中匿名函数并没有绑定到任何一个对象中,所以指向了window (非严格模式)
4、匿名函数中的 this 具有全局性
为什么会指向window呢,以为这个函数的指针已经指向了 f1 而f1 的执行环境时 window 所以指向了window;
如果我们做个变形:
3、函数作为对象方法调用时,this就等于那个对象;
这个不难理解;由于DOM元素 调用的他,所以指向了DOM元素
2、DOM事件中的this 指向DOM节点
因为函数是在全局调用的,所以this 指向 window;