JS 经典面试题初篇(this, 闭包, 原型...)含答案

大家好，我是林一一，这一篇文章是 JS 笔试中经常被问到的知识点变量提升，this指向，原型和原型链，希望能祝大家一臂之力，让我们开始阅读吧 😉

思维导图

一、变量提升

做题前建议先阅读一遍 彻底解决 JS 变量提升的面试题

面试题

1. 问下面输出结果

if( !("a" in window) ){
    var a = 12
}
console.log(a)  // undefined

无论条件是否成立都会变量提升，全局下的 var 相当于给 window 设一个属性 window.a = undefined。所以 !("a" in window) 是 false，输出就是 undefined

2. 问下面输出结果

console.log(a)
var a = '林一一'
function fn(){
    console.log(a)
    var a = 12
}
fn()
console.log(a)
/*  输出
*   undefined
*   undefined
*   林一一
*/

带 var，function 的会因为变量提升，起初 a 为 undefined，全局下赋值为林一一。函数私有作用域内部带 var 的也类似于变量提升让 a = undefined，下一步才是 a= 12。最后全局下输出就是 林一一

3. 下面输出结果

console.log(a)
var a = '林一一'
function fn(){
    console.log(a)
    a = 12
}
fn()
console.log(a)
/*  输出
*   undefined
*   林一一
*   12
*/

函数内部没有变量提升，函数内部的 a是全局下的 a，最后函数执行 a 被赋值 a = 12 输出结果很明显。

4. 求下面输出结果

console.log(a)
a = '林一一'
function fn(){
    console.log(a)
    a = 12
}
fn()
console.log(a)
/*  输出
*  Uncaught ReferenceError: a is not defined
*/

全局下的 a不带 var，没有变量提升。JS 会向上级作用域查找，发现 window 中也没有属性 a，所以发生引用错误 ReferenceError

5.求下面输出结果

var a = '林一一'
function fn(){
    if(!a){
        var a = 12
    }
    console.log(a)
}
fn()
/* 输出
* 12
*/

不管条件是否成立都会进行变量提升a= undefined，if(!a) ==> if(!undefined) ==> true，输出就是 12

6.求下面输出结果

var a=12, b = 13, c = 14
function fn(a){
    a = 0
    var b = 0
    c = 0
}
fn(a)
console.log(a)
console.log(b)
console.log(c)
/* 输出
* 12
* 13
* 0
*/

函数的形参和带 var的 b 是私有变量，所以函数内的 a, b不对全局下的 a, b有何影响。输出结果就是12, 13, 0

二、JS 闭包

做题前建议先阅读一遍 面试 | JS 闭包经典使用场景和含闭包必刷题

面试题

1. 求下面输出结果

var ary = [1, 2, 3, 4]
function fn(i){
    return function(n){
        console.log(n+ (i++))
    }
}

var f = fn(10)
f(20)   // 30
fn(20)(40)  // 60
fn(30)(40)  // 70
f(30)   // 41
console.log(i)  //   Uncaught ReferenceError: i is not defined

这是一道比较简单的题目，需要留意一个地方，n+ (i++) 是 n 先和 i 运算 i 再自加1，() 不会起作用。

2. 某腾的面试题，以下的代码要实现5个 input 按钮循环绑定 click 点击事件，绑定完成后点击1、2、3、4、5五个按钮分别输出0、1、2、3、4五个字符

• 问下面的代码能否实现？
• 不能实现，下面的输出效果是怎么样的？
• 怎么修改才能达到想要的效果，说明理由

<div id="btnBox">
    <input type="button" value="button_1" />
    <input type="button" value="button_2" />
    <input type="button" value="button_3" />
    <input type="button" value="button_4" />
    <input type="button" value="button_5" />
</div>
<script type="text/javascript">
var btnBox = document.getElementById('btnBox'),
      input = btnBox.getElementsByTagName('input')
var l = input.length
for(var i =0; i<l; i++){
    input[i].onclick = function(){
        alter(i);
    }
}
</script>

1. 不能；2. 输出的结果都是5，因为事件绑定是异步的，当绑定事件执行的时候，外部的循环已经结束，用到的变量 i 是全局下的 i，这时的 i=5；3.将 var 改成 let，理由let 具有块级作用域，每一个块级作用域都是私有互不干扰的。或使用闭包解决，或自定义事件解决。具体查看 面试 | JS 闭包经典使用场景和含闭包必刷题

三、JS this

面试题

1. this 指向

