2018-09-27前端面试之js相关问题

最近我也是经历过面试别人和去面试的人了,总结几个常被提及的面试问题,做一下解答和备忘。

JavaScript 中 this 是如何工作的 ?

先来看看这个题目:

var x = 0;

var foo = {

x:1,

bar:{

x:2,

baz: function () {

console.log(this.x)

}

}

}

var a = foo.bar.baz

foo.bar.baz() // 2

a() //0

this 永远指向函数运行时所在的对象,而不是函数创建时所在的对象匿名函数和不处于任何对象中的函数,This指向windowcall, apply, with指的This是谁就是谁。普通函数调用,函数被谁调用,This就指向谁

上面的例子中,baz被bar调用所以指向的指bar. a 运行时所在的对象是 window,所以指向的是window。

作用域链?

理解执行环境和上下文

函数调用都有与之相关的作用域和上下文。从根本上说,作用域是基于函数(function-based)而上下文是基于对象(object-based)。换句话说,作用域是和每次函数调用时变量的访问有关,并且每次调用都是独立的。上下文总是关键字 this 的值,是调用当前可执行代码的对象的引用。

执行上下文分有global、function、eval,一个函数可以产生无数个执行上下文,一系列的执行上下文从逻辑上形成了 执行上下文栈,栈底总是全局上下文,栈顶是当前(活动的)执行上下文。

执行上下文三属性:this指针,变量对象(数据作用域),作用域链

作用域链 即:一变量在自己的作用域中没有,那么它会寻找父级的,直到最顶层。过程如下:

任何在执行上下文时刻的作用域都由作用域链来实现在一个函数被定义的时候, 会将它定义时刻的scope chain链接到这个函数对象的[[scope]]属性在一个函数对象被调用的时候,会创建一个活动对象(也就是一个对象), 然后对于每一个函数的形参,都命名为该活动对象的命名属性, 然后将这个活动对象做为此时的作用域链(scope chain)最前端, 并将这个函数对象的[[scope]]加入到scope chain中.

上面的文字大家可以好好琢磨一下,可以更好的理解函数作用域。

函数声明提升和变量声明提升(Hoisting) ?

我们先来了解js编译器在执行代码的过程:

以执行一段function代码为例:

第一步:创建可执行上下文(以下简称为EC),压入当前的EC栈中。EC中包括了以下信息:

词法环境(=环境记录项(保存变量、函数声明和形参)+ 外部词法环境(function的[[scope]]属性,作用域链的本质))this的指针变量环境(与环境记录项的值相同,但不再发生变动。)

第二步:收集函数声明、变量声明和形参,保存在环境记录项内。这个收集的过程,就是一般所谓的声明提升现象的本质。如果发现了重复的标识符,则优先级为函数声明 、形参 、变量声明(优先级低的会被无视)。

第三步:开始执行代码,环境记录项内没有的标识符会根据作用域链查找标识符对应的值,环境记录项亦有可能因赋值语句而被修改。

第四步:函数执行完毕,EC栈被弹出、销毁。

好了,第二步说的很清楚了 声明提升(Hoisting)现象就是在收集函数、变量声明和形参的过程会根据函数声明、形参、变量声明的顺序优先级来收集。

例子:

var a = 1;

function b() {

a = 10;

return;

function a() {}

}

b();

console.log(a);

// 输出1 由于函数声明提升,b内的实际是这样:

// function b() {

// function a() {}; 这里是函数声明提升

// a = 10;

// return;

// function a() {}

// }

理解了吗?

勘误:谢谢github上有同学的指正关于博客中的一个问题 · Issue #1 · stephenzhao/hexo-theme-damon,上面的正确执行应该为先进行预编译,所以先执行function a(){},然后会进行对a的赋值操作。

//正确的顺序应该为:

// function b() {

// function a() {}

// a = 10;

// return;

// }

什么是闭包,如何使用它,为什么要使用它?

还是上面的题目,做个变形。

var x = 0;

var foo = {

x:1,

bar:function () {

console.log(this.x);

var that = this;

return function () {

console.log(this.x)

console.log(that.x)

}

}

}

foo.bar() // 1

foo.bar()() // this: 0, that: 1

上面的例子中ba'r里面返回了一个匿名函数,这个匿名函数可以在外部被调用即:foo.bar()() 读取到了bar的执行上下文的变量对象 that,这个函数就形成了一个闭包。

好了,我们理解了上面的套路,下面来解释闭包就好理解了。

闭包就是能够读取其它函数内部变量的函数

在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”

var x = 0;

var bar:function () {

var n = 999;

return function () {

return n;

}

}

var outer = bar();

outer() // 999

用途:

读取函数内部的变量让这些变量的值始终保持在内存中

我们修改一下上面的代码

var add;

var bar = function () {

var n = 999;

add = function () {

n += 1;

}

return function () {

return n;

}

}

var outer = bar();

outer() // 999

add();

outer(); // 1000

说明,n一直保存在内存当中,而没有在bar()执行完成之后被销毁;

原因:

bar里面的匿名函数被赋值给了outer,这个导致在outer没有被销毁的时候,该匿名函数一直存在内存当中,而匿名函数的存在依赖于bar,所以bar需要使用都在内存当中,所以bar并不会在调用结束后呗垃圾回收机制给收回。

而上面的add接受的也是一个匿名函数,该匿名函数本身也是闭包,所以也可以在外部操作里面的变量。

注意点

会导致内存泄漏,慎用闭包会修改内部变量的值,所以在使用闭包作为对象的公用方法时要谨慎。

闭包的一个应用,单例模式

单例模式的定义是产生一个类的唯一实例

单例模式在js中经常会遇到,比如 var a = {}; 其实就是一个单例子。

但是我们写一个更有意义的单例:

var singleton = function( fn ){

var result;

return function(){

return result || ( result = fn .apply( this, arguments ) );

}

}

更简洁一点的:

var singleton = (function () {

var instance;

return function (object) {

if(!instance){

instance = new object();

}

return instance;

}

})();

有任何疑惑加群QQ786276452

对前端的技术,架构技术感兴趣的同学关注我的头条号,并在后台私信发送关键字:“前端”即可获取免费的架构师学习资料

知识体系已整理好(源码,笔记,PPT,学习视频),欢迎免费领取。还有面试视频分享可以免费获取。关注我,可以获得没有的架构经验哦!!

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

推荐阅读更多精彩内容