前端面试(3)

r囧r小猫 2023-03-12 12:18 6阅读 0赞

1.怎么定义Vue-router的动态路由？怎么获取传过来的动态参数?  
设置:在router目录下的index.js文件中，对path属性加上/:id  
获取:使用router对象的params.id 例如 : this.$route.params.id

2.Vue引用虚拟DOM解决什么问题？  
虚拟DOM就是为了解决浏览器性能问题而被设计出来的。用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

3.Vue-router有哪几种导航钩子  
第一种：是全局导航钩子：

router.beforeEach(to,from,next)

第二种: 组件内的钩子

beforeRouteEnter(to, from, next) {
              在渲染该组件的对应路由被 confirm 前调用
           },
    
           beforeRouteUpdate(to, from, next) {
               在当前路由改变，但是依然渲染该组件是调用
           },
    
           beforeRouteLeave(to, from ,next) {
               导航离开该组件的对应路由时被调用
           }

第三种：单独路由独享钩子

beforeEnter(to, from, next)

4.用CSS实现元素的垂直居中,都有哪些实现方法?  
1、头部和顶部使用相同大小的padding值可以实现居中  
2、单行文本可以用line-height实现垂直居中，设置子元素的line-height值等于父元素的height，这种方法适用于子元素为单行文本的情况。  
3、通过display:flex，align-items: center;或 align-self: center;实现垂直居中  
4、使用position、transform实现元素垂直居中  
5、使用position结合margin：auto实现垂直居中  
6、使用 display :table和 vertical-align 对容器里的文字进行垂直居中, 父元素使用display:table,子元素使用display:table-cell属性来模拟表格，子元素设vertical-align:middle即可垂直居中  
7、通过verticle-align:middle实现行内垂直居中  
5.介绍一下组件中父子间通信  
1.概念：A组件中调用B组件，那么A组件就是父组件，B组件就是子组件  
通信方式：  
2.父组件向子组件传递数据——使用props  
3.子组件向父组件传递数据——使用this.$emit暴露一个function给父组件  
6.如何解决跨域问题?  
1，通过jsonp跨域  
2，nginx代理跨域  
3，nodejs中间件代理跨域  
4，WebSocket协议跨域  
7.请使用setTimeout模拟实现一个setInterval功能

//用setTimeout模仿setInterval
    var MyInterVal = function(fun,tm){
        if(this == window){
            return new MyInterVal(fun,tm);
        }
    　　this.Fun = null;
        this.id = -1;this.clear = function(id){
            clearTimeout(this.id);
        }
        this.setInterval = function(_fun,_tm){
            var self = this;
            if(this.Fun==null){
                if(typeof _fun=="string"){
                    this.Fun = new Function(_fun);
                }else if(typeof _fun=='function'){
                    this.Fun = _fun;
                }
            }
            this.id = setTimeout(function(){
                self.Fun();
                self.setInterval(self.Fun,_tm);
            },tm);
        }
        this.setInterval(fun,tm);
    }
    
    //使用方法一
    var s = MyInterVal(function(){
        console.log(1);
    },1000);
    
    //使用方法二
    var s = MyInterVal("console.log(1)",1000)
    
    setTimeout(function(){
        s.clear();//清除
    },5000)

8.请简述display:none和visibility:hidden的对比的优缺点  
1、空间占据  
display:none 隐藏后的元素不占据任何空间，而 visibility:hidden 隐藏的元素空间依旧存在。  
2、回流和渲染  
display:none 隐藏产生回流和重绘（reflow 和 repaint），而 visibility:hidden 只产生重绘。  
3、株连性  
display:none 就是“株连性”明显的声明：一旦父节点元素应用了 display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事  
4、隐藏失效  
若子孙元素应用了 visibility:visible，则这个子孙元素不但不会隐藏，而且会显现出来  
9.JavaScript实现继承的几种实现方式?  
1、原型链继承

// 实现原型链的一种基本模式
    function SuperType(){
                this.property = true;
    }
    SuperType.prototype.getSuperValue = function(){
                return this.property;
    };
    function SubType(){
                this.subproperty = false;
    }
    
    // 继承，用 SuperType 类型的一个实例来重写 SubType 类型的原型对象
    SubType.prototype = new SuperType();
    SubType.prototype.getSubValue = function(){
                return this.subproperty;
    };
    var instance = new SubType();
    alert(instance.getSuperValue());     // true

