「~this情况分析 ~」

每日一题，希望让爱学习、思考的前端技术伙伴在一起学习、复盘、成长。 基础知识要夯实，原理源码要深入，深度广度要扩展，坚持每天进步一点点，每天有所收获。进大厂是最终目标 ?

* 回答面试题的套路

1､先说这个点的明确定义，或者是特性；

2､再说具体的应用场景；

3､说说自己的看法、观点；

4､可以稍微举一反三，说说同类特性，或者类似的框架，更好的方案。

项目中this情况使用场景

1)事件绑定；

2)函数执行：1)自执行函数  2)回调函数；

3)构造函数执行；

4)基于call /apply /bind 改变函数中的this；

5)箭头函数中没有自己的this，所用到的this是使用其上下文中的；

JS中最基本的this情况分析

this函数的执行主体

1)函数执行主体：谁把函数执行的；

2)函数执行上下文：在哪执行的；

// 全局上下文中的this是window；// 块级上下文中没有自己的this，所用到的this都是所处上级上下文中的this;console.log(this); //window{    let n = 12;    console.log(this); //window  上级上下文是全局上下文}

规律：

1)事件绑定：给当前元素的某个事件行为绑定方法，当事件触发、方法执行，方法中的this是当前元素本身；

2)普通函数执行

1. 函数执行前面是否有“点”，没有“点”，this就是window(或者JS严格模式下是undefined)；

2. 有“点”，“点”前面是谁this就是谁；

3.匿名函数(自执行函数/回调函数)如果没有经过特殊的处理，则this一般都是window/undefined，但是如果经过一些特殊处理，一切都以处理后的结果为主；

1、事件绑定

document.body.onclick = function () {    console.log(this); //body};document.body.addEventListener('click', function () {    console.log(this); //body});// IE6~8 DOM2事件绑定document.body.attachEvent('onclick', function () {    console.log(this); //window}); 

2、普通函数执行

function sum () {  console.log(this); // 结果：undefined}

说明：创建函数，没有执行。this不知道是谁。

1)有“点”，“点”前面是谁this就是谁

// 开启JS严格模式  => 扩展：严格模式和非严格模式的区别// "use strict";function fn() {    console.log(this);}let obj = {    name: '前端学苑',    fn: fn};fn(); //this->window/undefinedobj.fn(); //this->obj 

2)匿名函数

(function () {    console.log(this); //this->window/undefined})();

说明：开启严格模式是undefined

function fn(callback) {    callback(); //this->window/undefined}let obj = {    // sum:function(){}    sum() {        console.log(this); // window    }};// obj.sum(); //this->obj// 回调函数：把一个函数作为实参值，传递给另外一个函数// => fn(function () {});fn(obj.sum); 

setTimeout(function () {    console.log(this); //window或者undefined}, 1000);

let obj = {    name: 'xxx'};let arr = [10, 20];arr.forEach(function (item, index) {    console.log(this);  // this -> obj}, obj);

说明：obj 因为触发回调函数执行的时候，forEach内部会把回调函数中的this改变为传递的第二个参数值obj “特殊处理”。

let obj = {    sum() {        console.log(this);    }};obj.sum(); //this->obj(obj.sum)(); //this->obj(10, obj.sum)(); //this->window 

说明：括号表达式，小括号中包含“多项”(如果只有一项，和不加括号没啥本质区别)，其结果是只取最后一项；但是这样处理后，this会发生改变，变为window/undefined。

3、构造函数调用 ( 实例化后的对象 )

function School(){   this.said=function(){    console.log(this);   }  }var nanj=new School();nanj.said();//对象调用自己的方法，this===nanj，类似上面

4、基于call /apply /bind 改变函数中的this

window.name = 'WINDOW';let obj = {name: '前端学苑',age: 2};function fn(x, y) {console.log(this, x + y);} fn(); //this->windowobj.fn(); //Uncaught TypeError: obj.fn is not a function

fn.call(obj); //this->obj  fn.call(obj, 10, 20); //this->obj x->10 y->20fn.call(); //this->window 严格模式下undefinedfn.call(null); //this->window 严格模式下null 「传递的是undefiend也是如此」fn.call(10, 20); //this->10「对象」 x->20  y->undefined

解析说明： fn.call(obj);

底层处理方式：fn先基于__proto__找到Function.prototype.call，把call方法执行的时候，call方法内部实现了一些功能：会把fn执行，并且让fn中的this变为第一个实参值。

* apply的作用和细节上和call一样，只有一个区别：传递给函数实参的方式不一样。

fn.call(obj, 10, 20);fn.apply(obj, [10, 20]); 

最后结果和call是一样的，只不过apply方法执行的时候要求：传递给函数的实参信息都要放置在一个数组中，但是apply内部也会向call方法一样，把这些实参信息一项项的传递给函数。

5、箭头函数没有自己的this

? 实例一：

let obj = {    name: '前端学苑',    age: 11,    fn: function () {        // this->obj        let that = this;        return function () {            // this->window            // 如果需要改变obj.name，可以用that替换this            that.name = 'FE2020';            console.log(this);        };    }};let f = obj.fn();f();

? 实例二：

let obj = {    name: '前端学苑',    age: 11,    fn: function () {        // this->obj        return () => {            this.name = 'FE2020';            console.log(this); // {name:'FE2020', age: 11, fn:f}        };    }};let f = obj.fn();f.call(100); 

说明：

箭头函数没有this(方法执行的时候不存在初始this这一项操作)，所以基于call/apply操作它都是无用的，没有this。

* 可以在留言区写下你的答案或理解，一起成长进大厂。

推荐热门技术文章：

JS第一座大山：堆栈内存和闭包作用域 (想深入看这里)

• JS基础进阶- 堆栈内存和闭包作用域

• JS基础进阶- 闭包作用域和JS高阶编程技巧

觉得本文对你有帮助？请分享给更多人

关注「前端学苑」加星标，提升前端技能

如果觉得这篇文章还不错，来个【分享、点赞、在看】三连吧，让更多的人也看到~