最新《2w字大章 38道面试题》彻底理清JS中this指向问题(1)，学习web开发培训

于 2024-05-09 20:02:00 发布
阅读量348 收藏 7
点赞数 4
分类专栏： 程序员 文章标签： 前端 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84436095/article/details/138629384
版权

最后

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分截图：

题目3.4：函数作为参数传递

将上面的题略作修改，doFoo不在window上执行，改为在obj2中执行

function foo() {

console.log(this.a)

}

function doFoo(fn) {

console.log(this)

fn()

}

var obj = { a: 1, foo }

var a = 2

var obj2 = { a: 3, doFoo }

obj2.doFoo(obj.foo)

  • console.log(this): obj2.doFoo符合xxx.fn格式，doFoo的为隐式绑定，this为obj2，打印{a: 3, doFoo: ƒ}

  • fn(): 没有于obj2产生联系，默认绑定，打印2

答案

{a: 3, doFoo: ƒ}

2

题目3.5：回调函数

下面这个题目我们写代码时会经常遇到：

var name=‘zcxiaobao’;

function introduce(){

console.log('Hello,My name is ', this.name);

}

const Tom = {

name: ‘TOM’,

introduce: function(){

setTimeout(function(){

console.log(this)

console.log('Hello, My name is ',this.name);

})

}

}

const Mary = {

name: ‘Mary’,

introduce

}

const Lisa = {

name: ‘Lisa’,

introduce

}

Tom.introduce();

setTimeout(Mary.introduce, 100);

setTimeout(function(){

Lisa.introduce();

},200);

setTimeout是异步调用的，只有当满足条件并且同步代码执行完毕后，才会执行它的回调函数。

  • Tom.introduce()执行: console位于setTimeout的回调函数中，回调函数的this指向window

  • Mary.introduce直接作为setTimeout的函数参数(类似题目题目3.3)，会发生隐式绑定丢失，this为默认绑定

  • Lisa.introduce执行虽然位于setTimeout的回调函数中，但保持xxx.fn模式，this为隐式绑定。

答案

Window {…}

Hello, My name is  zcxiaobao

Hello,My name is  zcxiaobao

Hello,My name is  Lisa

所以如果我们想在setTimeout或setInterval中使用外界的this，需要提前存储一下，避免this的丢失。

const Tom = {

name: ‘TOM’,

introduce: function(){

_self = this

setTimeout(function(){

console.log('Hello, My name is ',_self.name);

})

}

}

Tom.introduce()

题目3.6：隐式绑定丢失综合题

name = ‘javascript’ ;

let obj = {

name: ‘obj’,

A (){

this.name += ‘this’;

console.log(this.name)

},

B(f){

this.name += ‘this’;

f();

},

C(){

setTimeout(function(){

console.log(this.name);

},1000);

}

}

let a = obj.A;

a();

obj.B(function(){

console.log(this.name);

});

obj.C();

console.log(name);

本题目不做解析，具体可以参照上面的题目。

答案

javascriptthis

javascriptthis

javascriptthis

undefined

4.显式绑定

显式绑定比较好理解，就是通过call()、apply()、bind()等方法，强行改变this指向。

上面的方法虽然都可以改变this指向，但使用起来略有差别：

  • call()和apply()函数会立即执行

  • bind()函数会返回新函数，不会立即执行函数

  • call()和apply()的区别在于call接受若干个参数，apply接受数组。

题目4.1：比较三种调用方式

function foo () {

console.log(this.a)

}

var obj = { a: 1 }

var a = 2

foo()

foo.call(obj)

foo.apply(obj)

foo.bind(obj)

  • foo(): 默认绑定。

  • foo.call(obj): 显示绑定，foo的this指向obj

  • foo.apply(obj): 显式绑定

  • foo.bind(obj): 显式绑定，但不会立即执行函数，没有返回值

答案

2

1

1

题目4.2：隐式绑定丢失

