快速掌握JavaScript面试基础知识

typeof 0              // number
typeof true           // boolean
typeof 'Hello'        // string
typeof Math           // object
typeof null           // object  !!
typeof Symbol('Hi')   // symbol (New ES6)

var name = 'Joey';
if (name) {
 console.log(name + " doesn't share food!")
 // Joey doesn’t share food!
}

Boolean(null)         // false
Boolean('hello')      // true
Boolean('0')          // true
Boolean(' ')          // true
Boolean([])           // true
Boolean(function(){}) // true

1 + "2" = "12"
"" + 1 + 0 = "10"
"" - 1 + 0 = -1
"-9\n" + 5 = "-9\n5"
"-9\n" - 5 = -14
"2" * "3" = 6
4 + 5 + "px" = "9px"
"$" + 4 + 5 = "$45"
"4" - 2 = 2
"4px" - 2 = NaN
null + 1 = 1

2 == '2'     // True
2 === '2'     // False
undefined == null   // True
undefined === null  // False

let a = '0';
console.log(Boolean(a)); // True
let b = false;
console.log(Boolean(b)); // False
```
你认为下面的相等判断会输出什么值呢?
```js
console.log(a == b);

'0' == false   (1)
'0' == 0       (2)
0  == 0       (3)

false == ""  // true
false == []  // true
false == {}  // false
"" == 0      // true
"" == []     // true
"" == {}     // false
0 == []      // true
0 == {}      // false
0 == null    // false

var a = 2;
 // 'a' hold a copy of the value 2.
var b = a;  
// 'b' is always a copy of the value in 'a'
b++;
console.log(a);  
// 2
console.log(b);  
// 3
var c = [1,2,3];
var d = c;  
// 'd' is a reference to the shared value
d.push( 4 );  
// Mutates the referenced value (object)
console.log(c);  
// [1,2,3,4]
console.log(d);  
// [1,2,3,4]
/* Compound values are equal by reference */
var e = [1,2,3,4];
console.log(c === d);  
// true
console.log(c === e);
 // false

const copy = c.slice()    
// 'copy' 即使copy和c相同，但是copy指向新的值
console.log(c);          
// [1,2,3,4]
console.log(copy);        
// [1,2,3,4]
console.log(c === copy);  
// false

function outer() {
 let a = 1;
 function inner() {
   let b = 2;
   function innermost() {
     let c = 3;
     console.log(a, b, c);  
     // 1 2 3
   }
   innermost();
   console.log(a, b);        
   // 1 2 — 'c' is not defined
 }
 inner();
 console.log(a);            
 // 1 — 'b' and 'c' are not defined
}
outer();

console.log(toSquare(3));  
// 9

function toSquare(n){
 return n*n;
}

{  /* Original code */
 console.log(i);  
 // undefined
 var i = 10
 console.log(i);  
 // 10
}
{  /* Compilation phase */
 var i;
 console.log(i);  
 // undefined
 i = 10
 console.log(i);  
 // 10
}
// ES6 let & const
{
 console.log(i);  
 // ReferenceError: i is not defined
 const i = 10
 console.log(i);  
 // 10
}
{
 console.log(i);  
 // ReferenceError: i is not defined
 let i = 10
 console.log(i);  
 // 10
}

var sum = function(a, b) {
 return a + b;
}

function sum(a, b) {
 return a + b;
}

function greeting() {
 console.log(s) // undefined
 if(true) {
   var s = 'Hi';
   undeclaredVar = 'I am automatically created in global scope';
 }
 console.log(s)
  // 'Hi'
}
console.log(s);  
// Error — ReferenceError: s is not defined
greeting();
console.log(undeclaredVar)
// 'I am automatically created in global scope'

let g1 = 'global 1'
let g2 = 'global 2'
{  
/* Creating a new block scope */
 g1 = 'new global 1'
 let g2 = 'local global 2'
 console.log(g1)  
 // 'new global 1'
 console.log(g2)  
  // 'local global 2'
 console.log(g3)  
 // ReferenceError: g3 is not defined
 let g3 = 'I am not hoisted';
}
console.log(g1)    
// 'new global 1'
console.log(g2)    
// 'global 2'

