【JavaScript】Made a Person创建对象启示

最近做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声明，这样变量就是局部变量，函数外访问不到。