前端入门题目

第 1 题

if(false){
    var a = 1;
    let b = 2;
}
console.log(a);
console.log(b);

解析：

// 输出
undefined
ReferenceError: b is not defined

var不会产生块级作用域,let会产生块级作用域。

第 2 题

var a;
if(false){
    a = 1;
let b = 2;
}
console.log(a); 
console.log(b);

解析：

// 输出
ReferenceError: Cannot access 'a' before initialization

let声明的变量不会提升,并且会产生暂存死区。在let声明变量之前访问变量会抛出错误。

第 3 题

var c = 1;
function c(c) {
    console.log(c);
var c = 3;
}
console.log(c);
c(2);

解析：

/  输出
1
TypeError: c is not a function

由于函数声明会提升,当函数外的console.log©执行时,c已经被赋值为1。因此,执行c(2)时会抛出TypeError,因为1不是函数。

第 4 题

var a = 10;  
function test() {  
    a = 100;  
console.log(a);  
console.log(this.a);  
var a;  
console.log(a); 
}
test();

解析：

// 输出
10010100

test()为函数独立调用,作用域中的this绑定为全局对象window。

test函数执行时,var a被提升到了作用域顶部,因此函数作用域中存在一个变量a。所以在函数中访问的a都是局部作用域中的a。

第 5 题

var a = 1;

function c(a, b) {
    console.log(a);
    a = 2;
    console.log(a);
}
c();

解析：

//输出
undefined 
2

第 6 题

var a = 6;
setTimeout(function () {
    a = 666;
}, 0)
console.log(a);

解析：

//输出
6

setTimeout为宏任务。即使设置延迟为0ms,也是等待同步代码执行完才会执行。因此console.log(a)输出 6

第 7 题

function fn1() {
    var a = 2;
    function fn2 () {
      a++;
      console.log(a);
    }
    return fn2;
}
var f = fn1();
f();
f();

解析：

// 输出
34

由于fn1函数执行后返回函数fn2,此时产生了闭包。因此fn2中a访问的是fn1作用域中的变量a,因此第一次a++,之后a为3,第二次之后a为4。

第 8 题

function Person() {
    getAge = function () {
console.log(10)
    }
return this;
}
Person.getAge = function () {
console.log(20)
}
Person.prototype.getAge = function () {
console.log(30)
}
var getAge = function () {
console.log(40)
}
function getAge() {
console.log(50)
}
Person.getAge();
getAge();
Person().getAge();
new Person.getAge();
getAge();
new Person().getAge();

解析：

/ 输出
20
40
10
20
10
30

Person.getAge();此时执行的是Person函数上getAge方法。

Person.getAge = function () {
console.log(20)
}

所以输出:20。

getAge();此时执行的是全局中的getAge方法。此时全局getAge方法为:

function () {
console.log(40)
}

所以输出:40。

Person().getAge();由于Person()单独执行所以,作用域中的this绑定为window,相当于window.getAge()。同上,执行的都是全局getAge 方法,但是Person执行时,内部执行了。

getAge = function () {
console.log(10)
}

因此全局getAge方法现在为:

function () {
console.log(10)
}

所以输出:10。

new Person.getAge();此时相当于实例化Person.getAge这个函数,伪代码:

var b = Person.getAge;
new b();

所以输出:20

getAge();执行全局getAge方法,由于在Person().getAge()执行时把全局getAge方法赋值为:

function () {
console.log(10)
}

所以输出:10。

new Person().getAge();此时调用的是Person原型上的getAge方法:

Person.prototype.getAge = function () {
console.log(30)
}

所以输出:30。

// 这里要注意:1.变量提升及提升后再赋值。2.调用构造函数时,带()和不带()的区别。

 第 9 题

console.log(typeof NaN === 'number');

解析：

//输出
true

NaN为不是数字的数字。虽然它不是数字,但是它也是数字类型。

 

第10 题

console.log(1 + "2" + "2");
console.log(1 + +"2" + "2");
console.log(1 + -"1" + "2");
console.log(+"1" + "1" + "2"); 
console.log( "A" - "B" + "2"); 
console.log( "A" - "B" + 2);

解析：

//输出

'122'
'32'
'02'
'112'
'NaN2'
NaN

首先要明白两点:

1. +a,会把a转换为数字。-a会把a转换成数字的负值(如果能转换为数字的话,否则为NaN)。
2. 字符串与任何值相加都是字符串拼接。

console.log(1 + “2” + “2”);简单的字符串拼接,即结果为:‘122’。

console.log(1 + +“2” + “2”);这里相当于console.log(1 + 2 + “2”);,然后再字符串拼接。即结果为:‘32’。

console.log(1 + -“1” + “2”);这里相当于console.log(1 + -1 + “2”);,然后再字符串拼接。即结果为:‘02’。

console.log(+“1” + “1” + “2”);这里相当于console.log(1 + “1” + “2”);,然后再字符串拼接。即结果为:‘112’。

console.log( “A” - “B” + “2”);,由于’A’ - ‘B’ = NaN,所以相当于console.log( NaN + “2”);, 然后再字符串拼接。即结果为:‘NaN2’。

console.log( “A” - “B” + 2);同上,相当于console.log(NaN + 2),由于NaN+任何值还是NaN,即结果为:NaN。