JavaScript中的this指向總結

關於javascript中this指向的總結

瀏覽器環境

在全局做用域中，this的指向是window對象

console.log(this);
//Window對象
console.log(this === window);
//true

ES5函數中this的指向

在非嚴格模式下,函數中的this指向window對象，由於此時函數fn是window的一個屬性，因此運行fn時，fn中的this指向window。其實this的指向就是指向函數的運行時環境。

var fn = function () {
    console.log(this);
    console.log(this === window);
}
fn(); 
//Window對象
//true

在嚴格模式下，若不使用window調用函數，函數中的this指向undefined；使用window調用時，指向的時window對象。

var fn = function () {
    'use strict'
    console.log(this);
    console.log(this === window)
}
fn();
//undfined
//false
window.fn();
//Window對象
//true

在嚴格模式下有一種例外的狀況，就是在定時器中的this，此時不管使用window調用仍是不使用window調用，this都指向window。

var fn = function () {
    'use strict'
    setTimeout(functioin(){
        console.log(this);
        console.log(this === window);
    },1000)
}
fn();
//Window對象
//true

在ES6中箭頭函數this的指向

在ES6中箭頭函數this的指向取決於定義時環境中的this指向一致

var fun = () => {
    console.log(this);
    console.log(this === window);
}
fun();
//Window對象
//true
//定義箭頭函數時,就是這個過程：()=>{...}所在的環境是window，因此運行fun()時，箭頭函數內部的this指向window

var obj = {
    name:'Jay',
    age:25,
    fn:()=>{console.log(this)},
    fun:function(){
        console.log(this)
    }
};
//在定義fn時，fn內部this的指向就是定義obj對象時所在的環境，obj所在的環境是window，因此調用obj.fn()時，返回的this就是Window對象
obj.fn(); //Window對象
obj.fun();//{name: "Jay", age: 25, fn: ƒ, fun: ƒ}

var name = 'Kobe';
var obj = {
    name:'Jay',
    age:25,
    fn1:function(){
        return function(){
            console.log(this.name);
        }
    },
    fn2:() =>{
        return () => {
            console.log(this.name);
        }
    }
};
var fnn1 = obj.fn1();
var fnn2 = obj.fn2();
fnn1();//Kobe
fnn2();//Kobe

在DOM事件中的this指向

DOM事件處理函數中this的指向是觸發該事件的對象

<div id='app'>App</div>
<script>
   var $id = document.querySelector('#app');
   $id.onclick = function () {
       console.log(this);
   }
</script>
//當點擊App時，console.log(this),打印出來的值時 <div id='app'>App</div>

構造函數中的this指向

構造函數中的this的指向是經過構造函數所建立出的對象實例

function Person (){
    this.name = 'Jay',
    this.age = 25;
    console.log(this);
}
var p1 = new Person();
//Person {name: "Jay", age: 25}

改變this的指向

能夠使用call()、apply()、bind()改變函數內部this的指向（ES6中的箭頭函數除外）。其中call()和apply()在傳入要綁定的this指向時，當即執行。bind()在傳入要綁定的this指向時，並不執行，須要再次調用纔會執行。

使用call()改變this的指向

var obj = {
    name:'Jay',
    age:25
};
function fn(){
    console.log(this === obj);
    console.log(this);
}
fn.call(obj);
//true
//{name: "Jay", age: 25}

使用apply()改變this的指向

var obj = {
    name:'Jay',
    age:25
};
function fn(){
    console.log(this === obj);
    console.log(this);
}
fn.apply(obj);
//true
//{name: "Jay", age: 25}

使用bind()改變this的指向

var obj = {
    name:'Jay',
    age:25
};
function fn(){
    console.log(this===obj);
    console.log(this);
}
//fn.bind(obj);不會當即執行，須要再次調用纔會執行。
var fn1 = fn.bind(obj);
fn1();
//true
//{name: "Jay", age: 25}

須要注意的是，當使用call()、apply()、bind()改變函數內部this的指向時,若是傳入的不是一個對象，會調用相對的構造函數，進行隱式類型裝換。

function fn(){
    console.log(typeof this === 'object');
    console.log(this);
}
fn.apply('I am a string');
//true
//String{"I am a string"}