前端面试(3)

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的函数