js中的this指向

任何一門語言中，相信this的指向問題都是一個重點，js也不例外。

js中的作用域分為全局作用域和局部作用域，在全局作用域中，this指向的是他的全局對象window，如下

在全局中列印this：console.log(this);

輸出：Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

下麵看一下this在局部作用域（函數）中的指向

在函數中，this的指向大致分為四種：

一、在普通函數中this指向window：

   var name = "小明";
     function f() {
             var name = "小紅";
             console.log(this.name);
     }
     f();
輸出：小明

匿名函數的this也指向的是window

 var setname = "老王";
function f() {
        (function () {
                var  setname = "小王";
                console.log(this,this.setname);

        })();
}
f();

輸出：Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

 "老王"

二、當函數作為方法調用時

var name = "老李";
var obj = {
        name:"小李",
        getName:function () {
                console.log(this.name);
        }
};
obj.getName();

此時getName方法中的this指向的是調用它的對象，即obj，而不是window

三、以構造函數調用

function Person(name) {
        this.name = name;
        this.play =function () {
                console.log(this.name+"正在打籃球");
        }
}
var sub = new Person("科比");
var sub2 = new Person("韋德");
console.log(sub.play(),sub2.play());

 四、在事件函數中的this指向的是當前事件源，也就是DOM對象

  var btn =document.querySelector("#btn");
        btn.addEventListener("click",function () {
                console.log(this);
        })

使用call（），apply（），bind（），方法可以強制修改this的指向，call和apply方法修改以後會立即執行，而bind（）方法會返回一個新對象，

總結一下，this永遠指向函數運行時所在的上下文對象，而不是函數被創建時所在的上下文對象