前端面试题整理——作用域和闭包

什么是闭包,闭包的表现形式:

// 作用域应用的特殊情况,有两种表现:
    // 函数作为参数被传递
    // 函数作为返回值被返回

    // 函数作为返回值
    function create() {
        let a = 100
        return function () {
            console.log(a)
        }
    }
    let fn = create();
    let a = 200;
    fn()

    //函数作为参数
    function print(fn) {
        let b = 200;
        fn()
    }
    let b = 100;
    function fnb() {
        console.log(b)
    }
    print(fnb)

    // 闭包:自由变量的查找,是在函数定义的地方向上级作用域查找,不是在执行的地方。

this的使用场景:

  • 作为普通函数调用
  • 使用call、apply、bind 调用
  • 作为对象方法被调用
  • 在class方法中调用
  • 箭头函数
重点,无论什么场景调用,this的值都是在函数“执行时”被定义,而不是“定义”函数时定义。
箭头函数的this是取函数上级作用域的this

实际开发中闭包的应用:

隐藏数据,如做一个简单的cache工具,闭包隐藏数据,只提供API。
function createCache() {
        const data = {} // 闭包中的数据被隐藏,不被外界访问
        return {
            set: function (key, val) {
                return data[key] = val
            },
            get: function (key) {
                return data[key]
            }
        }
    }
    const c = new createCache()
    c.set('name','aaa')
    console.log(c.get('name'))

写出下列代码的输出:

var x = 2;
    var y = {
        x: 3,
        z: (function (x) {
            this.x *= x;
            x += 2;
            return function (n) {
                this.x *= n;
                x += 3;
                console.log(x)
            }
        })(x)
    }
    var m = y.z
    m(4);
    y.z(5);
    console.log(x, y.x);
(0)

相关推荐

  • ES6中的函数(函数参数、默认值、箭头函数)

    一.函数参数的解构赋值 function foo([a,b]) { console.log(a+b); // 3 } foo([1,2]); function bar({c,d}) { console ...

  • 17K star 仓库,解决 90% 的大厂基础面试题

    前言 笔者开源的前端进阶之道已有三年之久,至今也有 17k star,承蒙各位读者垂爱.在当下部分内容已经略微过时,因此决定提笔翻新内容. 翻新后的内容会全部集合在「干爆前端」中,有兴趣的读者可以前往 ...

  • JavaScript-作用域

    作用域有:全局作用域和局部作用域 var  除了函数的{}之外,其他地方都不会认为是子作用域 let   在任意{ }里面,如果用的是let关键词定义的变量,那么这个{}视为一个子作用域,在for的( ...

  • 再也不怕 JavaScript 报错了,怎么看怎么处理都在这

    在开发中,有时,我们花了几个小时写的 JS 代码,在游览器调试一看,控制台一堆红,瞬间一万头草泥马奔腾而来.至此,本文主要记录 JS 常见的一些报错类型,以及常见的报错信息,分析其报错原因,并给予处理 ...

  • 闭包理解

    闭包 刚学过的闭包,分享一下闭包的理解 1.什么是闭包? 闭包就是一个函数,也可以说闭包是一个引用关系,可以理解为一个作用域可以访问另一个函数的局部变量. 代码: function fn() { va ...

  • JavaScript 之 作用域

    学习目标:能够说出Javascript的两种作用域 能够区分全局变量和局部变量 能够说出如何在作用域链中查找变量的值 1.作用域 <script> //1.javaScript作用域:就是 ...

  • 深入理解JavaScript作用域和作用域链

    目录 前言 作用域(Scope) 1.什么是作用域 2.全局作用域和函数作用域 3.块级作用域 作用域链 1.什么是自由变量 2.什么是作用域链 3.关于自由变量的取值 作用域与执行上下文 解释阶段: ...

  • 前端面试题整理——手写简易jquery

    class jQuery { constructor(selector) { const result = document.querySelectorAll(selector) console.lo ...

  • 前端面试题整理——原型和原型链

    Class的使用: // 父类 class People { constructor(name) { this.name = name } eat() { console.log(`${this.na ...

  • 前端面试题整理——深拷贝

    const obj = { a: 100, b: { b1: [1, 2, 3], b2: 'string' }, c: ['a', 'b', 'c'] } /* * 没做深拷贝的效果 const o ...

  • 前端面试题整理——手写bind函数

    var arr = [1,2,3,4,5] console.log(arr.slice(1,4)) console.log(arr) Function.prototype.bind1 = functi ...

  • 前端面试题整理——手写AJAX

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  • 前端面试题整理——VUE双向绑定原理

    VUE2.0和3.0数据双向绑定的原理,并说出其区别. 代码: <!DOCTYPE html> <html lang="en"> <head> ...

  • 前端面试题整理——Javascript基础

    常见值类型: let a; //undefined let s = 'abc'; let n = 100; let b = true; let sb = Symbol('s'); let nn = N ...

  • 前端面试题整理——HTML/CSS

    如何理解语义化: 对应的内容是用相应意思的标签,增加开发者和机器爬虫对代码的可读性. 块状元素和内联元素: 块状元素有:display:block/table:有div h1 h2 table ul  ...

  • 网络编程及前端面试题!Python入门

    当我们学习Python时,需要掌握的的知识有很多,除了有关Python的专业知识外,我们还需要学习网络编程.前端等知识,对此这篇文章为大家总结一下Python常见面试题之网络编程及前端的问题. 第一: ...