前端对象的知识点

// 认识对象 
// 对象(object)是“键值对”的集合，表示属性和值的映射关系
   // JS中，大括号表示对象
   // var xiaoming = {
   // 属性名(键名，key)name: '小明'，
   // age: 12,
   // sex:'男',
   // hobbies: ['足球'，'编程]};
// 对象的语法
    //   k和v之间用冒号分隔，
    //   每组k : v之间用逗号分隔，最后一个k :v对后可以不书写逗号
    //   var obj = {
    //   k: v,
    //   k : v,
    //   k: v,
    //   k: v
    //   };
// 属性是否加引号
    // 如果对象的属性键名不符合JS标识符命名规范，则这个键名必须用引号包裹
    // var xiaoming = {
    // name: '小明'，age: 12，
    // sex: '男'，
    // hobbys: [足球'，'游泳'，'编程'],
    // 'favorite-book ' :‘舒克和贝塔' // 属性名中有短横，不符合J5标识符命名规范，属性名必须用引号包裹
    // };
// 属性的访问
    //   可以用“点语法”访问对象中指定键的值
    //   xiaoming.name;//'小明'
    //   xiaoming.age;// 12
    //   xiaoming.hobbys;//['足球'，'游泳'，'编程']
    // 如果属性名不符合JS标识符命名规范，则必须用方括号的写法来访问
    // xiaoming[ 'favorite-book ' ];//'舒克和贝塔'
    // 如果属性名以变量形式存储，则必须使用方括号形式
    //    var obj = {
    //    a: 1,
    //    b: 2,
    //    c: 3
    //    };
    //    属性名用变量存储
    //    var key = 'b ';
    //    console.log( obj.key ) ;//undefined
    //    console.log(obj[key]);// 2
// 属性的创建
       // 如果对象本身没有某个属性值，则用点语法赋值时，这个属性会被创建出来
       // var obj = {
       // a: 10};
       // obj.b = 40;
// 属性的删除
     // 如果要删除某个对象的属性，需要使用delete操作符
     // var obj = {
     // a : 1,b: 2};
     // delete obj.a;
// 对象的方法
     // 如果某个属性值是函数，则它也被称为对象的“方法”
     // var xiaoming = {
     // name: '小明',age: 12,
     // sex: '男'，
     // hobbys: ['足球'，'游泳'，"编程']，'favorite-book' :'舒克和贝塔'，
     // sayHello: function () {
     // console.log('你好，我是小明，今年12岁，我是个男生');  对象的方法
     // }
     // };
// 方法的调用
     // 使用“点语法”可以调用对象的方法
     // xiaoming.sayHello();
// 方法和函数
    // 方法也是函数，只不过方法是对象的“函数属性”，它需要用对象打点调用
    // 在正式学习了什么是“方法”之后，就能深入理解之前我们学习的一些函数的书写形式了，比如:
// 对象的遍历
    // 和遍历数组类似，对象也可以被遍历，遍历对象需要使用for. . .in...循环
    // 使用for. . .in.. .循环可以遍历对象的每个键
    // 在后续的ES6相关课程中，还会学习新的对象遍历的方式
// for...in.…循环
    // for (var k in obj) {
    // console.log('属性’+k + '的值是'+ obj[k]);
    // }



// 对象是引用类型值
// 对象是引用类型值，这意味着:
// 不能用var obj2 = obj1这样的语法克隆一个对象
// 使用==或者===进行对象的比较时，比较的是它们是否为内
// 存中的同一个对象，而不是比较值是否相同
        // 例子1
        // var obj1 = {
            // a: 1,
            // b: 2,
            // c: 3
        // };
        // var obj2 = {
            // a: 1,
            // b: 2,
            // c: 3
        // };
        // console.log(obj1 == obj2);      // false
        // console.log(obj1 === obj2);     // false
        // 
        // console.log({} == {});          // false
        // console.log({} === {});         // false
        // 
        // 例子2
        // var obj3 = {
            // a: 10
        // };
        // var obj4 = obj3;
        // obj3.a ++;
        // console.log(obj4);      // {a: 11}
     // 对象的浅克隆
     // 复习什么是浅克隆:只克隆对象的“表层”，如果对象的某些属性值又是引用类型值，则不
     // 使用for. . . in.. .循环即可实现对象的浅克隆
            //  var obj1 = {
                    // a: 1,
                    // b: 2,
                    // c: [44, 55, 66]
                // };
        
                // 实现浅克隆
                // var obj2 = {};
                // for (var k in obj1) {
                    // 每遍历一个k属性，就给obj2也添加一个同名的k属性
                    // 值和obj1的k属性值相同
                    // obj2[k] = obj1[k];
                // }
        
                // 为什么叫浅克隆呢？比如c属性的值是引用类型值，那么本质上obj1和obj2的
                // obj1.c.push(77);
                // console.log(obj2);                  // obj2的c属性这个数组也会被增
                // console.log(obj1.c == obj2.c);      // true，true就证明了数组是同一
