备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

《2w字大章 38道面试题》彻底理清JS中this指向问题(一)

2022-04-28 120
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 《2w字大章 38道面试题》彻底理清JS中this指向问题(一)

前言

当一个函数调用时，会创建一个执行上下文，这个上下文包括函数调用的一些信息(调用栈，传入参数，调用方式)，this就指向这个执行上下文。


this不是静态的，也并不是在编写的时候绑定的，而是在运行时绑定的。它的绑定和函数声明的位置没有关系，只取决于函数调用的方式。


本篇文章有点长，涉及到很多道面试题，有难有简单，如果能耐心的通读一编，我相信以后this都不成问题。


学习this之前，建议先学习以下知识:



在文章的最开始，陈列一下本篇文章涉及的内容，保证让大家不虚此行。


  • 默认绑定
  • 隐式绑定
  • 隐式绑定丢失
  • 显式绑定
  • 显式绑定应用
  • new绑定
  • 箭头函数绑定
  • 综合题
  • 总结


this指向哪里

在JavaScript中，要想完全理解this，首先要理解this的绑定规则，this的绑定规则一共有5种：


  1. 默认绑定
  2. 隐式绑定
  3. 显式(硬)绑定
  4. new绑定
  5. ES6新增箭头函数绑定


下面来一一介绍以下this的绑定规则。


1.默认绑定


默认绑定通常是指函数独立调用，不涉及其他绑定规则。非严格模式下，this指向window，严格模式下，this指向undefined。


题目1.1：非严格模式

var foo = 123;
function print(){
  this.foo = 234;
    console.log(this); // window
  console.log(foo); // 234
}
print();  
复制代码


非严格模式，print()为默认绑定，this指向window，所以打印window和234。

这个foo值可以说道两句： 如果学习过预编译的知识，在预编译过程中，foo和print函数会存放在全局GO中(即window对象上)，所以上述代码就类似下面这样：


window.foo = 123
function print() {
    this.foo = 234;
    console.log(this); 
  console.log(window.foo);
}
window.print()
复制代码


题目1.2：严格模式


把题目1.1稍作修改，看看严格模式下的执行结果。


"use strict"可以开启严格模式


"use strict";
var foo = 123;
function print(){
    console.log('print this is ', this); 
    console.log(window.foo)
    console.log(this.foo);
}
console.log('global this is ', this);
print();
复制代码


注意事项：开启严格模式后，函数内部this指向undefined，但全局对象window不会受影响


答案

global this is Window{...}
print this is undefined
123
Uncaught TypeError: Cannot read property 'foo' of undefined
复制代码


题目1.3：let/const


let a = 1;
const b = 2;
var c = 3;
function print() {
    console.log(this.a);
    console.log(this.b);
    console.log(this.c);
}
print();
console.log(this.a);
复制代码


let/const定义的变量存在暂时性死区，而且不会挂载到window对象上，因此print中是无法获取到a和b的。


答案


undefined
undefined
3
undefined
复制代码


题目1.4：对象内执行


a = 1;
function foo() {
    console.log(this.a); 
}
const obj = {
    a: 10,
    bar() {
        foo(); // 1
    }
}
obj.bar(); 
复制代码


foo虽然在obj的bar函数中，但foo函数仍然是独立运行的，foo中的this依旧指向window对象。


题目1.5：函数内执行


var a = 1
function outer () {
  var a = 2
  function inner () { 
    console.log(this.a) // 1
  }
  inner()
}
outer()
复制代码


这个题与题目1.4类似，但要注意，不要把它看成闭包问题


题目1.6：自执行函数


a = 1;
(function(){
    console.log(this);
    console.log(this.a)
}())
function bar() {
    b = 2;
    (function(){
        console.log(this);
        console.log(this.b)
    }())
}
bar();
复制代码


默认情况下，自执行函数的this指向window


自执行函数只要执行到就会运行，并且只会运行一次，this指向window。


答案


Window{...}
1
Window{...}
2 // b是imply global，会挂载到window上
复制代码


2.隐式绑定

函数的调用是在某个对象上触发的，即调用位置存在上下文对象，通俗点说就是**XXX.func()**这种调用模式。


