this的定义
定义:this是包含它的函数作为方法被调用时所属的对象
听上去很难理解,将其分来理解就好理解多了即系:
包含它的函数 ,作为方法被调用时,所属的对象
this对象是在运行时给予函数的执行环境绑定的。
this的指向问题
全局函数中
当在全局函数调用时,this指向全局对象。
var a = "global name"
function test(){
var a = "test name"
console.log(this.a);
}
test(); //global name
在构造函数中
在构造函数中,this指向新创建的实例。
var a = "global name"
function test(){
this.a = "test name"
}
var s = new test();
console.log(s.a); //test name
对象调用中
作为对象方法调用时,this指向上级对象
var a = "global name";
var b = {
a:"object name",
test:function(){
console.log(this.a)
}
}
b.test(); //object name
如果对象中有2层或以上的方法时,this指向全局对象;
var a = "global name";
var b = {
a:"object name",
test:function(){
return function(){
console.log(this.a);
}
}
}
b.test()();//global name
定时器中
在定时器中,this指向全局对象
(function(){
console.log(this); //window
})()
绑定事件中
在绑定事件中,this指向当前绑定的元素节点
<button id="btn" name="fpxNB">测试</button>
<script>
document.getElementById('btn').onclick = function(){
console.log(this.name); //fpxNB
}
</script>
立即执行函数中
在绑定事件中,this指向当前绑定的元素节点
<button id="btn" name="fpxNB">测试</button>
<script>
document.getElementById('btn').onclick = function(){
console.log(this.name); //fpxNB
}
</script>
箭头函数中
在箭头函数中,this指向当前函数的上一层作用域
var a = "global name";
var b = {
a:"object name",
test:()=>{
console.log(this.a)
}
}
b.test(); //global name
我和要和function分清楚,并不会因为多次调用而使得this变成window,看下面的例子
var a = "global name";
var b = {
a:"object name",
test:function(){
return ()=>{
console.log(this.a)
}
}
}
b.test()(); //object name
PS:函数的上一层作用域永远是函数定义时所处的作用域,不是函数调用时所处的作用域。
再给大家看个恶心一点的例子:
var a = "global name";
var b = {
a:"object name",
test:function(){
return ()=>{
var a = "function1 name"
console.log(this.a)
return function(){
var a = "function2 name"
console.log(this.a)
return ()=>{
var a = "function3 name"
console.log(this.a)
}
}
}
}
}
b.test()()()();
//object name
//global name
//global name
如果按照我们之前的规则就很容易得出正确的结论,因为在第二个function里面this已经指向了全局对象;
改变this的指向
改变this的作用域可以通过call、apply、bind方法。
bind方法:传入一个值,返回一个函数,使得该函数中this指向传入的那值。
而call和apply这我就不多说了 ,可以看我之前写过的博客。
闲聊js中的apply、call和arguments