基础(七)

 

 // new关键字执行过程
        // 1. new 构造函数可以在内存中创建了一个空的对象 
        // 2. this 就会指向刚才创建的空对象
        // 3. 执行构造函数里面的代码 给这个空对象添加属性和方法
        // 4. 返回这个对象
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
                console.log(sang);

            }
        }
        var ldh = new Star('刘德华', 18, '男');

　　

 

 <button>点击</button>
    <button name="btn" id="btn">点击1</button>
    <script>
　　　　

      // 函数定义
      function fn() {}
      var fun = function () {};
      //3. 利用 new Function('参数1','参数2', '函数体');
      var f = new Function("a", "b", "console.log(a,b)");
      f(1, 2);

      console.log(f instanceof Object);
      (function () {
        console.log("立即");
      })();
      (function () {
        console.log("立即执行函数");
      })();

      //this指向
      //普通方法this 指向window
      function TestThis() {
        console.log("this指向" + this);
      }

      //对象 this 指向 本对象
      var Car = {
        name: "小米汽车",
        Show: function () {
          console.log("car this指向" + this);
        },
      };

      Car.Show();

      // 4. 绑定事件函数 this 指向的是函数的调用者 btn这个按钮对象
      var btn = document.querySelector("button");
      btn.onclick = function () {
        console.log("绑定时间函数的this:" + this);
      };
      // 5. 定时器函数 this 指向的也是window
      window.setTimeout(function () {
        console.log("定时器的this:" + this);
      }, 1000);
      // 6. 立即执行函数 this还是指向window
      (function () {
        console.log("立即执行函数的this" + this);
      })();

      // 改变函数内this指向  js提供了三种方法  call()  apply()  bind()

      // 1. call()
      var o = {
        name: "andy",
      };

      function fn(a, b) {
        console.log(this.name);
        console.log("fn this 指向" + this);
        console.log(a + b);
      }
      //这里 改变了 fn的this 指向 this 指向的o
      fn.call(o, 1, 2);

      //
      var arry = [1, 44];
      var TestObj = { name: "pink" };
      function TestArray(arry) {
        console.log("TestArray 指向" + this);
        console.log(arry);
      }
      TestArray.apply(TestObj, ["windy"]);

      // call 第一个可以调用函数 第二个可以改变函数内的this 指向
      // call 的主要作用可以实现继承
      function Father(uname, age, sex) {
        this.uname = uname;
        this.age = age;
        this.sex = sex;
        console.log("father 指向" + this);
        this.Show = function () {
          console.log(this.uname + "," + this.age + "," + this.sex);
          console.log(this instanceof Son);
          console.log("Father this 指向 是 Son 吗" + (this instanceof Son));
        };
      }

      function Son(uname, age, sex) {
        Father.call(this, uname, age, sex);
        //这里不能使用apply 因为他的参数是伪数组
        //Father.apply(this,uname,age,sex)
      }
      var son = new Son("刘德华", 18, "男");

      console.log(son);
      son.Show();

      var numArray = [44, 77, 9];
      var numbre = Math.max(...numArray);
      console.log(numbre);

      var reusltNum = Math.max.apply(Math, numArray);
      console.log(reusltNum);

      var idbtn = document.querySelector("#btn");
      idbtn.onclick = (function () {
        var that = this;
        setInterval(
          function () {
            //不用bind情况下
            //console.log('idbtn 定时器this指向'+this)
            //不用bind情况下
            //console.log('idbtn 定时器that指向'+that)
            // console.log(that.getAttribute('name'))
            //使用bind的情况下
            console.log("idbtn bind  定时器this指向" + this);
            console.log(this.name);
          }.bind(this),
          1000
        );
      });
      
      (function () {
        "use strict";
      })();

      // 此时只是给fn函数开启严格模式
      function fn() {
        "use strict";
        // 下面的代码按照严格模式执行
      }

      function fun() {
        // 里面的还是按照普通模式执行
      }

      // 闭包（closure）指有权访问另一个函数作用域中变量的函数。
      // 闭包: 我们fun 这个函数作用域 访问了另外一个函数 fn 里面的局部变量 num
      function fn() {
        var num = 10;

        function fun() {
          console.log(num);
        }
        fun();
      }
      fn();

      // 闭包（closure）指有权访问另一个函数作用域中变量的函数。
      // 一个作用域可以访问另外一个函数的局部变量
      // 我们fn 外面的作用域可以访问fn 内部的局部变量
      // 闭包的主要作用: 延伸了变量的作用范围
      function fn() {
        var num = 10;

        // function fun() {
        //     console.log(num);

        // }
        // return fun;
        return function () {
          console.log(num);
        };
      }
      var f = fn();
      f();
      // 类似于
      // var f = function() {
      //         console.log(num);
      //     }
      // var f =  function fun() {
      //         console.log(num);

      //     }

      // 闭包应用-点击li输出当前li的索引号
      // 1. 我们可以利用动态添加属性的方式
      // var lis = document.querySelector(".nav").querySelectorAll("li");
      // for (var i = 0; i < lis.length; i++) {
      //   lis[i].index = i;
      //   lis[i].onclick = function () {
      //     // console.log(i);
      //     console.log(this.index);
      //   };
      // }
      // 2. 利用闭包的方式得到当前小li 的索引号
      // for (var i = 0; i < lis.length; i++) {
      //   // 利用for循环创建了4个立即执行函数
      //   // 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量
      //   (function (i) {
      //     // console.log(i);
      //     lis[i].onclick = function () {
      //       console.log(i);
      //     };
      //   })(i);
      // }

      // 浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用.
      // 深拷贝拷贝多层, 每一级别的数据都会拷贝.
      var obj2 = {
        id: 1,
        name: "andy",
        msg: {
          age: 18,
        },
      };
      var o2 = {};
      //
      Object.assign(target,source)
      var reuslt3 = Object.assign(obj2, o2);
      console.log(reuslt3)



       // 深拷贝拷贝多层, 每一级别的数据都会拷贝.
       var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            },
            color: ['pink', 'red']
        };
        var o = {};
        // 封装函数 
        function deepCopy(newobj, oldobj) {
            for (var k in oldobj) {
                // 判断我们的属性值属于那种数据类型
                // 1. 获取属性值  oldobj[k]
                var item = oldobj[k];
                // 2. 判断这个值是否是数组
                if (item instanceof Array) {
                    newobj[k] = [];
                    deepCopy(newobj[k], item)
                } else if (item instanceof Object) {
                    // 3. 判断这个值是否是对象
                    newobj[k] = {};
                    deepCopy(newobj[k], item)
                } else {
                    // 4. 属于简单数据类型
                    newobj[k] = item;
                }

            }
        }
        deepCopy(o, obj);
        console.log(o);

        var arr = [];
        console.log(arr instanceof Object);
        o.msg.age = 20;
        console.log(obj);
    </script>
  </body>