如何“正确”在JavaScript中创建自定义对象？

Question

如何“正确”在JavaScript中创建自定义对象？

javascript

485

我想知道创建一个拥有属性和方法的JavaScript对象的最佳方式是什么。

我看过一些例子，其中的人使用了 var self = this，然后在所有函数中使用 self. 确保作用域始终正确。

接着，我又看到有人使用 .prototype 添加属性，而其他人则在代码中直接添加属性。

能否给我一个适当的JavaScript对象示例，其中包含一些属性和方法？

- Michael Stum

15

没有一种“最好”的方式。 - Kenan Banks

“self”不是保留字吗？如果不是，它应该是；因为“self”是一个预定义变量，指向当前窗口。“self === window”。 - Shaz

2

@Shaz：它并不比浏览器对象模型中的其他 window 属性如 document 或 frames 更具保留意义；你肯定可以将其作为变量名重新使用该标识符。尽管如此，从风格上讲，我更喜欢使用 var that= this 以避免任何可能的混淆。尽管 window.self 最终是毫无意义的，所以很少有理由去碰它。 - bobince

7

当JS代码被压缩时，将this赋值给一个本地变量（例如self）可以减小文件大小。 - Patrick Fisher

Classjs新链接：https://github.com/divio/classjs - Nikola

15个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- eQ19 · Answer 1

我想提醒大家，我们可以使用标题或字符串来声明一个对象。
对于每种类型的调用方式不同。请参见以下内容：

var test = {

  useTitle : "Here we use 'a Title' to declare an Object",
  'useString': "Here we use 'a String' to declare an Object",
  
  onTitle : function() {
    return this.useTitle;
  },
  
  onString : function(type) {
    return this[type];
  }
  
}

console.log(test.onTitle());
console.log(test.onString('useString'));

- Alex Nolasco · Answer 2

除了2009年的被接受答案之外，如果你可以针对现代浏览器，可以使用Object.defineProperty。

Object.defineProperty()方法直接在对象上定义一个新属性或修改对象上的现有属性，并返回该对象。来源：Mozilla

var Foo = (function () {
    function Foo() {
        this._bar = false;
    }
    Object.defineProperty(Foo.prototype, "bar", {
        get: function () {
            return this._bar;
        },
        set: function (theBar) {
            this._bar = theBar;
        },
        enumerable: true,
        configurable: true
    });
    Foo.prototype.toTest = function () {
        alert("my value is " + this.bar);
    };
    return Foo;
}());

// test instance
var test = new Foo();
test.bar = true;
test.toTest();

要查看桌面和移动设备的兼容性列表，请参见Mozilla浏览器兼容性列表。是的，IE9+也支持它，以及Safari移动版。

- adeola olanrewaju · Answer 3

var Person = function (lastname, age, job){
this.name = name;
this.age = age;
this.job = job;
this.changeName = function(name){
this.lastname = name;
}
}
var myWorker = new Person('Adeola', 23, 'Web Developer');
myWorker.changeName('Timmy');

console.log("New Worker" + myWorker.lastname);

- G Naga Subrahmanyam · Answer 4

你也可以尝试这个

    function Person(obj) {
    'use strict';
    if (typeof obj === "undefined") {
        this.name = "Bob";
        this.age = 32;
        this.company = "Facebook";
    } else {
        this.name = obj.name;
        this.age = obj.age;
        this.company = obj.company;
    }

}

Person.prototype.print = function () {
    'use strict';
    console.log("Name: " + this.name + " Age : " + this.age + " Company : " + this.company);
};

var p1 = new Person({name: "Alex", age: 23, company: "Google"});
p1.print();

- Airwind711 · Answer 5

基本上，JS 中没有类的概念，因此我们使用函数作为类构造器，与现有的设计模式相关。

//Constructor Pattern
function Person(name, age, job){
 this.name = name;
 this.age = age;
 this.job = job;
 this.doSomething = function(){
    alert('I am Happy');
}
}

到目前为止，JS不知道你想创建一个对象，所以这里就出现了新的关键字。

var person1 = new Person('Arv', 30, 'Software');
person1.name //Arv

参考资料：Web开发专业JavaScript - Nik Z