// 对象的深克隆
         // 什么是深克隆:克隆对象的全貌，不论对象的属性值是否又是引用类型值，都能将它
        //  var obj1 = {
            // a: 1,
            // b: 2,
            // c: [33, 44, {
                // m: 55,
                // n: 66,
                // p: [77, 88]
            // }]
        // };

        // 深克隆
        // function deepClone(o) {
            // 要判断o是对象还是数组
            // if (Array.isArray(o)) {
                // 数组
                // var result = [];
                // for (var i = 0; i < o.length; i++) {
                    // result.push(deepClone(o[i]));
                // }
            // } else if (typeof o == 'object') {
                // 对象
                // var result = {};
                // for (var k in o) {
                    // result[k] = deepClone(o[k]);
                // }
            // } else {
                // 基本类型值
                // var result = o;
            // }
            // return result;
        // }

        // 
        // var obj2 = deepClone(obj1);
        // console.log(obj2);
        // 
        // console.log(obj1.c == obj2.c);      // false
        // 
        // obj1.c.push(99);
        // console.log(obj2);                  // obj2不变的，因为没有“藕断丝连”的现象

        // obj1.c[2].p.push(999);
        // console.log(obj2);                  // obj2不变的，因为没有“藕断丝连”的现象
        // 函数的上下文
      // 函数中可以使用this关键字，它表示函数的上下文
      // 与中文中“这”类似，函数中的this具体指代什么必须通过调用函数时的“前言后语”来判断
// 函数中的this
     // var xiaoming = {
     // nickname:'小明',
     // age: 12,
     // sayHello: function () {
     // console.log('我是' + this. nickname + '我' + this.age +'岁了')
     // }
     // };
     // 
     // var sayHello = xiaoming.sayHello; //=>将函数“提”出来,单独存为变量
     // sayHello();直接圆括号调用这个函数，而不是对象打点调用了
// 函数的上下文由调用方式决定
    //同一个函数，用不同的形式调用它，则函数的上下文不同情形1:对象打点调用函数，函数中的this指代这个打点的对象xiaoming.sayHello();
    //情形2:圆括号直接调用函数，函数中的this指代window对象var sayHello = xiaoming.sayHello;
    //sayHello();
// 函数的上下文由调用函数的方式决定
      // 函数的上下文(this关键字）由调用函数的方式决定，function是“运行时上下文”策略
      // 函数如果不调用，则不能确定函数的上下文
// 规则1
    //   规则1︰对象打点调用它的方法函数，则函数的上下文是这个打点的对象
    //   对象.方法()
    // function fn() {
    // console.log(this.a + this.b);
    // }
    // var obj = {
    // a: 66,b: 33,
    // fn: fn
    // };
    // obj.fn();     // 99
    // 案例2
    // var obj1 = {
    // a: 1,b: 2,
    // fn: function:() {
    // console.log(this.a + this.b);
    // }
    // };
    // var obj2 = {
    // a: 3,
    // b: 4,
    // fn: obj1.fn
    // };
    // obj2.fn(); //7

    // 案例3
     // function outer( ) {
     // var a = 11;var b = 22;return {
     // a: 33,b: 44,
     // fn: function () {
     // console.log(this.a + this.b);
     // }
     // 
     // };
     // }
     // outer( ).fn(); =>77
    //案例4
    // function fun() {
    //  console.log(this.a + this.b);
    //  }
    //  var obj = {
    //  a: 1,b: 2,c: [{
    //  a: 3,b: 4,c: fun}]
    //  };
    //  var a = 5;
    //  obj.c[0].c(); =>7
    // 规则2
       // 规则2:圆括号直接调用函数，则函数的上下文是window对象
       // 函数()
    //    var obj1 = {
    //   a: 1,b: 2,
    //   fn: function () {
    //   console.log(this.a + this.b);
    //   }
    //   };
    //   var a = 3;
    //   var b = 4;
    //   var fn = obj1.fn;
    //   fn();-构成函数()的形式，适用规则2  //7
    // function fun() {
    //  return this.a + this.b;
    //  }
    //  var a = 1;var b = 2;var obj = {
    //  a: 3,
    //  b: fun(),适用规则2
    //  fun: fun
    //  };
    //  var result = obj.fun(); 适用规则1
    // console.log( result); //6
