JavaScript中this的指向问题及面试题你掌握了吗？

this 作为JavaScript中的一个关键字，它的复杂度很高，主要原因是它所处不同场景的代表的指向是不一样的。这里先做一个结论，重要事情说三遍：

this的指向是由上下文环境动态决定的

我自己是一名从事了多年开发的web前端老程序员，前段时间我花了一个月整理了一份最适合学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以添加下面的QQ群，即可免费获取。

this指向实例场景
关于this的指向的不确定性，主要体现在如下几个应用场景中：

全局环境
普通函数调用
由call/apply/bind函数调用
对象属性方法调用
构造函数调用
箭头函数
全局环境
在全局环境中无论是否是严格模式，this 均指向全局对象，例如浏览器端的 window

// 在浏览器中, window 对象同时也是全局对象：```javascript
console.log(this === window); // truea = 37;
console.log(window.a); // 37this.b = "MDN";
console.log(window.b)  // "MDN"
console.log(b)         // "MDN"


普通函数调用
当普通的函数，直接调用的时候，一般来说分两种情况:严格模式绑定到 undefined
非严格模式绑定到全局对象 window```javascript
function foo(){console.log(this);
}
function bar(){"use strict"; console.log(this);
}
foo() // window
bar() // undefined

call/apply/bind函数调用
call/apply 这两个函数对象到方法能立即执行某个函数，并且讲函数中的this绑定到你提供到对象上去

bind 方法永久的绑定函数中的this到指定对象上，并返回一个新函数，将来这个函数无论怎么调用都可以

function foo(){console.log(this);
}
function bar(){console.log(this);
}
foo.call({name:'小米'}); // {name: "小米"}const bar1 = bar.bind({num:123})
bar1() // {num: 123}

对象属性方法调用
作为对象属性方法调用，都指向前面调用函数都那个对象。当然有的时候会出现各种变种或者干扰的面试题

const student = {name: "tom",fn: function () {return this;},
};
console.log(student.fn() === student);

构造函数调用或者类上下文
构造函数作为JavaScript创建对象的那只大母鸡（实际上类是构造函数的语法糖），通常程序界有个段子叫做new 一个对象，谁还敢说程序员（媛）没有对象的,这种方式调用this指向的是你new出来的那个对象实例本身:

function Person(name){console.log(this);this.name = name
}const p = new Person('tom')
console.log(p);

箭头函数中的this
箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

var obj = {name: "tom",foo() {setTimeout(() => {console.log(this);}, 1000);},
};obj.foo() // obj

面试题
常见面试题有： 1、手写bind函数

Function.prototype.mybind = function (ctx, ...args) {const fn = this;return function () {fn.apply(ctx, args);};
};function foo(x, y) {console.log(this, x, y);
}const foo1 = foo.mybind({ name: "zhangsan" }, 10, 20);
foo1();

2、new 操作符调用构造函数，具体做了什么？

创建一个新的对象；
将构造函数的 this 指向这个新对象；
为这个对象添加属性、方法等；
最终返回新对象。

JavaScript中this的指向问题及面试题你掌握了吗？相关推荐

JAVAscript中的this指向和this指向的修改
JAVAscript中的this指向和this指向的修改 this 关键字一般在函数中使用,表示哪个对象执行了当前函数. 每一个函数内部都有一个关键字是 this . 函数内部的 this 只和函数 ...
$.ligerdialog.open中确定按钮加事件_彻底搞懂JavaScript中的this指向问题
JavaScript中的this是让很多开发者头疼的地方,而this关键字又是一个非常重要的语法点.毫不夸张地说,不理解它的含义,大部分开发任务都无法完成. 想要理解this,你可以先记住以下两点: ...
JavaScript中this的指向问题
this是面向对象语言中一个重要的关键字,理解并掌握该关键字的使用对于我们代码的健壮性及优美性至关重要.而javascript的this又有区别于Java.C#等纯面向对象的语言,这使得this更加扑 ...
理解JavaScript中this的指向详解
this的定义和理解: this是JavaScript语言的一个关键字,它是函数运行时,在函数体内部自动生成的一个对象,只能在函数体内使用. 1.this和执行环境对象有关,和函数的声明无关. var ...
JavaScript中this的指向
JavaScript之this指向问题 js中的this指向问题一直不是很清楚,看了coderwhy老师的文章后特此记录一下. this在全局作用域下使用 this在全局作用域下指向的就是window ...
JavaScript中的 this指向问题
以下文章均已附上原文链接 ,侵删文章一:vue中的this指向问题 vue中的this指向问题_JingG459的博客-CSDN博客_vue中this指向问题最近写项目遇到很多this指向的问题, ...
38 JavaScript中的this指向问题
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.函数内this指向问题函数内部的this指向是当我们调用函数的时候确定的.调用方式的 ...
javascript中关于this指向问题详解
前言 LiuDaP 在前端的学习中,我们必然要用到js,js可以说是前端必不可少的的东西.在学习js的过程中,我们会经常用到this这个东西,而this的指向问题就变得尤为重要.今天正好有空闲 ...
JavaScript中this指针指向的彻底理解
this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象这一点与函数中自由变量Action-varibal不同 1 va ...

JavaScript中this的指向问题及面试题你掌握了吗？

JavaScript中this的指向问题及面试题你掌握了吗？相关推荐

最新文章

热门文章