javascript经典面试题16道

第1题. 

 console.log(a)  
 var a = 12
 function fn() {
   console.log(a)
   var a = 13
 }
 fn()
 console.log(a)  

控制台显示为： 

 第2题.

console.log(a) 
var a = 12
function fn() {
 console.log(a) 
 a = 13
}
fn()
console.log(a) 

控制台显示为： 

 第3题.

 console.log(a)  
 let a = 12  
 function fn() {
  console.log(a)  
  let a = 13  
 fn()
 console.log(a) 

控制台显示为：

console.log(a)  //报错
let a = 12  //let定义的变量，不存在提升
function fn() {
  console.log(a)  //报错，注意：只要是当前作用域里面的存在的变量，就不会去上层作用域找了
  let a = 13  //let定义的变量，不存在提升
}
fn()
console.log(a) 

 第4题.

console.log(a)  
a = 12   
function fn() {
 console.log(a) 
 let a = 13
}
fn()
console.log(a) 

控制台显示为：

console.log(a)  //报错
a = 12   // 定义变量可以不使用任何关键字，但是在定义该变量之前，不能使用该变量（这是一种不规范写法）
function fn() {
 console.log(a)  //报错
 let a = 13
}
fn()
console.log(a)

第5题.

var foo = 1
function bar() {
  if (!foo) {
  var foo = 10  
  }
 console.log(foo) 
}
bar() 

控制台显示为：

var foo = 1
function bar() {
   if (!foo) {
   var foo = 10  //这个foo会提升到当前作用域的顶部定义
   }
console.log(foo)  //10
}
bar() 

第6题.

var foo = 1
function bar() {
   if (!foo) {
    foo = 10
   }
console.log(foo)   
}
bar() 

控制台显示为：

第7题.

var n = 0
function a() {
  var n = 10  
  function b() {
       n++  
   console.log(n)  
  }
  b()
  return b
}
var c = a()
c()
console.log(n)  

控制台显示为：

var n = 0
function a() {
   var n = 10   //11   12
   function b() {
        n++  //11  12
    console.log(n)  //11  12
   }
   b()
   return b
}
var c = a()
c()
console.log(n)  // 0 

第8题.

var a = 10
var b = 11
var c = 12
function test(a) {
    a = 1
    var b = 2   
    c = 3  
}
test(10)
console.log(a)  
console.log(b)  
console.log(c)  

控制台显示为：

var a = 10
var b = 11
var c = 12
function test(a) {
    a = 1
    var b = 2   //方法里面的作用域b是2
    c = 3  //会将外层作用域的c的值换掉
}
test(10)
console.log(a)  // 10
console.log(b)  // 11
console.log(c)  // 3 

 第9题.

if (!('a' in window)) {
      var a = 10
}
console.log(a) 

控制台显示为：

// in关键字，用于检查一个属性是否包含在指定的对象中，如果包含就返回true
if (!('a' in window)) {
       var a = 10
}
console.log(a) //undefined

 第10题.

var a = 4
function b(x, y, a) {
   console.log(a) 
   arguments[2] = 10  
   console.log(a)  
}
a = b(1, 2, 3)  
console.log(a)  

控制台显示为：

var a = 4
function b(x, y, a) {
   console.log(a)  // 打印形参的值 3
   arguments[2] = 10  // 又将形参a改成而来 10
   console.log(a)  // 10
}
a = b(1, 2, 3)  //b方法，没有返回任何内容，默认返回undefined
console.log(a)  //undefined 

第11题.

var a = 9
function fn() {
   a = 0  
   return function (b) {
       return b + a++
   }
}
var f = fn()
console.log(f(5))   
console.log(fn()(5))
console.log(f(5))  
console.log(a)

控制台显示为：

var a = 9
function fn() {
    a = 0  // 1 2
    return function (b) {
        return b + a++   第一次// 5 + 0    第二次//  5 + 1
    }
}
var f = fn()
console.log(f(5))   //5
console.log(fn()(5))  //5
console.log(f(5))   //6
console.log(a) //2 

第12题.

var ary = [1, 2, 3, 4]
function fn(ary) {
     ary[0] = 0  
     ary = [0]    
     ary[0] = 100 
     return ary
}
var res = fn(ary)   
console.log(ary)    
console.log(res)   

控制台显示为：

var ary = [1, 2, 3, 4]
function fn(ary) {
    ary[0] = 0   // 修改了原数组中第一位的值
    ary = [0]    // arr形参重新赋值一个新的数组
    ary[0] = 100 // 形参arr再修改第一个位置的值，就跟原数组没关系
    return ary
}
var res = fn(ary)   // [100]
console.log(ary)    // [0,2,3,4]
console.log(res)   // [100] 

第13题.

function fn(i) {
   return function (n) {
   console.log(n + i++)  
   }
}
var f = fn(10)
f(20)  
fn(20)(40)  
fn(30)(50)  
f(30) 

控制台显示为：

function fn(i) {  //10->11
     return function (n) {   //30
     console.log(n + i++)  //41
     }
}
var f = fn(10)
f(20)   //30
fn(20)(40)  //60
fn(30)(50)  //80
f(30) //41 

第14题.

var num = 10  
var obj = { num: 20 }
obj.fn = (function (num) {
    this.num = num * 3
    num++ 
    return function (n) {
        this.num += n  
        num++  
        console.log(num)  
    }
})(obj.num)
var fn = obj.fn
console.log(fn)  
fn(5)  
obj.fn(10) 
console.log(num, obj.num)

控制台显示为：

var num = 10  //60=>65
var obj = { num: 20 }  //=>30
obj.fn = (function (num) {  //20=>21
     this.num = num * 3  //this->window
     num++ // 21
     return function (n) { //10
         this.num += n  // 30
         num++  //22=>23
         console.log(num)  //22=>23
     }
})(obj.num)
var fn = obj.fn
console.log(fn)  //function(n){this.num +=n;num++;console.log(num)}
fn(5)  // 22 //此时this->window fn(5) = window.fn(5)
obj.fn(10) //23 此时this=>obj,所以this.name = 20
console.log(num, obj.num) //65 30 

第15题.

var fullName = 'language'
var obj = {
   fullName: 'javascript',
   prop: {
        getFullName: function () {
            return this.fullName
        }
   }
}
console.log(obj.prop.getFullName()) 
var test = obj.prop.getFullName
console.log(test())  

控制台显示为：

var fullName = 'language'
var obj = {
     fullName: 'javascript',
     prop: {
         getFullName: function () {
            return this.fullName
         }
     }
}
console.log(obj.prop.getFullName())  // undefined
var test = obj.prop.getFullName // 将getFullName方法传给test
console.log(test())  // language 

第16题.

var name = 'window'
var Tom = {
   name: "tom",
   show: function () {
     console.log(this.name)
   },
   wait: function () {
      var fun = this.show
      fun()
   }
}
Tom.wait()  

控制台显示为：

var name = 'window' // var定义的变量会成为window的属性
var Tom = {
   name: "tom",
   show: function () {
      console.log(this.name)  // window
   },
   wait: function () {
      var fun = this.show
      fun()
   }
}
Tom.wait()  // window