持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

1. 类继承

class Person {
    constructor(first,last){
        this.first = first;
        this.last = last;    
    }
    personMethod(){
        //...    
    }
}
class Employee extends Person{
    constructor(first,last,position){
        super(first,last);
        this.position = position;    
    }
    employeeMethod(){
        //...    
    }
}

2. JS中的虚值是什么

['', 0, null, undefined, NaN, false]

3.JS中 this 值

demo1

function speak(){
    var name = this.name
    console.log(`Hello I am ${name}`)
}
var me = {
    name: 'a',
    speak: speak
}
var you = {
    name: 'b',
    speak: speak
}
me.speak()  //Hello I am a
you.speak()  //Hello I am b

this 可以在同一个执行环境中使用不同的上下文对象。它其实提供了一种更加优雅的方式来隐式“传递”一个对象引用，因此可以使API设计的更加简洁且易于复用。

demo2

var name = "HHG";
const obj = {
    name: 'cxw',
    yearBought: '1996',
    getName(){
        return this.name    
    },
    isRegistered: true
}
obj.getName(); // cxw， this指向 obj对象

let a = obj.getName;
a();// HHG， 相当于执行window.a(); 最后this指向window

//this指向最后调用该函数的对象

3.1 独立函数调用

function foo(){
    console.log(this.a)
}
var a = 2;
foo(); // 2

这种直接调用的方式 this 指向全局对象，如果是在浏览器就指向window。

3.2 对象上下文（隐式绑定）

function foo(){
    console.log(this.a)
}
var obj = {
    a: 10,
    foo: foo
}
obj.foo(); //10

foo 虽然被定义在全局作用域，但是调用的时候是通过 obj 上下文引用的，可以理解为在 foo 调用的那一刻它被 obj 对象拥有。所以 this 指向 obj。

3.3 显式绑定

显式绑定的说法是和隐式绑定相对的，指的是通过 call、apply、bind 显式地更改this指向

3.4 new绑定

Js中 new 与传统的面向类的语言机制不同，Js中的“构造函数”其实和普通函数没有任何区别。其实当我们使用 new 来调用函数的时候，发生了下列事情：

创建一个全新的对象；
这个新对象会被执行 "原型" 链接；
这个新对象会被绑定到调用的this；
如果函数没有对象类型的返回值，这个对象会被返回。

其中，第三步绑定了 this ,所以“构造函数”和原型中的 this 永远指向 new 出来的实例。

4.多条件判断优雅写法

//小白写法
var Statistics = function(){
    console.log('执行')
}
switch(currnetTab){
    case 0: 
    Statistics();
    break;
    case 1: 
    Statistics();
    break;
    case 2: 
    Statistics();
    break;
    case 3: 
    Statistics();
    break;
}

//优雅写法
var Statistics = function(){
    console.log('执行')
}
var mapList = new Map([
    [0,Statistics],
    [1,Statistics],
    [2,Statistics],
    [3,Statistics]
])
let map = function (val){
    return mapList.get(val);
}
let getMap = map(1); //如果不存在，返回undefined

5.生成随机 16 进制颜色码如 # ffffff

"#"+ Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6,"0"); 0xffffff 0x表示16进制，padEnd字符串补全长度

6.typeof和instanceof 区别

6.1 区别

typeof 与 instanceof 都是判断数据类型的方法，区别如下：

typeof 会返回一个变量的基本类型，instanceof 返回的是一个布尔值
instanceof 可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型
而 typeof 也存在弊端，它虽然可以判断基础数据类型（null 除外），但是引用数据类型中，除了 function 类型以外，其他的也无法判断

6.2 typeof

typeof 一般被用于判断一个变量的类型，我们可以利用 typeof 来判断number, string, object, boolean, function, undefined, symbol 这七种类型。

//typeof 用来判断数据类型  
//typeof(operand)
typeof 1 // 'number'
typeof '1' // 'string'
typeof undefined // 'undefined'
typeof true // 'boolean'
typeof Symbol() // 'symbol'
typeof null // 'object'
typeof [] // 'object'
typeof {} // 'object'
typeof console // 'object'
typeof console.log // 'function'

6.3 instanceof

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

//instanceof 用来判断该对象是否是目标实例  
// object instanceof constructor
// 定义构建函数
let Car = function() {}
let benz = new Car()
benz instanceof Car // true

let car = new String('xxx')
car instanceof String // true
let str = 'xxx'
str instanceof String // false

手写instanceof

function myInstanceof(left,right){
    if(typeof left !=="object" || left === null) return false;
    let proto = Object.getPrototypeOf(left);  // => left.__proto__;
    while(proto){
       if(proto === right.prototype) return true;
       proto = Object.getPrototypeOf(proto);
    }
    return false
}

7. 判断变量是否为Null 或NaN

//判断变量为null
let a = null;
//方法一
if(!a && typeof(a) === "object"){
    console.log("isNull")
}
//方法二
Object.is(a,null); //true

typeof(a); //object，历史原因
a instanceof Object //false

//判断变量为NaN
var b = NaN;
typeof(b); //"number"
//方法一
isNaN(b); //true
//方法二
Object.is(b,NaN); //true

8. 异步有哪些解决方案

callback、Generator、 Promise、 async/await。

JavaScript基础入门第一篇