题目3.4发生隐式绑定的丢失，如下代码：我们可不可以通过显式绑定来修正这个问题。

function foo() {

console.log(this.a)

}

function doFoo(fn) {

console.log(this)

fn()

}

var obj = { a: 1, foo }

var a = 2

doFoo(obj.foo)

  1. 首先先修正doFoo()函数的this指向。

doFoo.call(obj, obj.foo)

  1. 然后修正fn的this。

function foo() {

console.log(this.a)

}

function doFoo(fn) {

console.log(this)

fn.call(this)

}

var obj = { a: 1, foo }

var a = 2

doFoo(obj.foo)

大功告成。

题目4.3：回调函数与call

接着上一个题目的风格，稍微变点花样：

var obj1 = {

a: 1

}

var obj2 = {

a: 2,

bar: function () {

console.log(this.a)

},

foo: function () {

setTimeout(function () {

console.log(this)

console.log(this.a)

}.call(obj1), 0)

}

}

var a = 3

obj2.bar()

obj2.foo()

乍一看上去，这个题看起来有些莫名其妙，setTimeout那是传了个什么东西？

做题之前，先了解一下setTimeout的内部机制：(关于异步的执行顺序，可以参考JavaScript之EventLoop[6])

setTimeout(fn) {

if (回调条件满足) (

fn

)

}

这样一看，本题就清楚多了，类似题目4.2，修正了回调函数内fn的this指向。

答案

2

{a: 1}

1

题目4.4：注意call位置

function foo () {

console.log(this.a)

}

var obj = { a: 1 }

var a = 2

foo()

foo.call(obj)

foo().call(obj)

  • foo(): 默认绑定

  • foo.call(obj): 显式绑定

  • foo().call(obj): 对foo()执行的返回值执行call，foo返回值为undefined，执行call()会报错

答案

2

1

2

Uncaught TypeError: Cannot read property ‘call’ of undefined

题目4.5：注意call位置(2)

上面由于foo没有返回函数，无法执行call函数报错，因此修改一下foo函数，让它返回一个函数。

function foo () {

console.log(this.a)

return function() {

console.log(this.a)

}

}

var obj = { a: 1 }

var a = 2

foo()

foo.call(obj)

foo().call(obj)

  • foo(): 默认绑定

  • foo.call(obj): 显式绑定

  • foo().call(obj): foo()执行，打印2，返回匿名函数通过call将this指向obj，打印1。

这里千万注意：最后一个foo().call(obj)有两个函数执行，会打印2个值。

答案

2

1

2

1

题目4.6：bind

将上面的call全部换做bind函数，又会怎样那？

call是会立即执行函数，bind会返回一个新函数，但不会执行函数

function foo () {

console.log(this.a)

return function() {

console.log(this.a)

}

}

var obj = { a: 1 }

var a = 2

foo()

foo.bind(obj)

foo().bind(obj)

首先我们要先确定，最后会输出几个值？bind不会执行函数，因此只有两个foo()会打印a。

  • foo(): 默认绑定，打印2

  • foo.bind(obj): 返回新函数，不会执行函数，无输出

  • foo().bind(obj): 第一层foo()，默认绑定，打印2，后bind将foo()返回的匿名函数this指向obj，不执行

答案

2

2

题目4.7：外层this与内层this

做到这里，不由产生了一些疑问：如果使用call、bind等修改了外层函数的this，那内层函数的this会受影响吗？(注意区别箭头函数)

function foo () {

console.log(this.a)

return function() {

console.log(this.a)

}

}

var obj = { a: 1 }

var a = 2

foo.call(obj)()

foo.call(obj): 第一层函数foo通过call将this指向obj，打印1；第二层函数为匿名函数，默认绑定，打印2。

答案

1

2

题目4.8：对象中的call

把上面的代码移植到对象中，看看会发生怎样的变化？

var obj = {

a: ‘obj’,

foo: function () {

console.log(‘foo:’, this.a)

return function () {

console.log(‘inner:’, this.a)

}

}

}

