【面试题】闭包是什么?this 到底指向谁?

news/2024/12/29 20:43:10/

一通百通,其实函数执行上下文、作用域链、闭包、this、箭头函数是相互关联的,他们的特性并不是孤立的,而是相通的。因为内部函数可以访问外层函数的变量,所以才有了闭包的现象。箭头函数内没有 this 和 arguments,所以内部调用了 this,会去上层函数作用域中查找 this 的指向。这些内容都是相通的。我们要融会贯通全面理解,而不是死记硬背哦。

大厂面试题分享 面试题库

前后端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库

变量定义

  • var 声明变量

  • 变量未声明直接使用

这两种方式都可以声明变量,但是该变量会是全局变量,绑定在 window 对象上。同时 var 会有声明提升的作用。

console.log(a);  // undefined;并不会报错var a;
复制代码
  • let 声明变量

  • const 声明变量

let 和 const 是 ES6 新增的关键字,let 和 const 声明的变量不会有声明提前的特点。同时,let 和 const 声明之前的执行瞬间被称为”暂时性死区“,在此阶段引用任何后面才声明的变量都会抛出 ReferenceError。

let 和 const 在全局作用域中声明的变量不会成为 window 对象的属性。

const 声明变量时必须同时初始化变量。

最佳实践:

  • 不使用 var

  • const 优先,let 次之

函数定义

与变量不同,函数定义会提前;变量只是声明提前。

say()  // Hello worldfunctionsay(){console.log('Hello world')}
复制代码

但是使用变量声明函数,函数定义不会提前,同 var 变量声明一样,只是声明会提前。

console.log(say)  // undefinedvar say = function(){console.log('Hello world')}
复制代码
原因是在执行 js 代码之前会进行变量提升和函数定义。

函数执行

作用域 规定了如何查找变量,也就是确定当前执行代码对变量的访问权限。

执行上下文:当我们执行一个方法时,JavaScript 会生成一个与这个方法对应的执行环境(context),又叫执行上下文。这个执行环境中有这个方法的私有作用域、上层作用域的指向、方法的参数(arguments)、私有作用域中定义的变量以及 this 对象。这个执行环境被添加到一个栈中,这个栈就是执行栈。

如果在这个方法的代码中执行到了一行函数调用语句,那么 JavaScript 会生成这个函数的执行环境并将其添加到执行栈中,然后进入这个执行环境继续执行其中的代码。执行完毕后返回结果后,JavaScript 会退出执行环境并把这个执行环境从栈中销毁,回到上一个方法的执行环境。这个过程反复进行,直到执行栈中的代码全部执行完毕。这个执行环境的栈就是执行栈。

执行上下文分全局上下文、函数上下文和块级上下文。

内层函数 fn 内有 arguments 对象、 this 对象、变量;以及函数 Fn 上层作用域的指向。fn 可以访问上层 Fn 的变量,但是不能访问 Fn 的 this 和 arguments 对象。

JavaScript 采用词法作用域,也就是静态作用域。

var value = 1;functionfoo() {console.log(value);
}functionbar() {var value = 2;foo();
}bar();
复制代码

JavaScript采用的是词法作用域,函数的作用域基于函数创建的位置。

块级作用域(ES6新增)

for(let i=0;i<10;i++){// i 只能在这里使用
}
复制代码
functionf(flag){if(flag){var x = 10;}return x;
}
console.log(f(false));  //不会报错, undefined复制代码

闭包和 this

闭包(closure)指的是那些引用了另一个函数作用域中变量的函数,通常是在嵌套函数中实现的。注意:只有引用了另一个函数作用域中的变量,才称为闭包,如果一个函数 A 内部返回了另一个函数 B,内部函数 B 并没有引用 A 的作用域中的变量是不会形成闭包的。博客

javascript - 理解闭包与内存泄漏 - 前海拾贝 - SegmentFault 思否 已验证。

闭包和执行上下文以及作用域是相通的,那就是内部函数可以访问外部函数的变量,但是不能访问外部函数的 this 和 arguments 对象。如下的例子:

window.identity = 'The Window';
let object = {identity: 'My Object',getIdentityFunc() {let code = 'closure'returnfunction() {console.log(code)returnthis.identity;};}
};
console.log(object.getIdentityFunc()()); // 'The Window'复制代码

第6行的匿名函数调用了外部函数 getIdentityFunc 函数作用域中的变量 code,我们称之为闭包,由于内部函数并不能访问外部函数的 this 和 arguments 对象,所以 this 对象并不是 object , 而是全局函数的 this window。

对于普通函数调用时的 this 指向:在全局函数中调用 this,this 等于 window;如果作为某个对象的方法调用,则 this 等于这个对象。先判断谁调用了这个函数,然后再判断 this 指向。

