前端高级面试题及答案

1.下面选打印的结果为?



hello

2

2

2. 请说出以下打印的结果

   var b = {

    a: 23,

    c: 3,

    d: {

        a: 78,

        e: {

            a: 100,

            f: function () {

                console.log(this.a);

            }

        }

    }

}

var fn = b.d.e.f;

fn(); 

b.d.e.f(); 

Undefined

100

3.

 // 修改$对象里面的代码,使得以下代码运行正常

    var $ = {

        fn: function () {

            console.log(1);

        },

        fn2: function () {

            console.log(2);

        }

}

$.fn2();

    $.fn().fn2();


var $ = {    fn:function(){        console.log(1);        // return this; // 返回this,可以继续调用函数    },    fn2:function(){        console.log(2);    }},$.fn().fn2();



4.说出种vue当中的指令和它的用法?     

1.创v-for循环;建了一个空对象

2.   v-if v-show 显示与隐藏;构造函数内部的属性和方法定义在了对rototype



5.打印的结果为  

var  length = 10;

function fn(){

         console.log(this);

        console.log(this.length);

          }

    var obj = {

        length:5,

        method: function(fn){

        fn();

        console.log(this.length);

        arguments[0]();//提示  arguments0 这句代码 arguments是一个数组,里面存储了所有的参数。在本例中,method方法被调用时,传入了两个参数,一个是fn,一个是数字1 因此,arguments[0]即代表fn又因为,数组是特殊的对象,下标即是特殊的属性名那么arguments0其实等价于: arguments.0();最终,this.length,就等于arguments.length  那么结果为


        }

    }

    obj.method(fn,1);


Window, 10, 5

Arguments(2), 2, 


6.以下执行的结果

const promise = new Promise((resolve, reject) => {

    console.log(1);

    resolve();

    console.log(2);

})


promise.then(() => {

    console.log(3);

})


console.log(4);



Promise 新建后立即执行,所以会先输出 1,2,而 Promise.then()内部的代码在 当次 事件循环的 结尾 立刻执行 ,所以会继续输出4,最后输出3

7.Promise 中reject 和 catch 处理上有什么区别

reject 是用来抛出异常,catch 是用来处理异常reject 是 Promise 的方法,而 catch 是 Promise 实例的方法reject后的东西,一定会进入then中的第二个回调,如果then中没有写第二个回调,则进入catch网络异常(比如断网),会直接进入catch而不会进入then的第二个回调



8.谈谈你对async/await的理解

[if !supportLists]1. [endif]await命令只能用在async函数之中,如果用在普通函数,会报错

[if !supportLists]2. [endif]async函数的返回值是 Promise 对象更方便使用当async 函数中只要一个 await 出现 reject 状态,则后面的 await 都不会被执行,可以添加 try/catch来捕获异常

[if !supportLists]9. [endif]v-show和v-if指令的共同点和不同点?

共同点:都能控制元素的显示和隐藏;不同点:实现本质方法不同,v-show本质就是通过控制css中的display设置为none,控制隐藏,只会编译一次;v-if是动态的向DOM树内添加或者删除DOM元素,若初始值为false,就不会编译了。而且v-if不停的销毁和创建比较消耗性能。总结:如果要频繁切换某节点,使用v-show(切换开销比较小,初始开销较大)。如果不需要频繁切换某节点使用v-if(初始渲染开销较小,切换开销比较大)。


[if !supportLists]10. [endif]v-if和v-for的优先级

当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以,不推荐v-if和v-for同时使用。如果v-if和v-for一起用的话,vue中的的会自动提示v-if应该放到外层去。



扩展、使用class 手写一个promise

//创建一个Promise的类

    class Promise {

        constructor(executer) {//构造函数constructor里面是个执行器

            this.status = 'pending';//默认的状态 pending

            this.value = undefined//成功的值默认undefined

            this.reason = undefined//失败的值默认undefined

            //状态只有在pending时候才能改变

            let resolveFn = value => {

                //判断只有等待时才能resolve成功

                if (this.status == pending) {

                    this.status = 'resolve';

                    this.value = value;

                }

            }

            //判断只有等待时才能reject失败

            let rejectFn = reason => {

                if (this.status == pending) {

                    this.status = 'reject';

                    this.reason = reason;

                }

            }

            try {

                //把resolve和reject两个函数传给执行器executer

                executer(resolve, reject);

            } catch (e) {

                reject(e);//失败的话进catch

            }

        }

        then(onFufilled, onReject) {

            //如果状态成功调用onFufilled

            if (this.status = 'resolve') {

                onFufilled(this.value);

            }

            //如果状态失败调用onReject

            if (this.status = 'reject') {

                onReject(this.reason);

            }

        }

    }

你可能感兴趣的:(前端高级面试题及答案)