var a = ‘window’

var obj2 = { a: ‘obj2’ }

obj.foo()()

obj.foo.call(obj2)()

obj.foo().call(obj2)

看着这么多括号，是不是感觉有几分头大。没事，咱们来一层一层分析：

  • obj.foo()(): 第一层obj.foo()执行为隐式绑定，打印出foo:obj；第二层匿名函数为默认绑定，打印inner:window

  • obj.foo.call(obj2)(): 类似题目4.7，第一层obj.foo.call(obj2)使用call将obj.foo的this指向obj2，打印foo: obj2；第二层匿名函数默认绑定，打印inner:window

  • obj.foo().call(obj2): 类似题目4.5，第一层隐式绑定，打印：foo: obj，第二层匿名函数使用call将this指向obj2，打印inner: obj2

题目4.9：带参数的call

显式绑定一开始讲的时候，就谈过call/apply存在传参差异，那咱们就来传一下参数，看看传完参数的this会是怎样的美妙。

var obj = {

a: 1,

foo: function (b) {

b = b || this.a

return function © {

console.log(this.a + b + c)

}

}

}

var a = 2

var obj2 = { a: 3 }

obj.foo(a).call(obj2, 1)

obj.foo.call(obj2)(1)

要注意call执行的位置：

  • obj.foo(a).call(obj2, 1):

  • obj.foo(a): foo的AO中b值为传入的a(形参与实参相统一)，值为2，返回匿名函数fn

  • 匿名函数fn.call(obj2, 1): fn的this指向为obj2，c值为1

  • this.a + b + c = obj2.a + FooAO.b + c = 3 + 2 + 1 = 6

  • obj.foo.call(obj2)(1):

  • obj.foo.call(obj2): obj.foo的this指向obj2，未传入参数，b = this.a = obj2.a = 3；返回匿名函数fn

  • 匿名函数fn(1): c = 1，默认绑定，this指向window

  • this.a + b + c = window.a + obj2.a + c = 2 + 3 + 1 = 6

答案

6

6

麻了吗，兄弟们。进度已经快过半了，休息一会，争取把this一次性吃透。b4fbc430e3f83429f8f4a6712047606f.png

5.显式绑定扩展

上面提了很多call/apply可以改变this指向，但都没有太多实用性。下面来一起学几个常用的call与apply使用。

题目5.1：apply求数组最值

JavaScript中没有给数组提供类似max和min函数，只提供了Math.max/min，用于求多个数的最值，所以可以借助apply方法，直接传递数组给Math.max/min

const arr = [1,10,11,33,4,52,17]

Math.max.apply(Math, arr)

Math.min.apply(Math, arr)

题目5.2：类数组转为数组

ES6未发布之前，没有Array.from方法可以将类数组转为数组，采用Array.prototype.slice.call(arguments)或[].slice.call(arguments)将类数组转化为数组。

题目5.3：数组高阶函数

日常编码中，我们会经常用到forEach、map等，但这些数组高阶方法，它们还有第二个参数thisArg，每一个回调函数都是显式绑定在thisArg上的。

例如下面这个例子

const obj = {a: 10}

const arr = [1, 2, 3, 4]

arr.forEach(function (val, key){

console.log(${key}: ${val} --- ${this.a})

}, obj)

答案

0: 1 — 10

1: 2 — 10

2: 3 — 10

3: 4 — 10

关于数组高阶函数的知识可以参考: JavaScript之手撕高阶数组函数

6.new绑定

使用new来构建函数，会执行如下四部操作：

  1. 创建一个空的简单JavaScript对象（即{}）；

  2. 为步骤1新创建的对象添加属性__proto__，将该属性链接至构造函数的原型对象 ；

  3. 将步骤1新创建的对象作为this的上下文 ；

  4. 如果该函数没有返回对象，则返回this。

关于new更详细的知识，可以参考：JavaScript之手撕new[7]

