一、this的相关理解与解读

1、各角度看this。

1）ECMAScript规范：

this 关键字执行为当前执行环境的 ThisBinding。

2）MDN：

In most cases, the value of this is determined by how a function is called.
在绝大多数情况下，函数的调用方式决定了this的值。

3）其实，没必要记这些文邹邹的句子去理解【哎，很多我们懂的词语放在同一个句子里，我们可能就读不懂其意思了】。

我们只需记住一个魔法口诀 —— “this 永远指向最后调用它的那个对象” 就能理解 this 的指向问题。

二、this指向的判断。

1、this指向的判断流程图：

判断this指向.png

2、具体的例子：

1）普通函数 && 通过new关键字进行创建的：

class O {
    constructor(name) {
        this.name = name;
    }
    getName(){
        console.log(this);
    }
}

let o = new O('码农三少');
o.getName(); // {name: "码农三少"}

2）普通函数 && !通过new关键字进行创建 && 函数调用中使用上下文对象：

function fn() {
    console.log(this);
}

let o = {
    name: '码农三少',
    fn: fn
}

window.fn();    // 上下文对象调用, 等价于直接调用 fn()。 {window: Window, self: Window, document: document, name: "", location: Location, …}
o.fn();       // 上下文对象调用。 {name: "码农三少", fn: ƒ}

3）普通函数 && !通过new关键字进行创建 && !函数调用中使用上下文对象：

function fn() {
    console.log(this);
}

let o = {
    name: '码农三少',
    fn: fn
}
let newFn = o.fn;
newFn(); // 等同于 window.fn(); 和 fn(); 。 {window: Window, self: Window, document: document, name: "", location: Location, …}

4）箭头函数（指向它外层普通函数的this指向）：

let o = {
    name: '码农三少',
    fn() {
        return () => {
            console.log(this)
        }
    }
}

let newFn = o.fn();
newFn(); // 这2行等价于 o.fn()(); 。{name: "码农三少", fn: ƒ}

5）使用了特殊函数（如bind、apply、call）：

function fn() {
    console.log(this);
}

let bindObj = {
    name: '我是 bindObj , By 码农三少'
};

let applyObj = {
    name: '我是 applyObj , By 码农三少'
};

let callObj = {
    name: '我是 callObj , By 码农三少'
};

fn(); // 等价于 window.fn(); Window {window: Window, self: Window, document: document, name: "", location: Location, …}
fn.bind(bindObj)(); // {name: "我是 bindObj , By 码农三少"}
fn.apply(applyObj); // {name: "我是 applyObj , By 码农三少"}
fn.call(callObj); // {name: "我是 callObj , By 码农三少"}

三 关于博主

1）20届本科生，做过个人公众号 —— IT三少（半年内实现从0到5.8K+的粉丝增长）。大厂待过、创业公司也待过，也拿到过40+w(27 * 15)的高薪offer，目前是BAT的一名前端工程师。

曾获得的高薪offer.png

2）目前也在自学Go语言(在校全权负责的前、后端2个项目分别在微信小程序应用开发赛获“全国三等奖”，CODA比赛为前 17/211 强&获“优秀团队”称号。最近已开始自己的小程序、应用和博客等的开发)、开始写一些公司里的后端代码。

全国三等奖(小程序).png

3）以下是个人整理的一些笔记和书籍（永久有效链接: https://pan.baidu.com/s/1SPc3umO6cZlBtoPylSaHzw 密码: eqee ，若失效的话可以到vx公众号 “码农三少” 回复 pdf 以进行最新资料的获取）：

个人技术笔记(350+算法题解、前端重点面经汇总、图解HTTP等).png 理财书籍pdf.png 技术书籍pdf.png