谈谈JS中的 this

想知道JavaScript 函数中的 this 指向，就得知道我们的函数什么时候被调用。

普通函数调用分为直接调用、方法调用、new函数后调用。特殊的情况有通过bind将函数绑定到对象上再调用，还有call(),apply()调用。ES6中的箭头函数的调用。今天先分析下普通函数调用和ES6中的箭头函数调用时this的指向

---

普通函数调用

1.直接调用

什么是直接调用呢？直接用函数名()的方式调用函数.这时候函数内部的this对象为全局对象.在浏览器下是window对象，在在 NodeJs 中全局对象是 global

function directCall() {
       alert(this===window);
 }
directCall();//true

注意的是直接调用不代表是在全局环境下的调用，在任何作用域下以函数名()的方式调用函数都是直接调用

(function directCall(window){
    function test(){
        alert(this===window);
    }
    test();
})(window)

2.方法调用

方法调用——对象调用自己的方法。直接用对象.方法名()的方式调用。这时侯this指向调用该方法的对象

• 第一种形式：调用对象内部自己定义函数

let obj = {
   isObj(){
       alert(this===obj);
   }
};
obj.isObj();//true

• 第二种方式：为定义好的对象附加一个方法

let obj = {};
obj.isObj= function(){
  alert(this===obj);
};
obj.isObj();//true

• 第三种方式：跟第二种方式很相似

let obj = {};
function t() {
    alert(this === obj);
}
obj.isObj = t;
obj.isObj();

注意，下面的方式会将this指向全局变量

const obj = {
    test() {
        console.log(this === obj);
    }
};
const t = obj.test;
t();    // false

3.new 函数后调用

在ES5 中，用 new 调用一个构造函数，会创建一个新对象，而其中的 this 就指向这个新对象。这没有什么悬念，因为 new 本身就是设计来创建新对象的。

function Person(name,age){
    this.name = name;
    this.age = age;
}
let person = new Person("xiaoming",18);
alert("姓名"+person.name+"年龄"+person.age);//xiaoming 18

用Person函数创建一个对象实例person,此时的this指向对象person.

ES6中的箭头函数的调用

在ES6中，引入了箭头函数，那么箭头函数在调用时this指向哪里呢？其实是包含了箭头函数的外函数或函数表达式中的this.

const obj = {
    test(){
        const arrayFunction = ()=>{
            alert(this===obj);

        }
        arrayFunction();
    }
};
obj.test();//true

上述代码对象obj调用自己的方法test(),属于方法调用,所以this指向该对象。而arrayFunction函数this的指向即为外层函数test()的this,所以 this===obj 为true

const obj = {
    test(){
      return ()=>{
        console.log(this===obj);
    }
    }
};
const a = obj.test();
a();//true

这段代码如果用ES5语法来写，则需要把this赋给一个变量，如下：

const obj = {
    test(){
        var self = this;//把this赋给变量self
        return function(){
            console.log(this===obj);
        }
    }
};
const a = obj.test();
a();

ES5需要通过像 self 这样的局部变量来临时引用 this 给闭包函数使用,但箭头函数让大家在使用闭包的时候不需要太纠结 this

不管在什么情况下使用箭头函数，它本身不用再给this赋值，它用的是直接外层函数(即包含它的最近的一层函数或函数表达式)绑定的 this。

好了，关于bind(),call(),apply()后续更新！

每天都努力一点点
谢谢你看完

---