this指向、深拷贝

this指向问题

vue的this => vue实例

js中的this => window

node中的this => {}

// 谁调用指向谁   （指向当前调用的直接上级）
let o = {
    //name:"lisi",
    fn:function(){
        console.log(this.name)
    }
}
o.fn()  //undefined 块级作用域

// 箭头函数没有this，没有作用域
 var id = 55
 function fn5(){
     //window
    setTimeout(()=>{
        //window
        console.log(this.id)
    },500)
 }
 fn5({id:22})  //66
 
 fn5.call({id:22})  //22
 
 //bind只改变this的指向，不会执行

深拷贝、浅拷贝

浅拷贝（shallowCopy）只是增加了一个指针指向已存在的内存地址

深拷贝（deepCopy）是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存

基本数据类型

let a = 10
let b = a
b = 20

console.log(a,b)  //10 20  只是赋值操作

引用数据类型

    //浅拷贝
    let a = [1,2,3]
    let b = a
    b.push(888)
    console.log(a)   //[1,2,3,888]   b拷贝的是内存地址

    //解构赋值  
   //一维数组或者对象可以达到深拷贝的效果
    let a = [1,2,3]
    let b = [...a]
    b.push(888)
    console.log(a,b) //[1,2,3][1,2,3,888] 
    
    //多维数组是浅拷贝
    let  a  = [[1,2],[2,3]]
    let b = [...a]
    b[0].push(222)
    console.log(a,b)  // [[1,2,222],[2,3]]  [[1,2,222],[2,3]]
    

常用的深拷贝 SON.parse(JSON.stringify())

但是对象中有function、null、正则表达式 关键字的时候会给转换成字符串，这种情况下不能使用

手写一个深拷贝

     function deepclone(source) {
         //source 数组对象
         const targetobj = source.constructor == Array?[]:{};
         for(let keys in source){
             //检测一个属性是不是对象自有属性
            if(source.hasOwnProperty(keys)){
                //内层的引用对象
                if(source[keys] && typrof source[keys]==="object"){
                    // targetObj[keys] = source.constructor == Array?[]:{};
                    targetObj[keys] = deepclone(source[keys])
                }else{
                    // 基本类型
                    targetObj[keys] = source[keys]
                }
            }
         }
         return targetobj;
     }