深克隆 闭包 面向对象总结 

<body>
   姓名:<span id="spanName"></span>
   <br>
   <input type="text" id="inpName">
   <script>
       let a = {},
           b = '0',
           c = 0 ;
      a[b] = 'lord';
      a[c] = 'suan';
      console.log(a[b]);    //'suan' 

      let a = {},
      b = Symbol('1'),
      c = Symbol('1');
      a[b] = 'lord';
      a[c] = 'suan';
      console.log(a[b]); //'lord'

      let a = {},
      b = {
         n : '1'
      },
      c = {
         m : '2'
      };
      a[b] = 'lord';
      a[c] = 'suan';
      console.log(a[b]);  //'suan'

      var test = (function(i){
          return function() {
            alert(i *= 2)
          }
      })(2);
      test(5);    //'4'

      var a = 0,
      b = 0;
      function A(a){
         A = function (b) {
            alert(a + b++);
         };
         alert(a++);
      }
      A(1);   //'1'
      A(2);   //'4'

      let obj = {
         a: 100,
         b :[10,20,30],
         c: {
            x:10
         },
         d : /^\d+$/
      };

      浅克隆1    弊端：obj2数据更改之后    obj也更改了
      let obj2 = {};
      for(let key in obj) {     //hasOwnProperty过滤私有的
         if(!obj.hasOwnProperty(key))  break;
         obj2[key] = obj[key];
      }
      
       浅克隆1
       let obj2 = {...obj};

       深克隆   一般使用深克隆
       JSON.stringify(obj)  的时候，弊端：函数 时间 正则都会出现问题
       let obj2 = JSON.parse(JSON.stringify(obj));
       console.log(obj,obj2);

      深克隆de弊端怎么办  
      function deepClone(obj) {
          //过滤特殊情况
          if(obj === null)  return null;
          if(typeod obj !== "object")  return obj;
          if(obj instanceof RegExp) {   //正则
                return new RegExp(obj);  
          }
          if(obj instanceof Date) {     //时间
               return new Date(obj);
          }

          // 函数的办法   递归
          // 不直接创建对象目的，克隆的结果和之前保持相同的所属类
          let newObj = new obj.constructor;
          for (let key in obj) {
              if(obj.hasOwnProperty(key)){
                    newObj[key] = deepClone(obj[key]);
              }
          }

          return newObj;
      }
      let obj2 = deepClone(obj);
      console.log(obj,obj2);
      console.log(obj === obj2);
      console.log(obj.c === obj2.c);
      
     
     面向对象
      function Foo() {
         getName = function () {
            console.log(1);
         };
         return this;
      }
      Foo.getName = function () {
         console.log(2);
      }
      Foo.prototype.getName = function() {
         console.log(3);
      }
      var getName = function() {
         console.log(4);
      }
      function getName () {
         console.log(5);
      }
      Foo.getName();   //2
      getName();       //4
      Foo().getName(); // 1
      getName();    //1
      new Foo.getName();  //2
      new Foo().getName(); //3
      new new Foo().getName();//3

      
      同步异步
      async function async1() {
         console.log('async1 start');
         await async2();
         console.log('async1 end');
      }

      async function async2() {
         console.log('async2');
      }

      console.log('script start');

      setTimeout(function () {
         console.log('setTimeout'); 
      },0)

      async1();

      new Promise(function (resolve) {
         console.log('promise1');
         resolve();
      }).then(function() {
         console.log('promise2');
      });

      console.log('script end'); 

            script start
            async1 start
            async2
            promise1
            script end
            async1 end
            promise2
            setTimeout


      闭包

       vue双向数据绑定原理  2.0
       let obj = {
         name:''
       };
       let newObj = JSON.parse(JSON.stringify(obj));
       Object.defineProperty(obj,'name',{
         get() {
            return newObj.name;
         },
         set(val) {
            if(val === newObj.name) return;
            newObj.name = val;
            observer();
         }
         
       });
       function observer() {
         spanName.innerHTML = obj.name;
         inpName.value = obj.name;
       } 
       setTimeout(()=>{
         obj.name = 'lord';
       },1000) 
       inpName.oninput = function () {
         obj.name = this.value
       } 

       2.0问题 需要深克隆
       3.0
       let obj = {};
       obj = new Proxy(obj,{
         get (target,prop) {    //target指 obj  prop指obj里的属性  value指值
            return target[prop];
         },
         set(target,prop,value) {
            target[prop] = value;
            observer()
         }
       })
       function observer() {
         spanName.innerHTML = obj.name;
         inpName.value = obj.name;
       } 
       setTimeout(()=>{
         obj.name = 'lord';
       },1000) 
       inpName.oninput = function () {
         obj.name = this.value
       }
   </script>
</body>

 

posted @ 2020-05-06 17:18  酸suan  阅读(196)  评论(0)    收藏  举报