const tryMe = 'initial assignment';
tryMe = 'this has been reassigned';  
// TypeError: Assignment to constant variable.
// You cannot reassign but you can change it…
const array = ['Ted', 'is', 'awesome!'];
array[0] = 'Barney';
array[3] = 'Suit up!';
console.log(array);    
// [“Barney”, “is”, “awesome!”, “Suit up!”]
const airplane = {};
airplane.wings = 2;
airplane.passengers = 200;
console.log(airplane);  
// {passengers: 200, wings: 2}

function sayHi(name){
 var message = `Hi ${name}!`;
 function greeting() {
   console.log(message)
 }
 return greeting
}
var sayHiToJon = sayHi('Jon');
console.log(sayHiToJon)    
// ƒ() { console.log(message) }
console.log(sayHiToJon())  
// 'Hi Jon!'

function SpringfieldSchool() {
 let staff = ['Seymour Skinner', 'Edna Krabappel'];
 return {
   getStaff: function() { console.log(staff) },
   addStaff: function(name) { staff.push(name) }
 }
}

let elementary = SpringfieldSchool()
console.log(elementary)        
// { getStaff: ƒ, addStaff: ƒ }
console.log(staff)            
// ReferenceError: staff is not defined
/* Closure allows access to the staff variable */
elementary.getStaff()          
// ["Seymour Skinner", "Edna Krabappel"]
elementary.addStaff('Otto Mann')
elementary.getStaff()          
// ["Seymour Skinner",
"Edna Krabappel", "Otto Mann"]

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
 setTimeout(function() {
   console.log(`The value ${arr[i]} is at index: ${i}`);
 }, (i+1) * 1000);
}

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
 (function(j) {
   setTimeout(function() {
     console.log
     (`The value ${arr[j]} is at index: ${j}`);
   }, j * 1000);
 })(i)
}

const arr = [10, 12, 15, 21];
for (let i = 0;
i < arr.length; i++) {
 setTimeout(function() {
   console.log(`The value ${arr[i]} is at index: ${i}`);
 }, (i) * 1000);
}

var result = [];
for (var i=0; i < 5; i++) {
 result.push( function() { return i } );
}
console.log( result[1]() );
// 5
console.log( result[3]() );
// 5
result = [];
for (var i=0; i < 5; i++) {
 (function () {
   var j = i;
    // copy current value of i
   result.push( function() { return j } );
 })();
}
console.log( result[1]() );
// 1
console.log( result[3]() );
// 3

const Snow = {surename: 'Snow'}
const char = {
 surename: 'Stark',
 knows: function(arg, name) {
   console.log(
   `You know ${arg}, ${name} ${this.surename}`);
 }
}
char.knows('something', 'Bran');              
// You know something, Bran Stark
char.knows.call(Snow, 'nothing', 'Jon');      
// You know nothing, Jon Snow
char.knows.apply(Snow, ['nothing', 'Jon']);  
// You know nothing, Jon Snow

char.knows.call(Snow, ...["nothing", "Jon"]);  
// You know nothing, Jon Snow

const Snow = {surename: 'Snow'}
const char = {
 surename: 'Stark',
 knows: function(arg, name) {
   console.log(`You know ${arg},
${name} ${this.surename}`);}
 }
const whoKnowsNothing = char.knows.bind(Snow, 'nothing');
whoKnowsNothing('Jon');  
// You know nothing, Jon Snow

function Person(name, age) {
 this.name = name;
 this.age =age;
 console.log(this);
}
const Rachel = new Person('Rachel', 30);  
// { age: 30, name: 'Rachel' }

function fn() {
 console.log(this);
}
var agent = {id: '007'};
fn.call(agent);    
// { id: '007' }
fn.apply(agent);  
// { id: '007' }
var boundFn = fn.bind(agent);
boundFn();        
// { id: '007' }

var building = {
 floors: 5,
 printThis: function() {
   console.log(this);
 }
}
building.printThis();  
// { floors: 5, printThis: function() {…} }

