哪种方式最适合在 JavaScript 中创建对象?在对象属性之前是否需要 `var`?

IT技术 javascript object
2021-01-19 13:20:25

到目前为止,我看到了在 JavaScript 中创建对象的三种方法。哪种方式最适合创建对象,为什么?

我还看到,在所有这些例子中,关键字var都没有在属性之前使用——为什么?是否不需要var在属性名称之前声明,因为它提到属性是变量?

在第二种和第三种方式中,对象的名称是大写的,而在第一种方式中,对象的名称是小写的。我们应该为对象名称使用什么大小写?

第一种方式:

function person(fname, lname, age, eyecolor){
  this.firstname = fname;
  this.lastname = lname;
  this.age = age;
  this.eyecolor = eyecolor;
}

myFather = new person("John", "Doe", 50, "blue");
document.write(myFather.firstname + " is " + myFather.age + " years old.");

第二种方式:

var Robot = {
  metal: "Titanium",
  killAllHumans: function(){
    alert("Exterminate!");
  }
};

Robot.killAllHumans();

第三种方式——使用数组语法的 JavaScript 对象:

var NewObject = {};

NewObject['property1'] = value;
NewObject['property2'] = value;
NewObject['method'] = function(){ /* function code here */ }
6个回答

没有最好的方法,这取决于您的用例。

  • 如果要创建多个相似的对象,请使用方式 1在您的示例中,Person(您应该以大写字母开头名称)称为构造函数这类似于其他 OO 语言中的
  • 如果您只需要一种对象(如单例),请使用方式 2如果您希望这个对象从另一个对象继承,那么您必须使用构造函数。
  • 如果要根据对象的其他属性初始化对象的属性,或者如果您有动态属性名称,请使用方式 3

更新:作为第三种方式的请求示例。

依赖属性:

下列情况不上班this没有参考book无法使用对象字面量中的其他属性的值来初始化属性:

var book = {
    price: somePrice * discount,
    pages: 500,
    pricePerPage: this.price / this.pages
};

相反,你可以这样做:

var book = {
    price: somePrice * discount,
    pages: 500
};
book.pricePerPage = book.price / book.pages;
// or book['pricePerPage'] = book.price / book.pages;

动态属性名称:

如果属性名称存储在某个变量中或通过某个表达式创建,则必须使用括号表示法:

var name = 'propertyName';

// the property will be `name`, not `propertyName`
var obj = {
    name: 42
}; 

// same here
obj.name = 42;

// this works, it will set `propertyName`
obj[name] = 42;
谢谢你的回答……现在我明白你的第一点,如果我们想要这样的东西,我们可以使用 way1 myFather=new person("John","Doe",50,"blue"); myMother=new person("gazy","Doe",45,"brown"); myBrother=new person("poll","Doe",15,"blue");
2021-03-16 13:20:25
我想你的意思是 obj[name] = 42。对吧?
2021-03-18 13:20:25
对于第二种情况,如果我们使用扩展运算符...从另一个对象继承是否有意义
2021-03-27 13:20:25
我想指出选项 2 和选项 3 几乎相同,只是您在创建对象后分配属性。这就是所谓的文字符号,因为您正在使用对象文字来创建您的对象。在幕后,这实际上称为“new Object()”。您可以在此处阅读更多相关信息:developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/...
2021-04-11 13:20:25

有多种定义函数的方法。它完全基于您的要求。以下是几种款式:-

  1. 对象构造函数
  2. 字面构造函数
  3. 基于功能
  4. 基于原型
  5. 基于功能和原型
  6. 基于单例

例子:

  1. 对象构造器
var person = new Object();

person.name = "Anand",
person.getName = function(){
  return this.name ; 
};
  1. 字面构造函数
var person = { 
  name : "Anand",
  getName : function (){
   return this.name
  } 
} 
  1. 函数构造器
function Person(name){
  this.name = name
  this.getName = function(){
    return this.name
  } 
} 
  1. 原型
function Person(){};

Person.prototype.name = "Anand";
  1. 功能/原型组合
function Person(name){
  this.name = name;
} 
Person.prototype.getName = function(){
  return this.name
} 
  1. 单身人士
var person = new function(){
  this.name = "Anand"
} 

如果您有任何困惑,可以在控制台上尝试。

构建每个示例var person最终产生完全相同的实例不是更有意义吗?例如在函数构造函数中,您可以简单地添加var person = new Person("Anand"). 看似随意的分号用法是怎么回事?:P
2021-03-19 13:20:25
嘿@Alex_Nabu - 我已经在我的帖子中分享了这些例子。如果您仍然面临任何挑战,请更新我,我会帮助您。
2021-04-04 13:20:25
它会增加解释每种方式的利弊的value。
2021-04-07 13:20:25

没有创建对象的“最佳方法”。每种方式都有好处,具体取决于您的用例。

构造器模式(一个与new操作符配对来调用它的函数)提供了使用原型继承的可能性,而其他方式则没有。所以如果你想要原型继承,那么构造函数是一个很好的方法。

但是,如果你想要原型继承,你也可以使用Object.create,这使得继承更加明显。

var obj = {foo: "bar"};如果您碰巧拥有希望在创建时设置的所有属性,则创建对象字面量(例如:)效果很好。

对于稍后设置属性,如果您知道属性名称,则NewObject.property1语法通常更可取NewObject['property1']但是当您实际上没有提前知道属性的名称时,后者很有用(例如:)NewObject[someStringVar]

希望这可以帮助!

我想这取决于你想要什么。对于简单的对象,我想您可以使用第二种方法。当您的对象变大并且您计划使用类似的对象时,我想第一种方法会更好。这样你也可以使用原型扩展它。

例子:

function Circle(radius) {
    this.radius = radius;
}
Circle.prototype.getCircumference = function() {
    return Math.PI * 2 * this.radius;
};
Circle.prototype.getArea = function() {
    return Math.PI * this.radius * this.radius;
}

我不是第三种方法的忠实粉丝,但它对于动态编辑属性非常有用,例如var foo='bar'; var bar = someObject[foo];.

有很多方法可以在 JavaScript 中创建对象。使用构造函数来创建对象或对象文字符号在 JavaScript 中使用很多。同样创建一个 Object 的实例,然后向它添加属性和方法,在 JavaScript 中有三种常用的方法来创建对象。

构造函数

有内置的构造函数,我们可能会不时使用它们,例如Date()、Number()、Boolean()等,所有构造函数都以大写字母开头,同时我们可以在JavaScript中创建自定义构造函数像这样:

function Box (Width, Height, fill) {  
  this.width = Width;  // The width of the box 
  this.height = Height;  // The height of the box 
  this.fill = true;  // Is it filled or not?
}  

您可以调用它,只需使用 new() 来创建构造函数的新实例,创建如下所示的内容并使用填充参数调用构造函数:

var newBox = new Box(8, 12, true);  

对象字面量

使用对象字面量是在 JavaScript 中创建对象的一个​​非常有用的案例,这是创建一个简单对象的示例,您可以将任何内容分配给您的对象属性,只要它们被定义:

var person = { 
    name: "Alireza",
    surname: "Dezfoolian"
    nose: 1,  
    feet: 2,  
    hands: 2,
    cash: null
};  

原型制作

创建对象后,您可以为其创建更多成员的原型,例如为我们的 Box 添加颜色,我们可以这样做:

Box.prototype.colour = 'red';