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

作者：知新_RL | 2024-03-30 08:52:12

踩

js class类相关面试题

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

（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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

（3）、ES3实现继承

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

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

function objectCreate (o) {
	function P1() {}
	P1.prototype = o;
	return new P1();
}
1
2
3
4
5

在这里插入图片描述
完整代码：

	// 父类
    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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

（4）、新增API

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

   function A(name){this.name=name}
   A.prototype.get=function () {return this.name}
   function B (name) {A.call(this,name)}
   Reflect.setPrototypeOf(B.prototype,A.prototype);
   var b = new B('maomin');
   console.log(b.get()); //maomin
1
2
3
4
5
6

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

（1）、Promise是什么？

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

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

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

① 解决“回调地狱”问题

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

    let count = 0;
    setTimeout(() => {
        count++;
        console.log(`地狱${count}层`);
        setTimeout(() => {
            count++;
            console.log(`地狱${count}层`);
            setTimeout(() => {
                 count++;
                 console.log(`地狱${count}层`);
            }, 500);
        }, 500);
    }, 500);
1
2
3
4
5
6
7
8
9
10
11
12
13

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

    let count = 0;
    new Promise(resolve =>{
        setTimeout(() => {
             count++;
             resolve();
        }, 500);
    }).then(()=>{
        return new Promise(resolve=>{
            setTimeout(() => {
                 count++;
                 resolve();
            }, 500);
        })
    }).then(()=>{
        console.log('我还在人间')
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

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

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

function get() {
    setTimeout(() => {
        console.log('执行get方法');
    }, 1000);
}
function getInfo() {
    get();
    console.log('我是getInfo方法');
}
getInfo();
// 我是getInfo方法
// 执行get方法
1
2
3
4
5
6
7
8
9
10
11
12

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

function get() {
    return new Promise((resolve)=>{
        setTimeout(() => {
            console.log('执行get方法');
            resolve();
        }, 1000);
    })
}
async function getInfo() {
    await get();
    console.log('我是getInfo方法');
}
getInfo();
// 执行get方法
// 我是getInfo方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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);
})
1
2
3
4
5
6
7
8
9

返回错误reject:

new Promise((resolve,reject)=>{
    setTimeout(() => {
        reject('error!') //返回失败状态
    }, 1000);
}).then((v)=>{
    console.log(v);
},(e)=>{
    console.log(e);
})
1
2
3
4
5
6
7
8
9

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

 function myPromise(fn) {
        this.status = 'pending'; // 初始化等待状态
        this.data = undefined; // 初始化一个存储变量
        this.resolvedCallback = []; //成功方法保存
        this.rejectedCallback = []; // 失败方法保存
        
        const resolve = (val) => {
            if (this.status === 'pending') {
                this.status = 'resolved';
                this.data = val;
                this.resolvedCallback.forEach(fu => fu.call(this));
            }
        }
        
        const reject = (val) => {
            if (this.status === 'pending') {
                this.status = 'rejected';
                this.data = val;
                this.rejectedCallback.forEach(fu => fu.call(this));
            }
        }
        
        fn(resolve, reject);
    }
    // 封装then方法
    myPromise.prototype.then = function (onResolved, onRejected) {
        return new myPromise((resolve, reject) => {
        
            const resolvedCallback = () => {
                const result = onResolved(this.data);
                if (result instanceof myPromise) {
                    result.then(resolve, reject);
                } else {
                    resolve(result);
                }
            }
            const rejectedCallback = () => {
                const result = onRejected(this.data);
                if (result instanceof myPromise) {
                    result.then(resolve, reject);
                } else {
                    resolve(result);
                }
            }
            
            if (this.status === 'resolved') {
                resolvedCallback();
            } else if (this.status === 'rejected') {
                rejectedCallback();
            } else { // this.status === 'pending'
                this.resolvedCallback.push(resolvedCallback);
                this.rejectedCallback.push(rejectedCallback);
            }
            
        })

    }
    // 使用
    new myPromise((resolve, reject) => {
        setTimeout(() => {
            resolve('success!');
        }, 1000);
    }).then((v) => {
        console.log(v)
    }, (e) => {
        console.log(e)
    }).then(() => {
        console.log('1')
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

下一期更新请关注第三期