【學習筆記】JavaScript - 對象、屬性操做、包裝對象

對象建立方法

對象字面量

• 是建立對象最簡單最經常使用的方法

var obj = {};
複製代碼

構造函數

• 構造函數就是提供一個生成對象的模板並描述對象基本結構的函數；一個構造函數能夠生成多個對象，這些對象都有相同的結構
• 構造函數也是正常的函數，爲了區分它和別的正常函數，把構造函數的函數名首字母大寫
• 函數體內使用的 this 關鍵字表明所要生成的對象實例
• 生成對象時必須使用 new 命令來調用構造函數，因此構造函數更合理的理解應該是函數的構造調用
• new 命令的做用就是執行一個構造函數且返回一個對象實例。使用 new 命令時，它後面的函數調用就不是正常的調用，而是依次執行下面的步驟

  一、建立一個空對象，做爲將要返回的對象實例
  二、將空對象的原型指向了構造函數的 prototype 屬性
  三、將空對象賦值給構造函數內部的 this 關鍵字（構造函數內部，this 指向的是一個新生成的空對象，全部針對 this 的操做都會發生在這個空對象上）
  四、開始執行構造函數內部的代碼

• 構造函數分兩種：系統自帶的構造函數和自定義的構造函數
• 系統自帶的內置構造函數
  • 建立對象的構造函數是 Object() -> var obj = new Object()， 它的做用和 var obj = {} 的做用是同樣的
  • 系統自帶的還有不少：Number()、String()、Array()、Boolean()、Date() 等
• 自定義構造函數：最經常使用的一種構造函數：function Person() {}

  function Person(name) {
     // var this = {}
     this.name = name;
     // return this
  }
  var person = new Person('Tina')
  複製代碼

  • 若在構造函數首行手動建立一個對象，好比 that 對象且最後返回了 that，那裏面的 this 就不起做用，要爲屬性賦值就要用 that

  function Person(name) {
     var that = {name: 'aa'}
     that.name = name;
     return that
  }
  var person = new Person('Tina')
  複製代碼

• 注意：若最後返回的是對象，那麼 this 失效，但若最後顯示返回的是原始值，那 this 仍是有效的

  function Person() {
     var that = {}
     that.name = "aa";
     this.name = 'bb';
     return 123;
  }
  var person = new Person()
  person.name // 'bb'
  複製代碼

• 若對普通函數（內部沒有 this 關鍵字的函數）使用 new 命令，則會返回一個空對象

  function Keith() {
    return 'this is a message';
  }
  var boy = new Keith();
  console.log(boy); // Keith {}
  複製代碼

  上面代碼中，對普通函數 Keith 使用 new 命令會建立一個空對象。這是由於 new 命令老是返回一個對象，要麼是實例對象要麼是 return 語句指定的對象或數組。本例中 return 語句返回的是字符串，因此 new 命令就忽略了該語句

Object.create(原型)

對於建立一個對象來講，更推薦使用字面量的方式建立對象，由於使用 new Object() 的方式建立對象須要經過做用域鏈一層層找到 Object，可是使用字面量的方式就沒這個問題

屬性的增刪改查

• 增：能夠經過對象名+點+屬性名的方法來給對象添加新的屬性而且賦值
• 改：修改的操做和增長的操做實際上是同樣的，只要調用相同的屬性名而後賦一個新的值就能夠了
• 查：對象名+點+屬性名、對象名[屬性名]
• 刪：delete 操做符，其做用就是來刪除屬性的

包裝對象

在 JavaScript 中有三種包裝對象，它們對應的構造函數分別是 String、Number、Boolean，這三個包裝對象對應着三個原始類型：字符串、數值和布爾。而原始數據類型是沒有屬性和方法的，它們就是單純的值，若但願獲取它們的屬性或調用方法，那就須要包裝對象來幫忙，原始類型會先經過其包裝對象對應的構造函數轉換成對象，而後用這個對象調用方法或使用屬性，結束後原始類型還是原始類型，新建立的包裝對象會被銷燬

注意：undefined、null 無包裝對象

原始值是不能夠改變的，只有對象纔有屬性和方法，那下面的結果是爲何？

var str = 'abcd';
console.log(str.length) // 4
複製代碼

按理說這個字符串原始值是沒有 length 屬性的，但實際確實能夠查看 length 這個屬性

這就涉及到一個叫作包裝類的東西，在調用執行這一行代碼以前，程序會自動把 str 包裝成一個字符串對象，該對象上面有屬性和方法，在這一行代碼執行完畢以後再銷燬這個字符串對象

var str = 'abcd';
// var str1 = new String('abcd')
str.length // str1.length
// 銷燬str1
複製代碼

這也就是爲何在執行 str.length = 2; 這句話後再打印 str.length 仍是 4 的緣由：系統在執行 str.length = 2 時，先建立了一個 String 對象，這個對象的值是 ‘abcd’，改變的 length 實際上是這個隱式建立的對象的 length 值，並非改變了原始值 str，當 str.length = 2 這句代碼執行完後隱式建立的字符串對象就被銷燬了，因此打印的 str.length 仍是 4

var str = 'abcd';
// var str1 = new String('abcd')
str.length = 2 // str1.length = 2
// 銷燬str1
console.log(str.length) // abcd長度仍是4
複製代碼

其餘類型的數據也是同樣的，當給原始值加屬性時都是先隱式包裝成對象，而後賦完屬性值以後再銷燬這個對象