// 规则3
     // 规则3:数组（类数组对象）枚举出函数进行调用，上下文是这个数组(类数组对象)
     // 数组[下标]()
    //  var arr = [ 'A','B', 'c ', function () {
    //  console.log(this[]);
    //  }];
    //  arr[3](); =>适用规则3 A
// 类数组对象
    // 什么是类数组对象:所有键名为自然数序列(从0开始)，且有length属性的对象
    // arguments对象是最常见的类数组对象，它是函数的实参列表
    // function fun() {
    // arguments[3]();
    // }
    // fun( 'A','B','c', function ( ) i
    // console.log(this[1]);  // B
    // });

// 规则4
   // 规则4:IIFE中的函数，上下文是window对象
   // (function() {
   // })();
     // var a = 1;var obj = {
     // a: 2,
     // fun: (function ( ) {
     // var a = this.a;
     // return function () {
     // console. log(a + this.a) ;
     // }
     // })() =>适用规则4
     // };
     // obj.fun(); =>规则1   //3
// 规则5
     // 规则5:定时器、延时器调用函数，上下文是window对象
     // setInterval(函数，时间);
     // setTimeout(函数，时间);
    //  var obj = {
    //  a:1,b: 2,
    //  fun: function () {
    //  console.log(this.a + this.b);
    //  }
    //  }
    //  var a = 3;
    //  var b = 4;
    //  setTimeout(function() i
    //  obj.fun( );  =>适用规则1 结果为3
    //  }，2000) ;
// 规则6
    // 规则6:事件处理函数的上下文是绑定事件的DOM元素
    // DOM元素.onclick = function () {
    // };
    // <body>
    // <div id="box1"></div>
    // <div id="box2"></div>
    // <div id="box3"></div>
// 
    // <>
        // function setColorToRed() {
            // 备份上下文
            // var self = this;
            // setTimeout(function() {
                // self.style.backgroundColor = 'red';
            // }, 2000);
        // }
// 
        // var box1 = document.getElementById('box1');
        // var box2 = document.getElementById('box2');
        // var box3 = document.getElementById('box3');
// 
        // box1.onclick = setColorToRed;
        // box2.onclick = setColorToRed;
        // box3.onclick = setColorToRed;
    // 
// call和apply能指定函数的上下文
        // function sum() i
        // alert(this.chinese + this.math + this.english);
        // }
        // var xiaoming = {
       // chinese: 80,math: 95,english: 93};
       //sum.call(xiaoming);
       //sum.apply( xiaoming);函数.call(上下文);函数.apply(上下文);
//  call和apply的区别
      // call要用逗号罗列参数
      // apply要把参数写到数组中
    //   上下文规则总结
    //   规则    上下文
    //   对象.函数()    对象
    //   函数()    window
    //   数组[下标]()    数组
    //   IIFE    window
    //   定时器    window
    //   DOM事件处理函数    绑定DOM的元素
    //   call和apply    任意指定
// 用new操作符调用函数
    // 现在，我们学习一种新的函数调用方式:
    // new函数()
    // 你可能知道new操作符和“面向对象”息息相关，但是现在
    // ,我们先不探讨它的“面向对象”意义，而是先把用new调
    // 用函数的执行步骤和它上下文弄清楚
// 用new操作符调用函数
    // JS规定，使用new操作符调用函数会进行“四步走”
    // 1）函数体内会自动创建出一个空白对象
    // 
    // 2）函数的上下文(this）会指向这个对象
    // 3）函数体内的语句会执行
    // 4）函数会自动返回上下文对象，即使函数没有return语句