object in depth

1. 创建和修改属性

   1. 创建对象

      1. const myObject = {};    //字面量表示法
         const myObject = new Object();    //Object() 构造函数

   2. 修改属性 ---- 对象中的数据是可变的

   3. 添加属性

      1. const printer = {};
         //添加属性
         printer.on = true;
         printer.mode = "black and white";
         printer['remainingSheetes'] = 168;
         printer.print = function () {
             console.log('The printer is printing!');
         };

   4. 移除属性

   5. delete printer.mode;

   6. 传递参数

      1. 传递原始类型 primitive type

         • 原始类型（字符串、数字、布尔值、Null、Undefined）是不可变的。函数中的参数（所以不会有作用域覆盖）所作的任何修改都不会影响该函数外部的原始类型，而是为该函数创建一个局部副本

         • function changeToEight(n) {
             n = 8; // 无论 n 是什么，它此刻都是 8... 但仅仅是在这个函数中！
           }
           
           let n = 7;
           
           changeToEight(n);
           
           console.log(n);  // 7

      2. 传递对象

         1. 对象是可变的。如果向函数传递一个对象，会传递一个引用给该对象。

            • let originalObject = {
                  favoriteColor: 'red'
              };
              
              function setToBlue(object) {
                  object.favoriteColor = 'blue';
              }
              
              setToBlue(originalObject);
              
              originalObject.favoriteColor;    //blue

            • JS中的对象是通过引用传递的，因此如果修改引用，就是在修改原始对象本身（C语言中的&引用）

         2. 同样地，将一个对象赋值给新的变量，然后改变副本，结果与上述函数参数相同。

            1. const iceCreamOriginal = {
                   Andrew: 3,
                   Richard: 15
               };
               
               const iceCreamCopy = iceCreamOriginal;
               
               console.log(iceCreamCopy.Richard);  //15
               
               iceCreamCopy.Richard = 99;
               
               console.log(iceCreamCopy.Richard);  //99
               
               console.log(iceCreamOriginal.Richard);  //99

   7. 两个对象的比较

      • const parrot = {
            group: 'bird',
            feathers: true,
            chirp: function () {
              console.log('Chirp chirp!');
            }
          };
        
          const pigeon = {
            group: 'bird',
            feathers: true,
            chirp: function () {
              console.log('Chirp chirp!');
            }
          };
        
          console.log(parrot === pigeon);   //false
        
          const myBird = parrot;
          console.log(myBird === parrot);   //true
          console.log(myBird === pigeon);   //false

      • 只有在将同一个对象的两个引用进行比较时，才会返回true

2. 调用对象方法

   1. 调用方法

      • const developer = {
          name: 'Andrew',
          sayHello: function () {
            console.log('Hi there!');
          }
        };
        
        developer.sayHello();
        developer['sayHello']();

      • 数组调用

   2. 1. const myArray = [function alerter() {alter('Hello!'); } ];
         //调用alerter()函数
         myArray[0]();

   3. 访问自身属性

      1. this

         • const triangle = {
             type: 'scalene',
             identify: function () {
               console.log(`This is a ${this.type} triangle.`);
             }
           };
           
           triangle.identify();
           // 'This is a scalene triangle.'

         • 当identify( )方法被调用时，this的值会被设置为调用它的对象.

   4. 定义方法

      1. 定义对象 --- 构造函数

         • function Car(make, model, year) {
               this.make = make;
               this.model = model;
               this.year = year;
           }
           
           var myCar = new Car("Mazda", "Miata", 1990);

         • 为对象类型创建一个函数以声明类型的名称、属性和方法；再用new创建对象实例

      2. 定义方法

         1. 还可以这样定义方法

            1. function displayCar() {
                 var result = `A Beautiful ${this.year} ${this.make} ${this.model}`;
                 pretty_print(result);
               }
               
               function Car(make, model, year, owner) {
                 this.make = make;
                 this.model = model;
                 this.year = year;
                 this.displayCar = displayCar;  //这样
               }

   5. 注意全局变量

      1. this和调用--- 函数如何调用决定了函数内的this值

         • chameleon对象 由于 .lookAround() 作为一个方法被调用，因此.lookAround()中的this的值就是调用时位于点左侧的部分

           1. const chameleon = {
                eyes: 2,
                lookAround: function () {
                   console.log(`I see you with my ${this.eyes} eyes!`);  //用this检索属性
                }
              };
              
              chameleon.lookAround();

         • 全局window对象

           • const car = {
               numberOfDoors: 4,
               drive: function () {
                  console.log(`Get in one of the ${this.numberOfDoors} doors, and let's go!`);
               }
             };
             
             const letsRoll = car.drive;
             
             letsRoll();

           • 当一个常规函数被调用时，this的值就是全局window对象

           • 虽然 car.drive 是一个方法，但我们还是将该函数存储在一个变量 letsRoll 中。由于 letsRoll() 是作为一个常规函数调用的，因此 this 将指向它内部的 window 对象。

      2. window对象

         1. window对象由浏览器环境提供

            1. window作为全局变量，代表了脚本正在运行的窗口暴露给JavaScript代码

            2. 在有标签页功能的浏览器中，每个标签都拥有自己的window对象，同一个窗口的标签页之间不会共享一个window对象

               扫描二维码关注公众号，回复： 7345236 查看本文章

         2. 全局变量是window上的属性

            1. window对象处于最高（全局）级别，每个在全局级别进行的变量声明会自动成为window对象上的一个属性

            2. window.currentlyEating === currentlyEating // true

         3. 全局变量和var、let、及const

            1. 只有使用 var 声明的变量才会将其添加到window对象中，let、const在函数外部声明的变量，不会被作为属性添加到window对象。

               1. let eating ='rice';
                  window.eating === eating    //false

         4. 全局函数是window上的方法

            1. function learnSomethingNew() {
                 window.open('https://www.udacity.com/');
               }
               
               window.learnSomethingNew === learnSomethingNew  // true

         5. 避免全局变量

            1. 紧密耦合

               • 紧密耦合是开发者用来表示代码过于依赖彼此细节。更改一段代码会无意中改变其他代码的功能

            2. 名称冲突

               1. 当两个（或多个）函数依赖于具有相同名称的变量时，则会发生名称冲突。

               2. 两个函数都会尝试更新或设置变量，但是这些更改将被相互覆盖。

3. 提取属性和值

   1. Object.keys()和Object.values()

      1. const dictionary = {
           car: 'automobile',
           apple: 'healthy snack',
           cat: 'cute furry animal',
           dog: 'best friend'
         };
         
         console.log(Object.keys(dictionary));    // ['car', 'apple', 'cat', 'dog']
         console.log(Object.values(dictionary));    // ['automobile', 'healthy snack', 'cute furry animal', 'best friend']