推荐阅读地址
掘金
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>
- 不能；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。我是林一一，下次见。
网友评论