JS 闭包经典使用场景和含闭包必刷题

ゝ一纸荒年。 2023-01-21 07:21 21阅读 0赞

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

![ff25f2a7ad39af188ab04417b1e0b39a.png][]

# 来源：LinYIYI #

https://juejin.cn/post/6942697803709677582

## 思维导图 ##

![1e0e494e64e104af3a433d89357d4fc5.png][]

## this 的指向 ##

*  **执行函数前有 `'.'` 点操作符的话，函数体中的 `this` 就指向前面的对象，没有就指向 `window`，严格模式下指向 `undefined`。这句话特别的重要，请记住**
 *  函数没有直接调用者 `this` 指向全局对象(浏览器中是window，node中是 global)。如匿名函数等
 *  构造函数的 `this` 指向实例本身。
 *  箭头函数本身没有`this`的，箭头函数的 `this` 指向最近的非箭头函数 `this`，找不到就指向 `window`，严格模式下指向 `undefined`。

> **再来看一下这句话：执行函数前有 `'.'` 点操作符的话，函数体中的 `this` 就指向前面的对象，没有就指向 `window`**

### 一、普通函数 this 的热身题 ###

#### 热身题 1 ####

var name = '林一一'
    function fn(){
        var name = '林二二'
        return this.name
    }
    fn()    // 林一一
    复制代码

> 执行函数 `fn()`，前面没有 `'.'` 点操作符吧，那么这里的 `this` 就指向 `window`。输出的就是全局下的 `name = '林一一'`。

**再来看一下这句话：执行函数前有 `'.'` 点操作符的话，函数体中的 `this` 就指向前面的对象，没有就指向 `window`**

#### 热身题 2 ####

var name = '林二二'
    var obj = {
        name: '林一一',
        fn: function () {
            return this.name
        }
    }
    console.log(obj.fn())   // '林一一'
    var fo = obj.fn
    console.log(fo())       // '林二二'     fo() ==> window.fo()
    复制代码

> `obj.fn()` 中函数 `fn()` 前面有 `'.'` 点操作符吧，那么这里的 `this` 就指向 `obj` 这个对象。再看执行函数 `fo()`，前面没有 `'.'` 点操作符吧，那么这里的 `this` 就指向 `window`。其实上面的函数 `fo() ==> window.fo()`，所以执行函数 `fo()` 前面也是可以看作是有 `'.'` 操作符的。

**再来看一下这句话：执行函数前有 `'.'` 点操作符的话，函数体中的 `this` 就指向前面的对象，没有就指向 `window`**

#### 热身题 3，修改一下热身题 2 ####

var name = '林二二'
    var obj = {
        name: '林一一',
        fn: function () {
            var name = '小三'
            return function(){
                 return this.name
            }
        }
    }
    console.log(obj.fn()())   // 林二二
    var fo = obj.fn()
    console.log(fo())    // 林二二
    复制代码

> 热身3和热身2差不多，`obj.fn()()` 中 `obj.fn()`执行完后有一个函数(这里称为函数 `A`)返回，最后相当于执行函数 `A()`， `A()` 前面没有 `'.'` 点操作符吧，那么这里的 `this` 就指向 `window`，输出就是 `林二二` 了。上面的 `fo()` 函数同理。

### 二、函数没有直接调用者（更新） ###

**函数没有直接调用者 `this` 指向全局对象(浏览器中是window，node中是 global)，如匿名函数等；严格模式下指向 `undefined`**

#### 热身题 1 ####

var name = '林一一';
    !(function(){
       console.log(this.name)   // 林一一
    })()
    复制代码

> 自执行函数没有直接的调用者输出的 `name = '林一一'`。

#### 热身题 2 ####

var name = '林一一'
    var obj = {
        name : '二二',
        callback: function(){
            console.log(this.name)
        }
    }
    
    setTimeout(obj.callback,1000)
    /* 输出
    *   林一一
    */
    复制代码

> 函数 `setTimeout`，`obj.callback(这只是一个引用地址)` 中并没有直接调用者，`this` 就指向 `window`。所以输出的 `name` 就是全局下的 `林一一`。

### 三、构造函数中的 this ###

**来读一下这句话：构造函数的 `this` 指向实例本身**

> 关于构造函数的 `this` 为什么指向实例是浏览器指定的，详情看 `new` 这个过程发生了什么 面试 | 你不得不懂得 JS 原型和原型链

#### 热身题 1 ####

function Fn(){
        var n = 0
        this.name = '林一一'
        this.age = 18
        this.getName = function(){
            return this.name
        }
    }
    
    Fn.prototype.getAge = function(){
        return this.age
    }
    
    Fn.x = '林二二'
    
    var f = new Fn()
    console.log(f.name)     // 林一一
    console.log(f.getName())     // 林一一
    console.log(f.getAge())        // 18
    console.log(f.n)    // undefined
    console.log(f.x)    // undefined
    复制代码

> 上面的 `Fn` 经过 `new`后就是一个构造函数，`this` 就指向实例 `f`。所以上面的1，2输出都是`林一一`。`f.getAge()` 是实例 `f` 调用了`getAge` 输出就是 18，问：实例 `f` 中并没有属性 `getAge` 是怎么输出 18的，`f.x` 输出又为什么是 `undefined` ？答：这是原型链的查找机制，属性 `x` 不是在原型 `prototype` 上的就不是实例的属性，可以读一下这篇文章 面试 | 你不得不懂得 JS 原型和原型链；问：为什么`f.n` 输出的是 `undefined`。因为变量 `n` 是构造函数的私有变量和 `new` 创建的实例没有关系。

### 四、箭头函数 ###

