JavaScript 对象和方法，但 getName 不是函数

Question

我正在学习 JavaScript 并编写一个简单的演示，但失败了。你能帮我弄清楚为什么getName 不是一个函数吗？谢谢。

var newPerson = function(name) {
  this.name = name;
  getName: return function() {
    return this.name;
  }  
};  
			
var personOne = newPerson("Diego");  
var personTwo = newPerson("Gangelo");  
console.log(personOne.getName()); // prints Diego  
console.log(personTwo.getName()); // prints Gangelo

Answer 1

看起来您正试图返回一个带有一些公开方法的对象。在那种情况下，这就是我会做的。

var newPerson = function (name) {
    this.name = name;
    var self = this; 

    return {
        getName: function () {
            return self.name
        }
    }
}

var personOne = new newPerson("Diego");  
var personTwo = new newPerson("Gangelo");  
console.log(personOne.getName()); // prints Diego  
console.log(personTwo.getName()); // prints Gangelo

编辑：感谢 Pootie

或者你也可以这样做。

    var newPerson = function (name) {
        this.name = name;
        
        this.getName = function () {
            return this.name;
        }
    }

    var personOne = new newPerson("Diego");  
    var personTwo = new newPerson("Gangelo");  
    console.log(personOne.getName()); // prints Diego  
    console.log(personTwo.getName()); // prints Gangelo

下次使用 console.log() 代替 document.write()，因为这样更容易调试。

Answer 2

我会这样做

var Person = function(name) {
    this.name = name;
    this.getName = function() {
        return this.name;
    }
};
var personOne = new Person("Diego");
var personTwo = new Person("Gangelo");
document.write(personOne.getName()); // prints Diego  
document.write(personTwo.getName()); // prints Gangelo

Answer 3

既然你说你喜欢我的例子，我想我会发布我的个人偏好。无需像其他示例那样返回对象，因为函数本身就是一个对象。事实上，JS 中的一切都是对象。

查看另一个答案的这个分支：https://jsfiddle.net/6xpgjh94/

var newPerson = function (name) {
    var self = this;
    self.name = name;
    self.getName = function(){
        return self.name
    };
}

var personOne = new newPerson("Diego");  
var personTwo = new newPerson("Gangelo");  
console.log(personOne.getName()); // prints Diego  
console.log(personTwo.getName()); // prints Gangelo

Answer 4

好吧，如果我们是 introducing Object-Oriented Programming，我不妨向您展示 JavaScript 是如何做到最好的：

// The ECMAScript 5 way

function Person(name) {
  this.name = name;
}

Person.prototype.getName = function getName() {
  return this.name;
};

var personOne = new Person("Diego");
var personTwo = new Person("Gangelo");

console.log(personOne.getName());
console.log(personTwo.getName());

下一个使用 ES6 Classes 并且是新 JavaScript 标准的一部分。

注意就浏览器实现而言，此语法仍处于“实验阶段”，可能不适用于您的浏览器。

// The ECMAScript 6 way

class Person {
  constructor(name) {
    this.name = name;
  }
  getName() {
    return this.name;
  }
}

let personOne = new Person("Diego");
let personTwo = new Person("Gangelo");

console.log(personOne.getName());
console.log(personTwo.getName());