博客 / 詳情

返回

面試 | JS 經典面試題初篇(this, 閉包, 原型...)含答案

推薦閲讀地址

掘金

github

變量提升

做題前建議先閲讀一遍 徹底解決 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。最後全局下輸出就是 林一一。更詳細的變量提升請查看 徹底解決 JS 變量提升的面試題
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。

    結束

感謝閲讀到這裏，如果這篇文章能對你有點幫助的話，歡迎 github star。我是林一一，下次見。
閉包 , this的用法 , 原型鏈 , 前端 , Javascript
user avatar zzd41 頭像 lanlanjintianhenhappy 頭像 dujing_5b7edb9db0b1c 頭像 codepencil 頭像 susouth 頭像 weirdo_5f6c401c6cc86 頭像 gaoming13 頭像 waweb 頭像
8 位用戶收藏了這個故事！

發佈 評論

Some HTML is okay.