JavaScript之this對象詳解

1.看前熱身

看一段代碼

<script type="text/javascript">
    var name = "javascript";
    var obj = {
        name:"js",
        foo:function () {
            console.log(this.name);
        }
    };
    //調用foo函數
    obj.foo();   //js
</script>

上面的這段代碼中 obj是JavaScript中的對象類型，對象就是屬性和方法的集合。
若是執行obj.foo()函數的話，在控制檯輸出js。
其實this的定義就是，他是js對象中的一個特殊指針，他的指向根據環境的不一樣而發生改變。

2.this的指向

this的指向：誰調用或者哪一個對象調用this所在的函數，this就指向誰。
構造函數的this和普通函數的this指向
構造函數的this

//構造函數和普通函數的this指向
    var  name = '淘寶';
    //構造函數
    function Foo() {
        this.name = '騰訊';
        this.aa = function () {
            console.log(this.name);
        } ;
    }
//    實例化對象
    var obj = new Foo();
    obj.aa();//騰訊

普通函數的this

var name = '淘寶';
function foo() {
    var name =  '騰訊';
    console.log(this.name);
}
foo(); //淘寶

在普通函數中，this指的是window對象，因此在這裏輸出的依然是‘淘寶’;
更深的一個函數的this

var name = '淘寶';
    function Foo() {
        this.name = '騰訊';
        this.foo = function () {
            var name  = '百度';
            return function () {
                console.log(this.name);
            }
        }
    }
    var obj  = new Foo();
    obj.foo()();//淘寶

這個函數this的指向依然是window

3.定時器中的this指向

//    定時器中的this
    var name = '淘寶';
    function foo() {
        var name = '騰訊';
        console.log(this.name);
    }
//    定時器
    setTimeout(foo,1000) //淘寶

由此小案例能夠看出 定時器中的this指的是window對象。
再來看一個小的示例

var name = '淘寶';
var obj = {
    name :'騰訊',
    fn:function () {
        console.log(this.name);
    },
    foo:function () {
        setTimeout(this.fn,1000);
    }
};
obj.foo();//淘寶

爲何輸出的依然是淘寶呢？
obj.foo()調用的是obj對象中的foo()方法，foo()方法裏面有一個定時器，而定時器的一個參數是this.fn,這裏的this指的就是obj的對象，而後fn()方法裏面有調用了this.name，可是定時器中的this指的是window對象，因此最終this.name調用的是window對象中name。

在上面的示例中，把輸出的‘淘寶’改爲‘騰訊’

var name = '淘寶';
   var obj = {
       name :'騰訊',
       fn:function () {
           console.log(this.name);
       },
       foo:function () {
           // setTimeout(this.fn.call(obj),1000);
           setTimeout(this.fn.bind(obj),1000);
       }
   };
   obj.foo();//騰訊

在this調用的時候添加bind或者call強制改變this的指向，在這裏，指向了obj，因此輸出的是obj.name，爲‘騰訊’。

4.箭頭函數的this

示例

var author = 'lzz';
   var book = {
       author:'ql',
       init:function () {
           setTimeout(ev => {
               console.log(this.author);
           },1000);
       }
   };
   book.init();

箭頭函數的特徵就是定義在哪，this的指向在那。就是箭頭函數定義在一個對象裏面，那麼箭頭函數裏面的this就指向該對象。