关于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"}