function printWindow() {
 console.log(this)
}
printWindow();  
// window object

function Dinosaur(name) {
 this.name = name;
 var self = this;
 inner();
 function inner() {
   alert(this);        
   // window object — the function
has overwritten the 'this' context
   console.log(self);  
   // {name: 'Dino'} — referencing the stored
value from the outer context
 }
}
var myDinosaur = new Dinosaur('Dino');

function Cat(name) {
 this.name = name;
 console.log(this);   // { name: 'Garfield' }
 ( () => console.log(this) )();   // { name: 'Garfield' }
}
var myCat = new Cat('Garfield');

// 为了更好地理解底层，
我们来定义new关键字
function myNew(constructor, ...arguments)
{
 var obj = {}
 Object.setPrototypeOf(obj,
 constructor.prototype);
 return constructor.apply(obj,
 arguments) || obj
}

function Bird() {
 this.wings = 2;
}
/* 普通的函数调用 */
let fakeBird = Bird();
console.log(fakeBird);    
// undefined
/* 使用new调用 */
let realBird= new Bird();
console.log(realBird)    
// { wings: 2 }

function MBird(){
 this.wings =2;
 return "hello";
}
let realMBrid = new MBird();
console.log(realMBird)
// { wings: 2 }

function Dog(breed, name){
 this.breed = breed,
 this.name = name
}
Dog.prototype.describe = function() {
 console.log(`${this.name} is a ${this.breed}`)
}
const rusty = new Dog('Beagle', 'Rusty');

/* .prototype 属性包含了构造函数以
及构造函数中在prototype上定义的属性。*/
console.log(Dog.prototype)  
// { describe: ƒ , constructor: ƒ }

/* 使用Dog构造函数构造的对象 */
console.log(rusty)  
//  { breed: "Beagle", name: "Rusty" }
/* 从构造函数的原型中继承
下来的属性或函数 */
console.log(rusty.describe())  
// "Rusty is a Beagle"
/* .__proto__ 属性指向构造函数的
.prototype属性 */
console.log(rusty.__proto__)    
// { describe: ƒ , constructor: ƒ }
/* .constructor 属性指向构造函数 */
console.log(rusty.constructor)  
// ƒ Dog(breed, name) { ... }

function Car() { }
Car.prototype.wheels = 4;
Car.prototype.airbags = 1;

var myCar = new Car();
myCar.color = 'black';
/*  原型链中的属性也可以通过in来查看:  */
console.log('airbags' in myCar)  
// true
console.log(myCar.wheels)        
// 4
console.log(myCar.year)          
// undefined
/*  通过hasOwnProperty来查看是否拥有该属性:  */
console.log(myCar.hasOwnProperty('airbags'))  
// false — Inherited
console.log(myCar.hasOwnProperty('color'))    
// true

var dog = { legs: 4 };
var myDog = Object.create(dog);
console.log(myDog.hasOwnProperty('legs'))  
// false
console.log(myDog.legs)                    
// 4
console.log(myDog.__proto__ === dog)      
// true

var objProt = { text: 'original' };
var objAttachedToProt = Object.create(objProt);
console.log(objAttachedToProt.text)  
// original

// 我们更改objProt的text属性，
objAttachedToProt的text属性同样更改了
objProt.text = 'prototype property changed';
console.log(objAttachedToProt.text)  
// prototype property changed

// 但是如果我们讲一个新的对象赋值给objProt，
那么objAttachedToProt的text属性不受影响
objProt = { text: 'replacing property' };
console.log(objAttachedToProt.text)  
// prototype property changed

function greetingAsync(name, callback){
 let greeting = "hello, " + name ;
 setTimeout(_ => callback(greeting),0);
}
greetingAsync("fundebug", console.log);
console.log("start greeting");

const first = function () {
 console.log('First message')
}
const second = function () {
 console.log('Second message')
}
const third = function() {
 console.log('Third message')
}

first();
setTimeout(second, 0);
third();

// 输出:
 // First message
 // Third message
 // Second message