2、借用构造函数继承（也称伪造对象或经典继承）

// 在子类型构造函数的内部调用超类型构造函数；使用 apply() 或 call() 方法将父对象的构造函数绑定在子对象上
    function SuperType(){
                // 定义引用类型值属性
                this.colors = ["red","green","blue"];
    }
    function SubType(){
                // 继承 SuperType，在这里还可以给超类型构造函数传参
                SuperType.call(this);
    }
    var instance1 = new SubType();
    instance1.colors.push("purple");
    alert(instance1.colors);     // "red,green,blue,purple"
    
    var instance2 = new SubType();
    alert(instance2.colors);     // "red,green,blue"

3、组合继承（也称伪经典继承）

// 将原型链和借用构造函数的技术组合到一块。使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又能够保证每个实例都有自己的属性。
    
    function SuperType(name){
                this.name = name;
                this.colors = ["red","green","blue"];
    }
    SuperType.prototype.sayName = function(){
                alert(this.name);
    };
    function SubType(name,age){
                // 借用构造函数方式继承属性
                SuperType.call(this,name);
                this.age = age;
    }
    // 原型链方式继承方法
    SubType.prototype = new SuperType();
    SubType.prototype.constructor = SubType;
    SubType.prototype.sayAge = function(){
                alert(this.age);
    };
    var instance1 = new SubType("luochen",22);
    instance1.colors.push("purple");
    alert(instance1.colors);      // "red,green,blue,purple"
    instance1.sayName();
    instance1.sayAge();
    
    var instance2 = new SubType("tom",34);
    alert(instance2.colors);      // "red,green,blue"
    instance2.sayName();
    instance2.sayAge();

4、原型式继承

// 借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义类型。
    1、自定义一个函数来实现原型式继承
    function object(o){
               function F(){}
               F.prototype = o;
               return new F();
    }

5、寄生式继承

// 创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后返回这个对象
    function createPerson(original){
                var clone = Object.create(original);   // 通过 Object.create() 函数创建一个新对象
                clone.sayGood = function(){              // 增强这个对象
                            alert("hello world！！！");
                };
                return clone;                                      // 返回这个对象 
    }

6、寄生组合式继承

// 通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。本质上，就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型
    function SuperType(name){
                this.name = name;
                this.colors = ["red","green","blue"];
    }
    SuperType.prototype.sayName = function(){
                alert(this.name);
    };
    function SubType(name,age){
                SuperType.call(this,name);
                this.age = age;
    }
    // 创建超类型原型的一个副本
    var anotherPrototype = Object.create(SuperType.prototype);
    // 重设因重写原型而失去的默认的 constructor 属性
    anotherPrototype.constructor = SubType;
    // 将新创建的对象赋值给子类型的原型
    SubType.prototype = anotherPrototype;
    
    SubType.prototype.sayAge = function(){
                alert(this.age);
    };
    var instance1 = new SubType("luochen",22);
    instance1.colors.push("purple");
    alert(instance1.colors);      // "red,green,blue,purple"
    instance1.sayName();
    instance1.sayAge();
    
    var instance2 = new SubType("tom",34);
    alert(instance2.colors);      // "red,green,blue"
    instance2.sayName();
    instance2.sayAge();

10.你知道call()、apply()、bind() 这几个函数的用途和区别吗?  
三者的相同点：都是用来改变this的指向  
call()和apply()的区别：  
相同点：都是调用一个对象的一个方法，用另一个对象替换当前对象（功能相同）  
不同点：参数书写方式不同  
call()的第一个参数是this要指向的对象，后面传入的是参数列表，参数可以是任意类型，当第一个参数为null、undefined的时候，默认指向window；  
apply()：第一个参数是this要指向的对象，第二个参数是数组  
call()和bind()的区别：  
相同点：都是用来改变this的指向  
不同点：call()改过this的指向后，会再执行函数，bind()改过this后，不执行函数，会返回一个绑定新this的函数