通过new来调用构造函数，会生成一个新对象，并且把这个新对象绑定为调用函数的this。

题目6.1：new绑定

function User(name, age) {

this.name = name;

this.age = age;

}

var name = ‘Tom’;

var age = 18;

var zc = new User(‘zc’, 24);

console.log(zc.name)

答案

zc

题目6.2：属性加方法

function User (name, age) {

this.name = name;

this.age = age;

this.introduce = function () {

console.log(this.name)

}

this.howOld = function () {

return function () {

console.log(this.age)

}

}

}

var name = ‘Tom’;

var age = 18;

var zc = new User(‘zc’, 24)

zc.introduce()

zc.howOld()()

这个题很难不让人想到如下代码，都是函数嵌套，具体解法是类似的，可以对比来看一下啊。

const User = {

name: ‘zc’;

age: 18;

introduce = function () {

console.log(this.name)

}

howOld = function () {

return function () {

console.log(this.age)

}

}

}

var name = ‘Tom’;

var age = 18;

User.introduce()

User.howOld()()

  • zc.introduce(): zc是new创建的实例，this指向zc，打印zc

  • zc.howOld()(): zc.howOld()返回一个匿名函数，匿名函数为默认绑定，因此打印18(阿包永远18)

答案

zc

18

题目6.3：new界的天王山

new界的天王山，每次看懂后，没过多久就会忘掉，但这次要从根本上弄清楚该题。

接下来一起来品味品味：

function Foo(){

getName = function(){ console.log(1); };

return this;

}

Foo.getName = function(){ console.log(2); };

Foo.prototype.getName = function(){ console.log(3); };

var getName = function(){ console.log(4); };

function getName(){ console.log(5) };

Foo.getName();

getName();

Foo().getName();

getName();

new Foo.getName();

new Foo().getName();

new new Foo().getName();

  1. 预编译

GO = {

Foo: fn(Foo),

getName: function getName(){ console.log(5) };

}

  1. 分析后续执行

  • Foo.getName(): 执行Foo上的getName方法，打印2

  • getName(): 执行GO中的getName方法，打印4

  • Foo().getName()

// 修改全局GO的getName为function(){ console.log(1); }

getName = function(){ console.log(1) }

// Foo为默认绑定，this -> window

// return window

return this

复制代码

  • Foo().getName(): 执行window.getName()，打印1

  • Foo()执行

  • getName(): 执行GO中的getName，打印1

  1. 分析后面三个打印结果之前，先补充一些运算符优先级方面的知识(图源：MDN[8])1e61c0a608a59fa0ded6c305c656c1b7.png

从上图可以看到，部分优先级如下：new(带参数列表) = 成员访问 = 函数调用 > new(不带参数列表)

  1. new Foo.getName()

首先从左往右看：new Foo属于不带参数列表的new(优先级19)，Foo.getName属于成员访问(优先级20)，getName()属于函数调用(优先级20)，同样优先级遵循从左往右执行。

  • Foo.getName执行，获取到Foo上的getName属性

  • 此时原表达式变为new (Foo.getName)()，new (Foo.getName)()为带参数列表(优先级20)，(Foo.getName)()属于函数调用(优先级20)，从左往右执行

  • new (Foo.getName)()执行，打印2，并返回一个以Foo.getName()为构造函数的实例

这里有一个误区：很多人认为这里的new是没做任何操作的的，执行的是函数调用。那么如果执行的是Foo.getName()，调用返回值为undefined，new undefined会发生报错，并且我们可以验证一下该表达式的返回结果。

console.log(new Foo.getName())

// 2

// Foo.getName {}

可见在成员访问之后，执行的是带参数列表格式的new操作。

  1. new Foo().getName()

  • 同步骤4一样分析，先执行new Foo()，返回一个以Foo为构造函数的实例

  • Foo的实例对象上没有getName方法，沿原型链查找到Foo.prototype.getName方法，打印3

