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']();
      • 数组调用
      1. const myArray = [function alerter() {alter('Hello!'); } ];
        //调用alerter()函数
        myArray[0]();
    2. 访问自身属性

      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的值会被设置为调用它的对象.
    3. 定义方法

      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;  //这样
            }
    4. 注意全局变量

      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对象

        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']

你可能感兴趣的:(object in depth)