var name = '林一一'
var obj = {
    name: '林二二',
    prop: {
        getName: function(){
        return this.name
    }
    }
}
console.log(obj.prop.getName())
var a = obj.prop.getName
console.log(a())
/*
*   undefined
*   林一一
/

这道题直接查看 面试| 你不得不懂的 JS this 指向

3. 闭包和 this 求下面输出结果

var num = 10    // 60； 65
var obj = {
    num: 20    
}
obj.fn = (function (num){
    this.num = num * 3
    num++    // 21
    return function(n){
        this.num += n    // 60 + 5 = 65；20 + 10 =30
        num++   // 21 + 1 = 22；22 + 1 = 23
        console.log(num)
    }
})(obj.num)
var fn = obj.fn
fn(5)   // 22
obj.fn(10)   // 23
console.log(num, obj.num)    // 65, 30

这道题稍微有点难度了，如果熟悉上级作用域的概念和 this 指向就简单点，建议阅读完 面试| 你不得不懂的 JS this 指向。这里只给一点提示，return 的返回的匿名函数的上级作用域是自执行函数， fn(5) 执行时 this 指向 window，obj.fn(10) 执行时 this 指向 window。

四、JS 构造函数和原型链

做题前建议先阅读一遍 面试 | 你不得不懂得 JS 原型和原型链

面试题

1. 某腾的一道原型个原型链面试题，求下面输出结果

function fun(){
    this.a = 0
    this.b = function(){
        alert(this.a)
    }
}

fun.prototype = {
    b: function(){
        this.a = 20
        alert(this.a)
    },
    c: function (){
        this.a = 30
        alert(this.a)
    }
}

var my_fun = new fun()

my_fun.b()    // 0
my_fun.c()    // 30

my_fun.b() 中 函数自身的作用域含有属性 b输出的值就是 0；my_fun.c() 中函数自身没有属性c，就会通过原型链向上查找到fun.prototype.c，输出就是 30。

2. 某腾原型重定向面试题，求下面输出结果

function Fn(){
    var n = 10
    this.m = 20
    this.aa = function() {
        console.log(this.m)
    }
}

Fn.prototype.bb = function () {
    console.log(this.n)
}

var f1 = new Fn
Fn.prototype = {
    aa: function(){
        console.log(this.m + 10)
    }
}

var f2 = new Fn
console.log(f1.constructor)     // ==> function Fn(){...}
console.log(f2.constructor)     // ==> Object() { [native code] }
f1.bb()    // undefined
f1.aa()    // 20
f2.aa()    // 20
f2.__proto__.aa()    // NaN
f2.bb()     //  Uncaught TypeError: f2.bb is not a function

如果有疑问的请阅读一遍 面试 | 你不得不懂得 JS 原型和原型链 f1,f2中本没有 constructor 但是会从构造函数的 prototype 中查找相当于 f1.prototype.constructor，f2的原型被重新定义了指向基类 object; f2.__proto__.aa() 中的 this 指向的是原型 prototype，原型中并没有属性 m，所以 this.m + 10 ==> undefined + 10 ==> NaN 。f2.bb()中 f2 没有属性 bb，通过 __proto__ 向上查找，而原型是经过重定向的原型也没有属性 bb，再向上到基类 object 中也没有属性 bb，则 f2.bb() ==> undefined()，所以报错 TypeError

3. 某厂经典原型面试题，求下面输出结果

function Foo() {
    getName = function (){
        console.log(1)
    }
    return this
}

Foo.getName = function () {
    console.log(2)
}

Foo.prototype.getName = function(){
    console.log(3)
}

var getName = function (){
    console.log(4)
}

function getName() {
    console.log(5)
}
// 1
Foo.getName()
//2
getName()
//3
Foo().getName();
//4
getName();
//5
new Foo.getName()
//6
new Foo().getName()
//7
new new Foo().getName()
/* 输出
*   2
*   4
*   1
*   1
*   2
*   3
*   3
*/

这道题咋一看有点懵了，但每一步分析后也能得出准确答案，我尝试讲明白这道题，但是你必须具备一些前置知识，比如重名下 变量提升，原型和原型链，this 指向，运算符优先级等。

• 在变量提升阶段带 var 和 function 都会变量提升，两则的区别在于 var 只声明为 undefined 不定义，function 的同时声明和定义。同名的 getName 会先声明和定义赋值一个函数的推内存地址，也就是上面输出 console.log(5) 的函数地址，在 JS 代码执行后 getName 被重新赋值一个新堆内存地址 console.log(4)。Foo.getName() 就是函数作为对象的调用，1中的输出就是2；
• 2 中 getName() 输出就是4，因为 getName() 的引用地址是 console.log(4)中的；
• 3 中 Foo().getName()，Foo()执行后全局下的 getName 引用地址再次改变成 console.log(1) 且返回了 this指向 window 输出结果就是1；
• 4 中getName是全局下的，输出自然是也是1；
• 5中 new Foo.getName() 函数执行输出 2；
• 6 中new Foo().getName() => new A.getName()，先对 new Foo() 实例化再对 A.getName() 调用，对 new Foo() 实例化调用的 getName() 方法是原型 prototype 上的，输出就是 3；
• 7 中 new new Foo().getName() => new B.getName()，先对 new Foo() 实例化再对 new B.getName() 实例化，new B.getName() 同时也在执行 B.getName() 方法输出的还是实例 B 上的方法也就是原型 prototype 的 getName。

结束

感谢阅读到这里，我是林一一，如果这篇文章能对你有点帮助或启发欢迎 star,下次见。