new new Foo().getName()

从左往右分析: 第一个new不带参数列表(优先级19)，new Foo()带参数列表(优先级20)，剩下的成员访问和函数调用优先级都是20

  • new Foo()执行，返回一个以Foo为构造函数的实例

  • 在执行成员访问，Foo实例对象在Foo.prototype查找到getName属性

  • 执行new (new Foo().getName)()，返回一个以 Foo.prototype.getName()为构造函数的实例，打印3

  1. new Foo.getName() 与 new new Foo().getName()区别：

  • new Foo.getName()的构造函数是Foo.getName

  • new new Foo().getName()的构造函数为Foo.prototype.getName

测试结果如下:

foo1 = new Foo.getName()

foo2 = new new Foo().getName()

console.log(foo1.constructor)

console.log(foo2.constructor)

输出结果：

2

3

ƒ (){ console.log(2); }

ƒ (){ console.log(3); }

通过这一步比较应该能更好的理解上面的执行顺序。

答案

2

4

1

1

2

3

3

兄弟们，革命快要成功了，再努力一把，以后this都小问题啦。0e5176240ba4b64118eadfb94de311d6.png

7.箭头函数

箭头函数没有自己的this，它的this指向外层作用域的this，且指向函数定义时的this而非执行时。

  1. this指向外层作用域的this: 箭头函数没有this绑定，但它可以通过作用域链查到外层作用域的this

  2. 指向函数定义时的this而非执行时: JavaScript是静态作用域，就是函数定义之后，作用域就定死了，跟它执行时的地方无关。更详细的介绍见JavaScript之静态作用域与动态作用域[9]。

题目7.1：对象方法使用箭头函数

name = ‘tom’

