自检:前端知识清单——作用域和闭包

前言

题目来自ConardLi的blog
写的是自己的题解,水平有限,所以仅供参考
代码会整合在github,觉得有帮助就给个star吧~

正文

一、Javascript基础

作用域和闭包

三、作用域和闭包

1、理解词法作用域和动态作用域

只有词法作用域,没有真正的动态作用域

2、理解JavaScript的作用域和作用域链

  • 作用域是某个变量,函数,对象的可访问性。
  • 作用域就是一个地盘。
  • 作用域最大的用处就是隔离变量,不同作用域下同名变量不会有冲突。

ES6 之前 JavaScript 没有块级作用域,只有全局作用域和函数作用域。ES6的到来,为我们提供了‘块级作用域’,可通过新增命令let和const来体现。

沿着作用域一层一层往上查找的过程就叫做作用域链

3、理解JavaScript的执行上下文栈,可以应用堆栈信息快速定位问题

一个作用域下可能包含若干个上下文环境。有可能从来没有过上下文环境(函数从来就没有被调用过);有可能有过,现在函数被调用完毕后,上下文环境被销毁了;有可能同时存在一个或多个(闭包)。同一个作用域下,不同的调用会产生不同的执行上下文环境,继而产生不同的变量的值。

4、this的原理以及几种不同使用场景的取值

this 的取值是函数执行上下文(context)的一部分
严格模式下,禁止this指向全局对象

1、全局&调用普通函数

全局

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

调用普通函数

var x = 10
function foo(){
  console.log(this === window)  //true
  console.log(this.x);   //10
}

2、构造函数
如果函数作为构造函数使用,那么其中的 this 就代表它即将 new 出来的对象

function foo(){
  this.x = 10
  console.log(this)        //Foo {x:10}
}
const demo = new foo()
console.log(foo.x);      //10

3、对象的方法
如果函数作为对象的方法时,方法中的 this 指向该对象。

const obj = {
  x: 10,
  foo: function(){
    console.log(this) //obj
    console.log(this.x) //10
  }
}
obj.foo();

有一个比较特殊的情况,就是在对象的方法里面定义方法,就像这样

const obj = {
  x: 10,
  foo: function(){
    console.log(this)
    function f(){
        console.log(this);      //Window
        console.log(this.x);    //undefined
    }
    f()
  }
}

函数 f 虽然是在 obj.foo 内部定义的,但它仍然属于一个普通函数,this 仍指向 window

4、构造函数 prototype 属性

在 Foo.prototype.getX 函数中,this 指向的 foo 对象。不仅仅如此,即便是在整个原型链中,this 代表的也是当前对象的值。

function Foo(){
    this.x = 10;
}
Foo.prototype.getX = function () {
    console.log(this);        //Foo {x: 10, getX: function}
    console.log(this.x);      //10
}
const foo = new Foo();
foo.getX();

5、函数用 call、apply或者 bind 调用。

var obj = {
    x: 10
}
function foo(){
    console.log(this);     //{x: 10}
    console.log(this.x);   //10
}
foo.call(obj);
foo.apply(obj);
foo.bind(obj)();

6、DOM event this

function Listener(){   
    document.getElementById('foo').addEventListener('click', this.handleClick);     //这里的 this 指向 Listener 这个对象。不是强调的是这里的 this
}
Listener.prototype.handleClick = function (event) {
    console.log(this);    //<div id="foo"></div>
}
const listener = new Listener();
document.getElementById('foo').click();

7、箭头函数,this穿透

5、闭包的实现原理和作用,可以列举几个开发中闭包的实际应用

  • 闭包的概念:指有权访问另一个函数作用域中的变量的函数,一般情况就是在一个函数中包含另一个函数。

  • 闭包的作用:访问函数内部变量、保持函数在环境中一直存在,不会被垃圾回收机制处理。

在实际开发中,闭包主要是用来封装变量,收敛权限。

6、理解堆栈溢出和内存泄漏的原理,如何防止

内存泄露:是指申请的内存执行完后没有及时的清理或者销毁,占用空闲内存,内存泄露过多的话,就会导致后面的程序申请不到内存。因此内存泄露会导致内部内存溢出

堆栈溢出:是指内存空间已经被申请完,没有足够的内存提供了

常见的手段是将一个变量置为null,该变量就会被下一轮垃圾回收机制回收。

常见的内存泄露的原因:

  • 全局变量引起的内存泄露
  • 闭包
  • 没有被清除的计时器

解决方法:

  • 减少不必要的全局变量
  • 严格使用闭包(因为闭包会导致内存泄露)
  • 避免死循环的发生

7、如何处理循环的异步操作

async await
递归
设置标记位

8、理解模块化解决的实际问题,可列举几个模块化方案并理解其中原理

解决的问题:

  • Common.js
    引入模块化编程

  • AMD
    1、多个js文件可能有依赖关系,被依赖的文件需要早于依赖它的文件加载到浏览器;
    2、js加载的时候浏览器会停止页面渲染,加载文件越多,页面失去响应时间越长。

  • CMD
    模块定义方式和模块加载(可以说运行、解析)时机上有所不同。

  • ES6 import
    尽量的静态化、使得编译时就能确定模块的依赖关系,以及输入和输出的变量。(CommonJS和AMD模块,都只能在运行时确定这些东西)。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容