邃晓JS中this的指向

每一个函数都有它本身的this值，在绝大多数状况下，this指向挪用了函数的谁人对象。
为了本身越发清楚地熟悉this的指向，我总结出了以下几种状况：

全局环境中的this

不管是不是处于严厉形式，在全局环境中（或许邃晓为在任何函数体的外部）this 都指代全局对象:

console.log(this); //全局对象

var num = 100;
console.log(this.num); // 100

函数内部中的this

在全局环境中挪用函数，函数内部的this指向有以下两种状况：

在非严厉形式下，this的值即是全局对象：

function temp(){
    return this;
};
console.log(temp()); //全局对象

在严厉形式下，因为this并没有被提早定义，所以，this的值即是undefined：

function temp(){
    "use strict";
    return this;
};
console.log(temp()); //undefined

用apply和call要领能够指定this的值：

var obj = {
    name: 'Tom'
};

function temp(){
    "use strict";
    return this;
};

console.log(temp.call(obj)); //{name: "Tom"}

补充知识点：在严厉形式下，经由历程this传递给一个函数的值不会被强迫转换为一个对象:

function temp(){
    "use strict"; 
    return this
}
console.log(temp.call(true)); // true
console.log(temp.call(56)); // 56
console.log(temp.apply(null)); // 

ES6箭头函数中的this

箭头函数不会建立本身的this,它只会从本身所处的作用域链的上一层继续this。

例1：箭头函数没有本身的this指针，经由历程call或apply要领挪用一个箭头函数时，为this绑定特定的值是无效的：

var name = 'window';

var obj = {
    name: 'Tom'
};

var temp = () => {
    return this.name;
};

console.log(temp.call(obj)); //window

箭头函数是在全局环境中挪用的，它上一层的this指向全局对象，所以，它的this也指向全局对象。

例2：在函数内部建立的箭头函数，其this指向等同于包括函数的this指向：

name = 'window';

let obj = {
    name: 'Tom',
    test: function(){
        let temp = (()=>{
          return this.name;
        });
        return temp;
    }
};

console.log(obj.test()()); //Tom

包括函数作为对象内里的要领被挪用时，它的this指向挪用它的对象obj，所以，箭头函数的this也指向obj。

name = 'window';

let obj = {
    name: 'Tom',
    test: function(){
        let temp = (()=>{
          return this.name;
        });
        return temp;
    }
};

let a = obj.test;
console.log(a()()); //window

包括函数被赋值给一个全局变量，以后再在全局环境中挪用，明显，此时它的this指向挪用它的全局对象，所以，箭头函数的this也指向全局对象。

例3：邃晓了箭头函数的this指向道理，在回调函数中就不必写如许的代码了：var that = this，这里以setTimeout的回调函数为例：

不必箭头函数:

var name = "outer";

var obj = {
    name: 'Tom'
};

function temp(){
    let that = this;
    setTimeout(function(){
        console.log(that.name);
    },1000);
}

temp.call(obj); //Tom

运用箭头函数:

var name = "outer";

var obj = {
    name: 'Tom'
};

function temp(){
    setTimeout(() => {
        console.log(this.name);
    },1000);
}

temp.call(obj); // Tom

作为对象的要领中的this

对象中函数的this指向挪用函数的谁人对象， 并且是离得近来的谁人对象：

name = 'window';

let obj1 = {
    name: '1',
    test: function(){
        return this.name;
    },
    other: {
        name: '2'
    }
};

obj1.other.test = obj1.test;

console.log(obj1.test()); // 1
console.log(obj1.other.test()); //2

let aa = obj1.test;
console.log(aa()); //全局对象

组织函数中的this

组织函数中的this指向建立的新对象:

function Person(name){
    this.name = name;
};
let child = new Person('Tom');

补充知识点：new的历程究竟发作了什么：

1. 建立一个新的对象child;
2. 将组织函数的作用域赋给对象，即组织函数中的this指向child;
3. 实行组织函数中的操纵；
4. 返回对象child({name: “Tom”})。

内联函数中的this

指向事宜发作的DOM元素:

<div>    
    <button id="btn" onclick="alert(this)">alert</button> // 在弹出框中显现：btn
</div>

Dom事宜处置惩罚函数中的this

当一个函数被用作事宜处置惩罚函数时，它的this指向触发事宜的元素:

<div>    
    <input type="button" id="btn" value="Click Me"/>
</div>
<script>
    var btn = document.getElementById('btn');
    btn.addEventListener('click', function(){
        console.log(this.id); // btn
    }, false);
</script>