JavaScript之this作用域

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