前端笔试题（2）

1.this指向

（1）最外层的this指向window

（2）最外层调用函数实际是window调用函数

function a(){
console.log(this)
}
a() //最外层调用函数，window调用的a函数，this还是指向window

（3）谁调用指向谁=>指向的是调用的直接上级

const j = {
  a: 10,
  b: {
    a: 12,
    fn: function () {
      console.log(this.a);
    },
  },
};
j.b.fn() //结果是12。谁调用指向谁=>指向的是调用的直接上级）

const j = {
  a: 10,
  b: {
    fn: function () {
      console.log(this.a);
    },
  },
};
j.b.fn() //结果是undefined。(作用域问题)

（4）箭头函数里面的this指向为箭头函数的外一层

var id =66
function fn2 {
  setTimeout(()=>{
   console.log(this.id) 
  })
}
fn2({id:20})
// 结果是66，箭头函数里面的this指向为函数的外一层。
// 如果把var id = 66 改成 let id = 66 ,结果是undefined（var会挂在window，let不会）。

fn2.call({id:20})     //结果是20
fn2.call([id:20])     //结果是20
fn2.bind({id:20})()   //结果是20
// call apply bind 都会改变this的指向

2.深拷贝和浅拷贝

（1）区别

浅拷贝：只复制指向某个对象的指针，而不复制对象本身，新旧对象共享一块内存。

深拷贝：复制并创建一个一模一样的对象，不共享内存，修改新对象，旧对象保持不变。

let a = 10
let b = a
b = 20
console.log(a,b) //10,20

// 浅拷贝
let arr = [1,2,3]
let newArr = arr;
newArr.push(888)
console.log(arr) //[0,1,2,3,888]

// 基础数据类型没有深拷贝、浅拷贝，赋值达到了深拷贝的效果
// 引用数据类型的赋值其实是复制了引用的地址，地址指向的是一个对象。
// 使用扩展运算符实现数组深拷贝
// 解构赋值只能对单层数据模型=>深拷贝,多层数据=>浅拷贝
var a=[1,2,3]
var b=[...a];
b.push(4);
console.log(b);//1,2,3,4
console.log(a)//1,2,3

（2）业务中常用的深拷贝有哪些

深拷贝：

ojB={a:1}
let newObjB = JSON.parse(JSON.stringify(ojB))
//使用JSON的两个方法实现，弊端：耗性能，JS关键字不能转

手写深拷贝：

function deepClone (source){
  // 新建容器
  const targetObj = source.construtor===Array?[]:{}
  // 遍历
  for(let keys in source){
    if(source.hasOwnProperty(keys)){
      // 判断基础类型 引用类型
      if(source[keys] && typeof source[keys]==='object'){
        // 递归
        targetObj[keys] =deepClone(source[keys])
      }else{
        // 基础类型
      	targetObj[keys] = source[keys]
      }
    }
  }
  return targetObj
}