对于箭头函数 this 指向:因为箭头函数内部没有 this 和 arguments 对象,所以箭头函数的 this 指向该函数所在的作用域指向的对象。符合作用域查找逻辑,箭头函数本身没有 this 定义,会沿着作用域链查找。这时的 this 相当于一个变量,按照词法作用域逻辑查找。修改上面的例子:

window.identity = 'The Window';
let object = {identity: 'My Object',getIdentityFunc() {let code = 'closure'return() => {console.log(code)returnthis.identity;};}
};
console.log(object.getIdentityFunc()()); // 'My Object'复制代码

此时,内部函数修改为箭头函数,我们知道箭头函数内部没有自己的 this,所以会沿着作用域链查找上层函数 getIdentityFunc 的 this 指向。由于是 object 调用的 getIdentityFunc,所以 getIdentityFunc 的 this 指向 object 对象。再复杂一点:

window.identity = 'The Window';
let object = {identity: 'My Object',getIdentityFunc() {let code = 'closure'return() => {console.log(code)returnthis.identity;};}
};
const callObject = {identity: 'call object'}
console.log(object.getIdentityFunc.call(callObject)()); // 'call object'复制代码

这里调用的时候,使用了 call 改变了 getIdentityFunc 了 this 指向 callObject, 那么箭头函数在调用的时候,会沿着作用域链找到 getIdentityFunc 的 this 指向为 callObject 对象。

大厂面试题分享 面试题库

前后端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库


http://www.ppmy.cn/news/32718.html

相关文章

2023年网络安全最应该看的书籍,弯道超车,拒绝看烂书

学习的方法有很多种&#xff0c;看书就是一种不错的方法&#xff0c;但为什么总有人说&#xff1a;“看书是学不会技术的”。 其实就是书籍没选对&#xff0c;看的书不好&#xff0c;你学不下去是很正常的。 一本好书其实不亚于一套好的视频教程&#xff0c;尤其是经典的好书…

java基础:深入理解java中的String

下面我们来深入的挖一挖java中的String 类 1. String 类 想要了解一个类&#xff0c;最好的办法就是看这个类的实现源代码&#xff0c;来看一下String类的源码&#xff1a; public final class Stringimplements java.io.Serializable, Comparable<String>, CharSeque…

Java for循环嵌套for循环,你需要懂的代码性能优化技巧

前言 本篇分析的技巧点其实是比较常见的&#xff0c;但是最近的几次的代码评审还是发现有不少兄弟没注意到。 所以还是想拿出来说下。 正文 是个什么场景呢&#xff1f; 就是 for循环 里面还有 for循环&#xff0c; 然后做一些数据匹配、处理 这种场景。 我们结合实例代码来…

《Spring Boot 趣味实战课》读书笔记(二)

牛刀小试——五分钟入门 Spring Boot 万物皆可 Hello World 创建一个 Web 工程 填写项目信息 选择依赖 从 IDEA 打开下载好的 Spring Boot 工程&#xff1a; 完成核心代码 创建 HelloController 类并编写 hello 方法 创建一个 HelloController 类&#xff0c;或者选择 Fi…

多线程案例——阻塞队列

目录 一、阻塞队列 1. 生产者消费者模型 &#xff08;1&#xff09;解耦合 &#xff08;2&#xff09;“削峰填谷” 2. 标准库中的阻塞队列 3. 自己实现一个阻塞队列&#xff08;代码&#xff09; 4. 自己实现生产者消费者模型&#xff08;代码&#xff09; 一、阻塞队列…

Spring——是什么?作用?内容?用到的设计模式?

目录 什么是spring&#xff1f; spring是为了解决什么问题而衍生的&#xff1f;&#xff08;历史&#xff09;Spring解决了实际生产中的什么问题&#xff1f; spring包含了哪些部分&#xff1f;&#xff08;组成&#xff09; Spring的特点是什么&#xff1f; spring框架中…

【笔试强训选择题】Day3.习题(错题)解析

文章目录 前言一、Day3习题&#xff08;错题&#xff09;解析二、Day3习题&#xff08;原题&#xff09;练习总结前言 今天我们将进入到第三天的练习&#xff0c;希望能一直坚持下去&#xff0c;不断反思总结错误&#xff0c;得到进步&#xff1b; 一、Day3习题&#xff08;错…

Unity入门精要04(0)-更复杂的光照

本书知识点是真的多&#xff08; 1.渲染路径 Unity中的渲染路径有如下选项 对某一Pass指定了渲染路径后&#xff0c;Unity会在过程中自动填充系统的变量&#xff0c;便于使用。 1.1 前向渲染路径 前向渲染的伪代码如下 一句话概括前向渲染就是&#xff1a;对于每个光源在其范…