JavaScript 複習之例項物件與 new 命令

DreamTruth發表於2019-02-27
JavaScript物件

建構函式有自己的特徵和用法：

  • 函式體內部使用this關鍵字，代表了索要生成的物件例項
  • 生成物件的時候，必須使用 new 命令

new 命令的作用，就是執行建構函式，返回一個例項物件。其原理是：

  1. 建立一個空物件，作為將要返回的物件例項
  2. 將這個空物件的原型，指向建構函式的prototype屬性
  3. 將這個空物件賦值給函式內部的this
  4. 開始執行建構函式內部程式碼

注意：如果建構函式內部有return語句，而且return後面跟著一個物件，new命令會返回return語句指定的物件，否則，就會不管return語句，返回this物件。

var Vehicle = function(){
    this.price = 1000;
    return 1000;
}
(new Vehicle()) === 1000 //false

var Bsterm = function (){
  this.price = 1000;
  return { price: 2000 };
};

(new Bsterm()).price // 2000
複製程式碼

上面程式碼中，建構函式Vehicle的return語句，返回的是一個數值。new命令就會忽略這個return語句，返回“構造”後的this物件。 建構函式Bsterm的return語句，返回的是一個新物件。new命令會返回這個物件，而不是this物件。

如果是普通函式（內部沒有this關鍵字的函式）使用new命令，則會返回一個空物件。

new.target ： 函式內部可以使用new.target屬性。如果當前函式是new命令呼叫，new.target指向當前函式，否則為undefined。

function f() {
  console.log(new.target === f);
}

f() // false
new f() // true
複製程式碼

Object.create() 建立例項物件

建構函式作為模板，可以生成例項物件。但是有時候拿不到建構函式，只能拿到一個現有物件。我們希望把這個物件作為模板，生成新的例項物件，這時候就可以用Object.create()方法。

var person1 = {
  name: '張三',
  age: 38,
  greeting: function() {
    console.log('Hi! I\'m ' + this.name + '.');
  }
};

var person2 = Object.create(person1);

person2.name // 張三
person2.greeting() // Hi! I'm 張三.
複製程式碼

相關文章