如何以对象文字表示法创建方法？答案

【问题标题】：How to create a method in object literal notation?如何以对象文字表示法创建方法？
【发布时间】：2013-07-03 10:29:23
【问题描述】：

我了解到创建对象有两种类型。第一个：对象文字表示法，第二个：对象构造函数。我知道还有方法和函数，但是我不明白如何用对象文字表示法创建方法？在对象构造函数中我只写：

var bob = new Object();
bob.age = 30;
bob.setAge = function(newAge) {
  bob.age = newAge;
};

您能告诉我在编写对象字面量表示法时如何做同样的事情吗？

var bob = {
  age: 30
};

【问题讨论】：

请忘记 w3schools。这是一个可怕的资源。请改用 MDN。而不是new Object()，你最好直接使用{}。
如果你想在你的对象实例上使用函数（比如创建几个人对象），那么为每个对象定义相同的函数并不是很有效。在 JavaScript 中，您可以使用构造函数并在其原型上设置共享属性（如函数）：stackoverflow.com/questions/16063394/…
我的代码还是不行，我应该在这里写还是新建一个问题？我是 stackoverflow 的新手 :)
永远不要使用 w3schools 作为文档，大部分都是错误的。始终使用 MDN JavaScript 文档。
@JarrodRoberson 你能举一些例子来说明 W3Schools 是如何“错误”的吗？我同意 W3Schools 不是学习编码的最佳来源。但这并不是那么糟糕。它的设计目的不是作为参考站点或用于学习特定技术的所有细微差别。将其视为介绍各种编程语言和网络标准的跳板，人们可以在其中快速调查不同的技术，甚至对其进行测试他们的浏览器。 W3Schools 激发了我对编码的欣赏。像 MDN 和 Stack Overflow 这样的网站是我学习掌握这门手艺的地方。

标签： javascript

【解决方案1】：

从语法上来说，变化很简单：

var bob = {
  age: 30,
  setAge: function (newAge) {
    bob.age = newAge;
  }
};

但正如您所看到的，存在一个问题：在您的代码中，它使用外部 bob 变量，因此如果您更改 bob 变量的值，这将不起作用。

你可以用

解决这个问题

var bob = {
  age: 30,
  setAge: function (newAge) {
    this.age = newAge;
  }
};

请注意，此时您应该检查您需要的实际上是否不是a class，如果您有多个实例，这将带来一些性能改进。

更新： ECMAScript 6 现在允许以相同的方式定义方法，无论它们是否在对象字面量中：

var bob = {
  age: 30,
  setAge (newAge) {
    this.age = newAge;
  }
};

【讨论】：

我认为问题只是关于如何获得与第一个 sn-p 相同的结果 :-) 是否使用 this 或变量已经讨论过 here
我的代码还是不行，我应该在这里写还是新建一个问题？（我是stackoverflow的新手）:)
你可能应该问一个新问题，但这个问题应该显示你的代码不起作用（足够短），并解释为什么你认为它不起作用以及预期的结果是什么。
ECMAScript 6 更新部分很有帮助——在某些代码中看到这种语法我很困惑，但现在我很放松。但是，链接似乎已失效。
@ibic 感谢您通知我死链接。不幸的是，我没有找到任何好的地方，所以我只是删除了关于“最大最小类”的最后一部分，这是相当离题的。

【解决方案2】：

没有什么不同，而且很简单

var bob = {
    age:     30,
    setAge:  function( newAge ) {
        this.age = newAge;
    }
};

或者，您可以通过调用 Object.defineProperty() 或简单的来创建一个真正的 setter 函数

var bob = {
    age:       30,
    firstName: 'j',
    lastName:  'Andy',
    set setName( newName ) {
        var spl = newName.split( /\s+/ );
        this.firstName = spl[ 0 ];
        this.lastName  = spl[ 1 ];
    }
}

你可以去哪里

bob.setName = "Thomas Cook";  // which sets firstName to "Thomas" and lastName to "Cook"

【讨论】：

你不会调用 setter 属性 setX :-)
@Bergi 我知道有人会抱怨：p
@jAndy 说真的，很丑 :)
我认为 SO 的重点是除了教授编码概念之外，还教授普遍接受的编码约定。拥有一个名为 setAge 的 setter 并不能正确解释它是如何抽象属性的，并且会教给新编码员一个糟糕的约定。应该是set age: (value) { this._age = value; }。为什么不直接编辑你的答案来修复它？
@StevenMoseley 我不认为使用带下划线的属性来伪装隐私类似于公认的约定。但如果它那么重要，我会更新示例。

【解决方案3】：

您发布的最后一个代码缺少逗号。此外，您不需要';'在对象属性的函数定义之后。像这样：

var object2 = {
name: "Fred",
age: 28,
club: "Fluminense",
bio2: function (){
    console.log(this.name +" is "+ this.age + " years old and he is playing in "+             this.club);
    }
};

【讨论】：

这已经转移到另一个问题：stackoverflow.com/questions/17487840/…

【解决方案4】：

这是使用文字对象创建方法解决此练习的方法：

var setAge = function (newAge) {
  this.age = newAge;
};

var bob = new Object();
bob.age = 30;
bob.setAge = setAge;

var susan = {
    age: 25,
    setAge: setAge
}

susan.setAge(35);

【讨论】：

【解决方案5】：

如果你想要封装，你可以使用下面的语法（自执行函数）。这里年龄不能从对象 bob 的外部访问。

var bob = (function() {
    //...private
    var age = 30;

    function setAge(newAge) {
        age = newAge;
    };

    function getAge() {
            return age;
        }
    // Public api
    return {
        setAge: setAge,
        getAge: getAge
    }
}());
bob.setAge(50);
alert(bob.getAge());

jsfiddle：http://jsfiddle.net/61o9k98h/1/

【讨论】：

【解决方案6】：

从 ECMAScript 2015 开始，引入了用于对象初始值设定项上的方法定义的更短语法。它是分配给方法名称的函数的简写

const bob = {
    age: 30,
    setAge(age) {
        this.age = age;
    },
};
alert(bob.age); // 30
bob.setAge(63); // set age = 63
alert(bob.age); // 63

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions

【讨论】：

【解决方案7】：

像这样：

var bob = {
    age: 30,
    setAge: function (age) {
        this.age = age;
    }
}
alert(bob.age); // 30
bob.setAge(45); // set age = 45
alert(bob.age); // 45

【讨论】：