js面试题知识点整理

一、js面试题

1. JavaScript 中的 this 究竟指向谁，箭头函数的 this 有什么不同

• 普通函数
  this 永远指向调用它的对象，new的时候，指向new出来的对象。
• 箭头函数
  箭头函数没有自己的 this，当在内部使用了 this时，它会指向最近一层作用域内的 this

2. 深拷贝和浅拷贝的区别？如何实现?
   两者的区别：一个对象浅复制后，是深层次的对象地址的复制，并没有开辟新的栈，也就是复制的结果是两个对象指向同一个地址，修改其中一个对象的属性，则另一个对象的属性也会发生改变，而深复制的则是开辟了一个新的栈，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。
   JSON.stringify与JSON.parse可以实现深拷贝,还可以借用JQ的extend方法。

• 1.可以递归递归去复制所有层级属性

// 原始对象
var obj = { 
    a:1, 
    arr: [2,3],
    say:function(){
        console.log('hello')
    },
    obj1:{
        arr:[34,55,5],
        hand:function(){
            console.log('hand')
        },
        obj3:{
            a:1,
            take:function(){
                console.log('take')
            }
        }
    }
};
 
// 开始浅复制
var shallowObj = shallowCopy(obj);
 
// 定义浅复制逻辑
function shallowCopy(src) {
  var dst = {};
  for (var prop in src) {
    if (src.hasOwnProperty(prop)) {
      dst[prop] = src[prop];
    }
  }
  return dst;
}
 
// 改变复制后的新对象的属性值(第二层以及更深层次)
shallowObj.obj1.obj3.take = function(){
    console.log('shallowObj_take') 
}
shallowObj.obj1.hand = function(){
    console.log('shallowObj_hand')
}
 
// 打印新对象的方法调用
shallowObj.obj1.obj3.take();  // shallowObj_take
shallowObj.obj1.hand();      // shallowObj_hand
 
// 打印原对象的方法调用
obj.obj1.obj3.take();   // shallowObj_take
obj.obj1.hand();     // shallowObj_hand
 
问题出现了：原对象的方法被新对象的修改，而产生变化。
原因是复制的是对象的地址指针，两个属性共同指向一个对象，只要其一发生变化，另一个也随之变化

• 2. JSON.stringify与JSON.parse实现深拷贝

function deepClone(obj){
    let _obj = JSON.stringify(obj),
            objClone = JSON.parse(_obj);
    return objClone
}    
let a=[0,1,[2,3],4],
    b=deepClone(a);
a[0]=1;
a[2][0]=1;
console.log(a,b);

• 3. JQ的extend方法

let a=[0,1,[2,3],4],
    b=$.extend(true,[],a);
a[0]=1;
a[2][0]=1;
console.log(a,b);

3. js的事件委托是什么，原理是什么？
   事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。用事件委托就可以只用一次dom操作就能完成所有的效果。
4. 如何判断一个变量是否为数组（isArray）

1、instanceof
function isArray (obj) {
  return obj instanceof Array;
}
2、Array对象的 isArray方法
function isArray (obj) {
  return Array.isArray(obj);
}
3、Object.prototype.toString
function isArray (obj) {
  return Object.prototype.toString.call(obj) === '[object Array]';
}

一、vue面试题

1. router 的区别

• router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象，经常用的跳转链接就可以用this.$router.push，和router-link跳转一样。
• route相当于当前正在跳转的路由对象。。可以从里面获取name,path,params,query等。

2. Vue的双向数据绑定原理是什么？
   vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
3. 的作用是什么?
   包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。