const obj = {

name: ‘zc’,

intro: () => {

console.log('My name is ’ + this.name)

}

}

obj.intro()

上文说到，箭头函数的this通过作用域链查到，intro函数的上层作用域为window。

答案

My name is tom

题目7.2：箭头函数与普通函数比较

name = ‘tom’

const obj = {

name: ‘zc’,

intro:function ()  {

return () => {

console.log('My name is ’ + this.name)

}

},

intro2:function ()  {

return function() {

console.log('My name is ’ + this.name)

}

}

}

obj.intro2()()

obj.intro()()

  • obj.intro2()(): 不做赘述，打印My name is tom

  • obj.intro()(): obj.intro()返回箭头函数，箭头函数的this取决于它的外层作用域，因此箭头函数的this指向obj，打印My name is zc

题目7.3：箭头函数与普通函数的嵌套

name = ‘window’

const obj1 = {

name: ‘obj1’,

intro:function ()  {

console.log(this.name)

return () => {

console.log(this.name)

}

}

}

const obj2 = {

name: ‘obj2’,

intro: ()=>  {

console.log(this.name)

return function() {

console.log(this.name)

}

}

}

const obj3 = {

name: ‘obj3’,

intro: ()=> {

console.log(this.name)

return () => {

console.log(this.name)

}

}

}

obj1.intro()()

obj2.intro()()

obj3.intro()()

  • obj1.intro()(): 类似题目7.2，打印obj1，obj1

  • obj2.intro()(): obj2.intro()为箭头函数，this为外层作用域this，指向window。返回匿名函数为默认绑定。打印window，window

  • obj3.intro()(): obj3.intro()与obj2.intro()相同，返回值为箭头函数，外层作用域intro的this指向window，打印window，window

答案

obj1

obj1

window

window

window

window

题目7.4：new碰上箭头函数

function User(name, age) {

this.name = name;

this.age = age;

this.intro = function(){

console.log('My name is ’ + this.name)

},

this.howOld = () => {

console.log('My age is ’ + this.age)

}

}

var name = ‘Tom’, age = 18;

var zc = new User(‘zc’, 24);

zc.intro();

zc.howOld();

  • zc是new User实例，因此构造函数User的this指向zc

  • zc.intro(): 打印My name is zc

  • zc.howOld(): howOld为箭头函数，箭头函数this由外层作用域决定，且指向函数定义时的this，外层作用域为User，this指向zc，打印My age is 24

题目7.5：call碰上箭头函数

箭头函数由于没有this，不能通过call\apply\bind来修改this指向，但可以通过修改外层作用域的this来达成间接修改

var name = ‘window’

var obj1 = {

name: ‘obj1’,

intro: function () {

console.log(this.name)

return () => {

console.log(this.name)

}

},

intro2: () => {

console.log(this.name)

return function () {

console.log(this.name)

}

}

}

var obj2 = {

name: ‘obj2’

}

obj1.intro.call(obj2)()

obj1.intro().call(obj2)

obj1.intro2.call(obj2)()

obj1.intro2().call(obj2)

  • obj1.intro.call(obj2)(): 第一层函数为普通函数，通过call修改this为obj2，打印obj2。第二层函数为箭头函数，它的this与外层this相同，同样打印obj2。

  • obj1.intro().call(obj2): 第一层函数打印obj1，第二次函数为箭头函数，call无效，它的this与外层this相同，打印obj1

  • obj1.intro2.call(obj2)(): 第一层为箭头函数，call无效，外层作用域为window，打印window；第二次为普通匿名函数，默认绑定，打印window

  • obj1.intro2().call(obj2): 与上同，打印window；第二层为匿名函数，call修改this为obj2，打印obj2

答案

obj2

obj2

obj1

obj1

window

window

window

obj2

8.箭头函数扩展

总结

  • 箭头函数没有this，它的this是通过作用域链查到外层作用域的this，且指向函数定义时的this而非执行时。

  • 不可以用作构造函数，不能使用new命令，否则会报错

  • 箭头函数没有arguments对象，如果要用，使用rest参数代替

  • 不可以使用yield命令，因此箭头函数不能用作Generator函数。

  • 不能用call/apply/bind修改this指向，但可以通过修改外层作用域的this来间接修改。

  • 箭头函数没有prototype属性。

避免使用场景

  1. 箭头函数定义对象方法

const zc = {

name: ‘zc’,

intro: () => {

// this -> window

console.log(this.name)

}

}

zc.intro() // undefined

  1. 箭头函数不能作为构造函数

const User = (name, age) => {

this.name = name;

this.age = age;

}

// Uncaught TypeError: User is not a constructor

zc = new User(‘zc’, 24);

  1. 事件的回调函数

DOM中事件的回调函数中this已经封装指向了调用元素，如果使用构造函数，其this会指向window对象

document.getElementById(‘btn’)

.addEventListener(‘click’, ()=> {

console.log(this === window); // true

})

9.综合题

学完上面的知识，是不是感觉自己已经趋于化境了，现在就一起来华山之巅一决高下吧。

题目9.1: 对象综合体

var name = ‘window’

var user1 = {

name: ‘user1’,

foo1: function () {

console.log(this.name)

},

foo2: () => console.log(this.name),

foo3: function () {

return function () {

console.log(this.name)

}

},

foo4: function () {

return () => {

console.log(this.name)

}

}

}

var user2 = { name: ‘user2’ }

user1.foo1()

user1.foo1.call(user2)

user1.foo2()

user1.foo2.call(user2)

user1.foo3()()

user1.foo3.call(user2)()

user1.foo3().call(user2)

user1.foo4()()

user1.foo4.call(user2)()

user1.foo4().call(user2)

这个题目并不难，就是把上面很多题做了个整合，如果上面都学会了，此题问题不大。

  • user1.foo1()、user1.foo1.call(user2): 隐式绑定与显式绑定

  • user1.foo2()、user1.foo2.call(user2): 箭头函数与call

  • user1.foo3()()、user1.foo3.call(user2)()、user1.foo3().call(user2): 见题目4.8

对象篇

模块化编程-自研模块加载器

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

2401_84436095
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值