前端学习问题总结

1.null和undefined的区别？
答：Undefined类型只有一个值，即undefined。当声明的变量还未被初始化时，变量的默认值为undefined。Null类型也只有一个值，即null。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。

2.什么是单例模式，单例模式在前端开发中有什么应用？
答：单例模式（Singleton Pattern）是 Java 中最简单的设计模式之一。这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。这种模式涉及到一个单一的类，该类负责创建自己的对象，同时确保只有单个对象被创建。这个类提供了一种访问其唯一的对象的方式，可以直接访问，不需要实例化该类的对象。单例模式在前端的应用较为广泛的有登录模块，首次点击登录按钮时候，渲染登录弹窗，在以后点击登录按钮时，如果是已经登录状态，就不再渲染弹窗，又比如一个音乐播放程序，如果已经存在一首正在播放的进程，点击其他歌曲的时候要关掉正在播放的音乐，然后在播放下一首歌曲，这些都是单例模式在前端开发中的应用。下面介绍一下前端如何创建一个单例模式：

class Singleton {
    constructor(name) {
        this.name = name;
        this.instance = null;
    }
    // 构造一个广为人知的接口，供用户对该类进行实例化
    static getInstance(name) {
    //检验是否是已经创建过这个对象
        if(!this.instance) {
            this.instance = new Singleton(name);
        }
        return this.instance;
    }

3.js分为哪两大类型？都有各自的什么特点？
答：js分为原始类型和对象类型，原始类型又称基本数据类型，分别有6种：null，String，symbol，undefined，number，boolean，除了这这些基本数据类型剩下的都是对象类型，比如数组、对象之类，判断一个变量是什么类型的方法是，首先使用typeOf方法，如果是数据基本类型会返回基本数据类型的名称，如果返回的是object，则需要使用instanceof，instanceof会返回对象的构造函数。如果是数组类型会返回它的构造函数Array，通过这个可以判断对象的类型，但是instanceof并不能准确的判断对象的类型，具有一定得局限性。

4.原生js常用的方法有哪些？
（1）typeof，是判断元素具体是什么类型的方法，一般会返回数据类型，但是需要注意的是typeof null返回的结果是object,这是一个js的bug，typeof [1,2]返回的结果是object，因为在数据类型中并没有array这一项，typeof Symbol()返回的结果是symbol,这是ES6新特性。
(2) instanceof，它用于实例和构造函数的对应，返回的是一个布尔类型数据。比如想要判断一个变量是不是一个数组，用typeof方法已经不合适了，但是可以用[1,2] instanceof Array来判断。因为，[1,2]是数组，它的构造函数是Array。同理：

function Foo(name) {
    this.name = name
}
var foo = new Foo('bar')
//这里foo的是Foo的实例，所以执行下面的方法会返回true
console.log(foo instanceof Foo) 

5.关于值类型和引用类型，请说出他们的区别？
答：上面提到的数据类型都是值类型，只有object和function是引用类型，其他的都是值类型。在参数传递方式上，值类型是按值传递，引用类型是按照共享传递。下面通过例子更及时透彻的说明一下：

// 值类型
var a = 10
var b = a
b = 20
console.log(a)  // 10
console.log(b)  // 20

上述代码中，a和b都是值类型，两者分别修改赋值，相互之间没有影响。下面是引用类型的例子：

// 引用类型
var a = {x: 10, y: 20}
var b = a
b.x = 100
b.y = 200
console.log(a)  // {x: 100, y: 200}
console.log(b)  // {x: 100, y: 200}

在上述代码中，a和b都是引用类型，在执行了b=a后，a的内存地址指向了b，它们共享一个内存地址，所以在修改了b中的x和y以后，a中的x和y也会修改。
下面有个经典的面试题：

function foo(a){
    a = a * 10;
}
function bar(b){
    b.value = 'new';
}
var a = 1;
var b = {value: 'old'};
foo(a);
bar(b);
console.log(a); // 1
console.log(b); // value: new

6.new 的原理是什么？通过 new 的方式创建对象和通过字面量创建有什么区别？
在调用new的过程中会发生一下四件事情：
1.新生成一个对象
2.链接到原型
3.绑定this
4.返回新对象
对于对象来说，其实都是通过new产生的，无论是function foo()还是let a={ b:1 }，对于创建一个对象来说，更推荐使用字面量的方式创建对象（无论是考虑性能还是可读性）。因为你使用new Object()的方式创建对象需要通过作用域立链一层一层的找到object，但是你使用字面量方式就没这个问题。

function Foo() {}
// function 就是个语法糖
// 内部等同于 new Function()
let a = { b: 1 }
// 这个字面量内部也是使用了 new Object()