此时func的this指向XXX，但如果存在链式调用，例如XXX.YYY.ZZZ.func，记住一个原则：this永远指向最后调用它的那个对象。


题目2.1：隐式绑定


var a = 1;
function foo() {
    console.log(this.a); 
}
// 对象简写，等同于 {a:2, foo: foo}
var obj = {a: 2, foo}
foo();
obj.foo();
复制代码


  • foo(): 默认绑定，打印1
  • obj.foo(): 隐式绑定，打印2


答案


1
2
复制代码


obj是通过var定义的，obj会挂载到window之上的，obj.foo()就相当于window.obj.foo()，这也印证了this永远指向最后调用它的那个对象规则。


题目2.2：对象链式调用


感觉上面总是空谈链式调用的情况，下面直接来看一个例题：


var obj1 = {
    a: 1,
    obj2: {
        a: 2,
        foo(){
            console.log(this.a)
        }
    }
}
obj1.obj2.foo() // 2
复制代码


3.隐式绑定的丢失

隐式绑定可是个调皮的东西，一不小心它就会发生绑定的丢失。一般会有两种常见的丢失：


  • 使用另一个变量作为函数别名，之后使用别名执行函数
  • 将函数作为参数传递时会被隐式赋值


隐式绑定丢失之后，this的指向会启用默认绑定。


具体来看题目：


题目3.1：取函数别名


a = 1
var obj = {
    a: 2,
    foo() {
        console.log(this.a)
    }
}
var foo = obj.foo;
obj.foo();
foo();
复制代码


JavaScript对于引用类型，其地址指针存放在栈内存中，真正的本体是存放在堆内存中的。


上面将obj.foo赋值给foo，就是将foo也指向了obj.foo所指向的堆内存，此后再执行foo，相当于直接执行的堆内存的函数，与obj无关，foo为默认绑定。笼统的记，只要fn前面什么都没有，肯定不是隐式绑定。


答案


2 
1
复制代码


不要把这里理解成window.foo执行，如果foo为let/const定义，foo不会挂载到window上，但不会影响最后的打印结果


题目3.2：取函数别名


如果取函数别名没有发生在全局，而是发生在对象之中，又会是怎样的结果呢？


var obj = { 
    a: 1, 
    foo() {
        console.log(this.a)
    } 
};
var a = 2;
var foo = obj.foo;
var obj2 = { a: 3, foo: obj.foo }
obj.foo();
foo();
obj2.foo();
复制代码


obj2.foo指向了obj.foo的堆内存，此后执行与obj无关(除非使用call/apply改变this指向)


答案


1 
2 
3
复制代码


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


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. 找形参和变量声明，值赋予undefined
  2. 将形参与实参相统一，也就是将实参的值赋予形参。


obj.foo作为实参，在预编译时将其值赋值给形参fn，是将obj.foo指向的地址赋给了fn，此后fn执行不会与obj产生任何关系。fn为默认绑定。


答案


Window {…}
2
复制代码