*  **箭头函数本身没有 `this`，箭头函数的`this`继承上下文的，里面的 `this`会指向当前最近的非箭头函数的 `this`，找不到就是 `window` (严格模式是undefined)**
 *  **箭头函数的this，是定义时指定的不是执行时指定的**

#### 热身题 1 ####

var name = '林一一'
    var obj = {
        name: '二二',
        a: () => {
            console.log(this.name)
        }
    }
    obj.a()
    
    /* 输出
    *   '林一一'
    */
    复制代码

> 箭头函数的 `this`，找不到非箭头函数的 `this` 就直接指向 `window`。

#### 热身题 2 ####

var name = '林一一'
    var obj = {
        name: '二二',
        fn: function() {
            return () => {
                console.log(this.name)
            }
        }
    }
    obj.fn()()
    
    /* 输出
    *   '二二'
    */
    复制代码

> 很明显箭头函数的 `this` 来自函数 `fn`，对象 `obj` 调用了函数 `fn`，所以 `fn` 的 `this` 指向 `obj`，输出结果就是 `二二`。

### 五、call，apply，bind 改变 this 的指向 ###

**提示：所有的函数都是基于 `Function` 这个基类来创建的，同样拥有 `Function` 原型上面的方法**

*  `call`，接受`this`的对象，和一组列表。`apply` 和 `call` 一样，唯一不同的是 `apply` 接受的是一个包含多个参数的数组。`bind` 同样也是改变函数的 `this` 指向，只不过 `bind` 执行后会返回一个新的函数，新函数中参数来源于剩余的参数

#### 热身题 ####

var name = '林一一'
    var age = 18
    function fn(){
       return this.name
    }
    
    function p(){
        return {
            age: this.age,
            arg: arguments
        }
    }
    
    let obj = {
        name: '二二',
        age: 18
    }
    
    let o = {
        name: '三三'
    }
    
    fn()    // '林一一'
    fn.call(obj)    // '二二'
    fn.call(o)  //  '三三'
    p.call(obj, 12, 23, 45, 67) // {age: 18, arg: Arguments(4)}
    
    fn.apply(obj)    // "二二"
    p.apply(obj, [1, 2, 3, 4, 5])    // {age: 18, arg: Arguments(5)}
    
    fn.bind(obj)()  // "二二"
    p.bind(obj, 12, 23, 34)()   // {age: 18, arg: Arguments(3)}
    复制代码

> 以上就是 `call`, `apply`, `bind`, 关于 `this` 的内容，这里不介绍三者的写法，如果介绍可以写另一篇文章了。对这三者不熟悉的可以找其他资料看看。

## 思考题 ##

### 1. 笔试题 this 指向问题 ###

var name = '林一一'
    var obj = {
        name: '林二二',
        show: function (){
            console.log(this.name)
        },
        wait: function () {
            var fn = this.show
            fn()
        }
    }
    obj.wait()  //  林一一
    复制代码

> `obj.wait()` 中，执行函数 `wait()` 前面有 `'.'` 点操作符吧，那么这里的 `this` 就指向 `obj` 这个对象，所以`this.show ==> obj.show`。再看执行函数 `fn()` 前面没有 `'.'` 点操作符吧，那么这里的 `this` 就指向 `window`，输出就是 `林一一`。

### 2. 阿里 this 指向和原型面试题（新增） ###

**new 创建函数的过程中发生了什么可以看这篇 面试 | 你不得不懂得 JS 原型和原型链**

function Foo() {
        Foo.a = function() {
            console.log(1)
        }
    
        this.a = function() {
            console.log(2)
        }
    }
    
    Foo.prototype.a = function() {
        console.log(3)
    }
    
    Foo.a = function() {
        console.log(4)
    }
    
    Foo.a();
    
    let obj = new Foo(); 
    obj.a();
    Foo.a();
    /*
    *   4
    *   2
    *   1
    */
    复制代码

> `Foo.a();` 中直接调用函数的私有方法`a` 输出结果就是 4。`new Foo();` 过程中函数的私有 `a` 被重新赋值，同时原型`prototype` 上的属性`a`也被重新赋值。所以`obj.a();` 输出结果就是 2，`Foo.a();`输出结果就是 1。

### 3. 和闭包有关的 this 指向问题 ###

var n = 2 // -> 4 -> 8
    var obj = {
        n: 3,    // 6
        fn: (function(n){
            n*=2
            this.n+=2    // window 下的 n 变成 4
            var n = 5    // 这一步不会再重新声明，因为已经参数赋值，就不会再声明而是直接赋值 n = 5
            console.log("window.n", window.n)
            return function (m) {
                console.log("n:", n, "m", m)    // n:5  m:3  这里的 n 向上查找是 5   // 
                this.n*=2    // fn(3): 2 * 4 =8  //  obj.fn(3): 2 * 3 = 6 
                console.log(m + (++n))    // 3 + (++5) ++n 导致上级作用域的n变成了6    // 3 + (++6)
            } 
        })(n)
    }
    
    var fn = obj.fn;
    fn(3)    // 9
    obj.fn(3)    // 10
    console.log(n, obj.n)    // 8 6
    /* 输出
    * 9
    * 10
    * 8  6
    /
    复制代码

> 这道题就留给大家思考了，上面有我的分析步骤，觉得碍眼的话可以去掉 ????。你可以在评论区给出你的分析过程。

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

[ff25f2a7ad39af188ab04417b1e0b39a.png]: /images/20221020/bd2995ca8a2540298a903a254d4cdaa6.png
[1e0e494e64e104af3a433d89357d4fc5.png]: /images/20221020/9638abc6c3bc436588fb37d4e444475a.png