【CSDN学院出品】你不可不知的JS面试题（第二期）

骑猪看日落 2021-08-26 19:28 400阅读 0赞

## 1、什么是继承？ ##

子类可以使用父类的所有功能，并且对功能进行扩展。

*  新增方法
 *  改用方法

**（1）、ES6使用`extends`子类继承父类的方法。**

// 父类
        class A{ 
            constructor(name){ 
                this.name= name;
            }
            getName () { 
                return this.name;
            }
        };
        // 子类继承
        class B extends A { 
            constructor(name){ 
               super(name) // 记得用super调用父类的构造方法!
            }
            getName(){ 
                const name = super.getName();
                return name;
            }
        }
        
        var b = new B('2');
        console.log(b.getName()); //2

**（2）、ES5的继承方法：**

// 父类
    function P(name) { 
        this.name = name;
    }
    // 父类方法
    P.prototype.get=function(){ 
        return this.name;
    }
    // 子类
    function C(name){ 
        P.call(this,name);
    }
    // 封装继承。也就是C.prototype.__proto__ = P.prototype
    function I(Pfn,Cfn){ 
        var prototype = Object.create(Pfn.prototype);
        prototype.constructor = Cfn;
        Cfn.prototype = prototype;
    }
    // 调用继承方法，并传入参数
    I(P,C);
    
    
    var c = new C('maomin');
    console.log(c.get()); // maomin

**（3）、ES3实现继承**

使用ES3实现继承无非是替代了`Object.create(Pfn.prototype)`，我们先来看下

![在这里插入图片描述][20200213153345384.png]  
大家知道我们封装的`I`方法是原理是`C.prototype.__proto__ = P.prototype`。但是我们不推荐这样，因为`__proto__`是浏览器内置的属性，并不是JS内置的，所以不推荐这样做。我们来封装一个方法来替代`Object.create(Pfn.prototype)`。

function objectCreate (o) { 
    	function P1() { }
    	P1.prototype = o;
    	return new P1();
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]  
完整代码：

// 父类
        function P(name) { 
            this.name = name;
        }
      	// 父类方法
        P.prototype.get = function () { 
            return this.name;
        }
    	// 子类
        function C(name) { 
            P.call(this, name);
        }
    	// 封装object.create()
        function objectCreate(o) { 
            function P1() { }
            P1.prototype = o;
            return new P1();
        }
        // 封装继承
        //C.prototype.__proto__ = P.prototype; 
        function I(Pfn, Cfn) { 
            var prototype = objectCreate(Pfn.prototype); 
            prototype.constructor = Cfn;
            Cfn.prototype = prototype;
        }
        
        // 调用继承方法，并传入参数
        I(P, C);
        
        var c = new C('maomin');
        console.log(c.get()); // maomin

**（4）、新增API**

新增ES6方法 `Reflect.setPrototypeOf()`可以实现`C.prototype.__proto__ = P.prototype`

## 2、关于Promise，你知道什么？ ##

##### （1）、Promise是什么？ #####

Promise是异步编程的一种解决方案，同时他有很多规范，如Promise/A，Promise/B，Promise/D以及Promise/A的升级版Promise/A+，而ES6中采用了Promise/A+规范。

##### （2）、Promise的作用是什么？ #####

*  解决“回调地狱”问题
 *  解决并发请求问题
 *  解决异步编程代码执行顺序理解困难的问题

**① 解决“回调地狱”问题**

我们先看下面代码，看到会不会觉得太冗余了啊。如果代码多的话，很难维护。

我们可以看到使用`Promise`让它永远在第一层，打印出 我还在人间 ，而不会越来越深。

**② 解决并发请求问题**  
可以在执行`result1` 、`result2` 结束后再执行下面的代码

const result1 = fetch('/getName');
    const result2 = fetch('/getAge');
    Promise.all([result1,result2]).then(()=>{ 
    // 执行
    })

**③解决异步编程代码执行顺序理解困难的问题**  
我们先看下这个场景，`get`方法是异步的方法，在执行`getInfo`方法时，并不会先执行`get`方法，而是先打印出`我是getInfo方法`。

那么，我们使用`Promise`来解决异步，同时我们使用了ES6`async`与`await`来等待`get`方法执行完再执行下面的代码。

## 3、如何实现Promise? ##

我们先来了解`Promise`

*  `Promise`包含`then`方法
 *  `then`方法的两个参数`resolve`和`reject`
 *  `Promise`包含3个状态：`pending(等待态)`、`resolved(成功态)`、`rejected(失败态)`。

返回成功`resolve`:

new Promise((resolve,reject)=>{ 
        setTimeout(() => { 
            resolve('success!') //返回成功状态
        }, 1000);
    }).then((v)=>{ 
        console.log(v);
    },(e)=>{ 
        console.log(e);
    })

返回错误`reject`:

new Promise((resolve,reject)=>{ 
        setTimeout(() => { 
            reject('error!') //返回失败状态
        }, 1000);
    }).then((v)=>{ 
        console.log(v);
    },(e)=>{ 
        console.log(e);
    })

好了，我们来实现一下，封装一个`Promise`。

> 下一期更新 请关注 第三期

[20200213153345384.png]: /images/20210813/cd5e91d5f4e443398831ee777c85d265.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]: /images/20210813/8782aa4b3ab44a92890f7cb26d096e36.png