淺談JavaScript建構函數

提到“建構函數”，大部分人會聯想到Java類別的概念，JavaScript也有建構函數，其使用語法與Java或者其他基於類別的語言中建立物件的語法相似。

JavaScript建構函數是一類比較特殊的函數，特點是：

• #用<a href="http://www.php.cn/wiki/165.html" target="_blank">new</a>##關鍵字呼叫函數

• 函數首字母大寫

面試中，我常針對建構子問兩個問題：

1. #建構函數首字母必須大寫嗎？

2. 不用

   new關鍵字，直接執行建構函數，是否會出錯？如果不會出錯，那麼，用new和不用new呼叫建構函數，有什麼差別？

問題1基本100%都能答對（大小寫都可以），問題2有20%同學會答錯，尤其是第二問。

那麼，讓我們來看看

new運算子到底起到什麼作用？

1. 使用new運算子呼叫函數

範例：

function Person(name){
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
}

var person1 = new Person('nicole');
person1.say(); // "I am nicole"

用

new呼叫建構函數，函數內部會發生下列變化：

• 建立一個this

  變數，該變數指向一個空物件。並且該物件繼承函數的原型；

• 屬性和方法加入this引用的物件中；

• 隱含傳回this物件（如果沒有顯性傳回其他物件）

用偽程式來展示上述變更：

function Person(name){
  // 创建this变量，指向空对象
  var this = {}; 
  // 属性和方法被加入到this引用的对象中
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
  // 返回this对象
  return this;
}

可以看出，用

new呼叫建構函數，最大特點為，this物件指向建構函數產生的物件，所以，person1 .say()會回傳字串： "I am nicole"。

小贴士

如果指定了返回对象，那么，"this"对象可能被丢失。

function Person(name){
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
  var that = {};
  that.name = "It is that!";
  return that;
}

var person1 = new Person('nicole');
person1.name; // "It is that!"

2. 直接呼叫函數

如果直接呼叫函數，那麼，

this物件指向window，並且，不會預設回傳任何對象（除非顯性聲明傳回值）。

還是拿

Person函數為例，直接呼叫Person函數：

var person1 = Person('nicole');
person1; // undefined
window.name; // nicole

可見，直接呼叫建構子的結果，並不是我們想要的。

3.小結

為了防止因為忘記使用

new關鍵字而呼叫建構函數，可以加一些判斷條件強行呼叫new關鍵字，代碼如下：

function Person(name){
  if (!(this instanceof Person)) {
    return new Person(name);
  }
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
}

var person1 = Person('nicole');
console.log(person1.say()); // I am nicole
var person2 = new Person('lisa');
console.log(person2.say()); // I am lisa

       

以上是淺談JavaScript建構函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！