题目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
javascriptthis
复制代码


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)


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 (c) {
      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一次性吃透。


image.png

文章标签：
JavaScript
Go
前端开发
存储
关键词：
JavaScript面试题
JavaScript this
JavaScript this指向
面试题JavaScript this指向
战场小包
目录
相关文章
小周sir
|
11天前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
小周sir
30 5
低代码布道师
|
1月前
|
JavaScript 前端开发
javascript中的this
javascript中的this
低代码布道师
13 0
阿珊和她的猫
|
3月前
|
JavaScript 前端开发
错综复杂的this：理清你的JavaScript代码中的指向问题
错综复杂的this：理清你的JavaScript代码中的指向问题
阿珊和她的猫
29 0
远近高低各不同
|
1月前
|
JavaScript
JS中改变this指向的六种方法
JS中改变this指向的六种方法
远近高低各不同
22 0
众所周知
|
25天前
|
JavaScript 前端开发
js开发：请解释this关键字在JavaScript中的用法。
JavaScript中的`this`关键字根据执行上下文指向不同对象：全局作用域中指向全局对象（如`window`），普通函数中默认指向全局对象，但作为对象方法时指向该对象。在构造函数中，`this`指向新实例。箭头函数不绑定`this`，而是继承上下文的`this`值。可通过`call`、`apply`、`bind`方法显式改变`this`指向。
众所周知
8 2
远近高低各不同
|
1月前
|
JavaScript
JS中call()、apply()、bind()改变this指向的原理
JS中call()、apply()、bind()改变this指向的原理
远近高低各不同
14 0
1024小神
|
1月前
|
设计模式 JavaScript 前端开发
最常见的26个JavaScript面试题和答案
最常见的26个JavaScript面试题和答案
1024小神
38 1
多加点香菜85
|
2月前
|
JavaScript 前端开发
JavaScript中this的指向问题
JavaScript中this的指向问题
多加点香菜85
11 1
阿珊和她的猫
|
3月前
|
前端开发 JavaScript
揭开`this`的神秘面纱：探索 JavaScript 中的上下文密钥(下)
揭开`this`的神秘面纱：探索 JavaScript 中的上下文密钥(下)
阿珊和她的猫
31 0
阿珊和她的猫
|
3月前
|
前端开发 JavaScript
揭开`this`的神秘面纱：探索 JavaScript 中的上下文密钥(上)
揭开`this`的神秘面纱：探索 JavaScript 中的上下文密钥(上)
阿珊和她的猫
9 0

热门文章

最新文章

  • 1
    使用 JavaScript 获取 URL 参数的详细指南
  • 2
    JavaScript爬虫进阶攻略：从网页采集到数据可视化
  • 3
    JavaScript字符串检查：从基础到高级
  • 4
    JS+CSS3点击粒子烟花动画js特效
  • 5
    第198天：js---内置对象的原型链和其他知识
  • 6
    【转】js实现页面跳转的几种方式
  • 7
    让页面所有的文本框不能输入空格(JavaScript)
  • 8
    JavaScript replace() 方法转换时间数据中的“-”和“/”
  • 9
    文章自动排版javascript程序
  • 10
    JS正则表达式详解(转)
  • 1
    JS+CSS3点击粒子烟花动画js特效
    11
  • 2
    JavaScript爬虫进阶攻略：从网页采集到数据可视化
    39
  • 3
    JavaScript字符串检查：从基础到高级
    22
  • 4
    使用 JavaScript 获取 URL 参数的详细指南
    195
  • 5
    监控内网电脑软件设计与实现：基于Node.js的服务器端架构分析
    86
  • 6
    Java Script 中的垃圾回收机制有哪些缺点
    13
  • 7
    描述 JavaScript 中的垃圾回收机制。
    17
  • 8
    如何使用 JavaScript 操作 DOM？
    13
  • 9
    解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
    17
  • 10
    JavaScript 中的数组方法有哪些？
    10

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Vue.js 入门与实战
  • Node.js 入门教程文档

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）
    为什么选择阿里云什么是云计算全球基础设施技术领先稳定可靠安全合规分析师报告
    产品和定价全部产品免费试用产品动态产品定价价格计算器云上成本管理
    解决方案技术解决方案
    文档与社区文档开发者社区天池大赛培训与认证
    权益中心免费试用高校计划企业扶持计划推荐返现计划
    支持与服务基础服务企业增值服务迁云服务官网公告健康看板信任中心
    关注阿里云
    关注阿里云公众号或下载阿里云APP，关注云资讯，随时随地运维管控云服务
    阿里云APP阿里云微信
    联系我们：4008013260
    法律声明Cookies政策廉正举报安全举报联系我们加入我们
    阿里巴巴集团淘宝网天猫全球速卖通阿里巴巴国际交易市场1688阿里妈妈飞猪阿里云计算AliOS万网高德UC友盟优酷钉钉支付宝达摩院淘宝海外阿里云盘饿了么
    © 2009-2024 Aliyun.com 版权所有 增值电信业务经营许可证： 浙B2-20080101 域名注册服务机构许可： 浙D3-20210002 京D3-20220015
    浙公网安备 33010602009975号浙B2-20080101-4