最近做FreeCodeCamp的演算法題 Made a Person 時遇到了問題。

要求

用下面給定的方法構造一個物件.

方法有 getFirstName(), getLastName(), getFullName(), setFirstName(first), setLastName(last), and setFullName(firstAndLast).

所有有引數的方法只接受一個字串引數.

所有的方法只與實體物件互動.

檢驗要求

• Object.keys(bob).length 應該返回 6.
• bob instanceof Person 應該返回 true.
• bob.firstName 應該返回 undefined.
• bob.lastName 應該返回 undefined.
• bob.getFirstName() 應該返回 “Bob”.
• bob.getLastName() 應該返回 “Ross”.
• bob.getFullName() 應該返回 “Bob Ross”.
• bob.getFullName() 應該返回 “Haskell Ross” after bob.setFirstName("Haskell").
• bob.getFullName() 應該返回 “Haskell Curry” after bob.setLastName("Curry").
• bob.getFullName() 應該返回 “Haskell Curry” 在 bob.setFullName("Haskell Curry") 之後.
• bob.getFirstName() 應該返回 “Haskell” 在 bob.setFullName("Haskell Curry") 之後.
• bob.getLastName() 應該返回 “Curry” 在 bob.setFullName("Haskell Curry") 之後.

我嘗試了多次。

第一次：

var Person = function(firstAndLast) {
  var arr = firstAndLast.split(" "
 
);
  var obj = {
    first: arr[0],
    last: arr[1],
    getFirstName: function() {
      return this.first;
    },
    setFirstName: function(first) {
      this.first = first;
    },
    getLastName: function() {
      return this.last;
    },
    setLastName: function(last) {
      this.last=last;
    },
    getFullName: function() {
      return this.first+" "+this.last;
    },
    setFullName: function(firstAndLast) {
      var a = firstAndLast.split(" ");
      this.first = a[0];
      this.last = a[1];
    }
  };
};

報錯資訊：TypeError: bob.getFullName is not a function

第二次

var Person = function(firstAndLast) {//閉包運用
  var arr = firstAndLast.split(" ");
    var first=arr[0];//function內部用var宣告的變數是區域性變數，只有其子函式可以訪問，外部無法訪問
    var last=arr[1];

    return {//返回了一個物件
    getFirstName:function() {
      return first;
    },
    setFirstName:function(f) {
      first = f;
    },
    getLastName:function() {
      return last;
    },
    setLastName:function(l) {
      last=l;
    },
    getFullName:function() {
      return first+" "+last;
    },
    setFullName:function(fl) {
      var a = fl.split(" ");
      first = a[0];
      last = a[1];
    }
  };
};

錯誤：不符合bob instanceof Person 應該返回 true.

第三次(完美通關)

var Person = function(firstAndLast) {//閉包運用
  var arr = firstAndLast.split(" ");
    var first=arr[0];//function內部用var宣告的變數是區域性變數，只有其子函式可以訪問，外部無法訪問
    var last=arr[1];

    this.getFirstName=function() {
      return first;
    };
    this.setFirstName=function(f) {
      first = f;
    };
    this.getLastName=function() {
      return last;
    };
    this.setLastName=function(l) {
      last=l;
    };
    this.getFullName=function() {
      return first+" "+last;
    };
    this.setFullName=function(fl) {
      var a = fl.split(" ");
      first = a[0];
      last = a[1];
    };
};

總結

1. 利用函式建立物件時，this關鍵字非常重要。通過this可以將屬性繫結到物件上，成為物件的一部分。
2. 運用函式建立物件時，不想繫結在物件上但現在函式裡要用的變數用var宣告，這樣變數就是區域性變數，函式外訪問不到。