使用Javascript创建对象 - 多种方法,任何差异?(Javascript creating

2019-08-31 13:50发布

我看到了几个不同的方式来实例化的JavaScript对象,想知道的好处各种方法/缺点,为什么要使用一个比其他。

方法1

var obj = {
    prop: value,
    .
    .
    .
}

方法之一是标准的做法,没有什么新的:)

方法2

var obj = new function() {
    var prop1 = value1;
    var fn1 = function() {
    };
    .
    .
    .

    this.prop2 = value2;
    .
    .
    .
}();

该功能的方法,我想比较的方法3.函数方法这种方法主要用于封装(正确吗?)

方法3

var obj = (function() {
    var prop1 = value1;
    var fn1 = function() {
    };
    .
    .
    .

    return {
        prop2: value2,
        .
        .
        .
    }
})();

通过这种方法,我不太看其使用的理由。 它是如何从方法2有什么区别? 两者都可以用于封装逻辑。

难道这样我们就可以在参数传递,所以我们可以应对任何潜在的冲突? 例如jQuery的$语法-但你也可以用方法2做...

谢谢。


编辑:


我知道的方法1和3是相似的(因为它们都返回对象),但接近3还创建了一个闭合。 哪种方法2也做。

这是我的问题的基础上真正的,无论是2和3封创建的,但它们之间有什么区别。

Answer 1:

在接近#2和#3中的constructor所产生的对象的属性将是不同的。

在实践中这意味着第二个方法可以让您用匿名构造函数来实例化多个对象:

x = new function() { alert(1) };
y = new x.constructor; // shows the message too

顶端回答到模块模式与一个匿名构造的实例包括来自道格拉斯Crockford的报价中,他解释了为什么他认为这种方法#3比2#更好。



Answer 2:

7种方法在JavaScript中创建对象:

1.对象的构造

创建对象的最简单方法是使用Object构造函数:鉴于plainprint?

var person = new Object();  
person.name = "Diego";  
person.getName = function(){  
    return this.name;  
}; 

2.文字符号

鉴于plainprint?

var person = {  
    person.name : "Diego",  
    person.getName : function(){  
        return this.name;  
    }  
} 

3.工厂功能

工厂功能允许封装和重新使用逻辑来创建类似的对象。 它利用任何先前构建了这一点。 或者:鉴于plainprint?

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

要么:

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

4.功能构造

在Javascript中,可以调用任何功能,在它前面的新的运营商。 给定一个函数F,新的F():一个新的空对象X创建。 X被设置为背景的F含义整个F该指向X,X返回为F视图plainprint的结果呢?

function Person(name){  
        this.name = name;  
        this.getName = function(){  
            return this.name;  
        };  
};  
var personOne = new Person("Diego");  
console.log(personOne.getName()); // prints Diego  
console.log(personOne instanceOf Person); // prints true  
console.log(personOne.constructor === Person); // prints true  
console.log(personOne instanceOf Object); // prints true  

5.原型

函数是在Javascript中非常特殊的。 它们是对象,他们可以创建其他对象,他们自动获得一个域名为原型。 原型是具有单个字段,称为构造一个普通的对象,指向函数本身。 是什么使得它特别的是,通过函数创建的每个对象继承了函数的原型。 鉴于plainprint?

function Person(){};  
Person.prototype.name = "Diego";  
var personOne = new Person();  
var personTwo = new Person();  
console.log(personOne.constructor == Person); // prints true  
console.log(personOne.name); // prints Diego  
console.log(personTwo.constructor == Person); // prints true  
console.log(personTwo.name); // prints Diego  

6.功能/原型组合

函数/原型组合,你会想象,利用这两种方法:)鉴于plainprint的?

function Person(name){  
        this.name = name;  
};  
Person.prototype.getName = function(){  
            return this.name;  
        };  
var personOne = new Person("Diego");  
var personTwo = new Person("Filippo");  
console.log(personOne.getName()); // prints Diego  
console.log(personTwo.getName()); // prints Filippo  
console.log(personOne.getName === personTwo.getName) //prints true 

7.辛格尔顿

有时,您可能希望确保只有特定类的单个实例存在。 为了得到一个Singleton的Javascript是定义并同时调用构造函数简单:鉴于plainprint?

var singleton = new function(){  
    this.name = "ApplicationName";  
};  


Answer 3:

第一和第三种方法是几乎相同的,在某种程度上它们都创建对象的文本,这是一个直接子Object类。 它们之间的区别是,在第三个方法,你可能有某种性质的封装方式:

var obj = (function() {
    var prop = {};

    return {
        prop2: function(){ return prop };
    }
})();

性能方面,你可能会认为第三种方法创建关闭,而第一个不!

然而,在第二个方法,你只是创建一个匿名类,这是不是一个直接子的新对象Object类。

第二种方法的正确形式是这样的(至少这是ECMA标准):

var obj = new function() {
    var prop1 = value1;

    this.prop2 = value2;
}();

方法2和3之间的差别仅仅是其继承链:(假设OBJ2是从第二方法和OBJ3是从第三方法)

obj2.__proto__ == Object.prototype;  // false
obj3.__proto__ == Object.prototype;  // true

obj2的是从一个匿名类本身产生的:

obj2.__proto__.__proto__ == Object.prototype;  // true (there's 2 level of inheritance here)


Answer 4:

方法1
这是一个对象,没有阶级,如果它是复杂的,你无法定义更容易

var obj = {
   prop: value
}

方法2
非匿名函数。 这将创建一个对象了“类”的,normalle功能被保存为一个类名称,并且可以象下面容易地创建相同类型的多个对象:

var Bycicle= function() {
    var prop1 = value1;

    this.prop2 = value2;
}
var obj1 = new Bycicle(),
    obj2 = new Bycicle();

方法3
一位不愿透露姓名的功能,从功能以外的变量不能与函数内部变量的干扰:

var a = 10;
var obj = (function() {
    alert(a); // Alerts undefined
    var prop1 = value1;
    alert(prop1); // alerts the value of value1
    return {
        prop2: value2;
    }
})(); // Within the () you can pass arguments to the anonymous function.

更多关于匿名函数: http://helephant.com/2008/08/23/javascript-anonymous-functions/

其他方法
还存在一个Object.create()和一个new Object()来创建新的对象,这两者是一样的方法1。

结论
最终,该对象将永远是除了3TH一个是相同的,因为它是匿名的。



Answer 5:

还有:

var obj = Object.create({prop: ...});

这是通过设置一个原型。 它更有效地使用原型,如果你将有多个对象共享的属性或方法。

var proto = {foo: function() {}},
    obj1 = Object.create(proto),
    obj2 = Object.create(proto),
    obj3 = {foo: function() {}},
    obj4 = {foo: function() {}};

在这个例子中,OBJ1和OBJ2共享一个“foo”的功能,在“原”定义。 同时,OBJ 3和OBJ4各自有自己的“富”。 如果您正在创建大量有很多属性的对象,这样可以使内存消耗,甚至性能有很大的区别。

使用新前:(f.prototype.prop前)这样做的好处是通过使用“新”的关键字,如果你使用一个命名函数和分配属性函数的原型共享。



Answer 6:

我一直在周围JS了一下,张贴一些答案的想法,我希望它可以帮助别人太:

1) 对象常量 :你的文学写出来的对象创建的同时

var person = {
  name: ['Bob', 'Smith'],
  age: 32,
  gender: 'male',
  interests: ['music', 'skiing'],
  bio: function() {
    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
  },
  greeting: function() {
    alert('Hi! I\'m ' + this.name[0] + '.');
  }
};

使用方法:当你想将数据传输到服务器

2) 构造函数:当你想创建同一falvour的多个对象可以使用构造函数。

function Vehicle(name, maker) {
  this.name = name;// Every function while executing has a reference         
            this.maker = maker;// to its current execution context called as this
}
let car1 = new Vehicle(’Fiesta’, 'Ford’);// New keyword with function turns function call into constructor call
let car2 = new Vehicle(’Santa Fe’, 'Hyundai’);

console.log(car1.name);    //Output: Fiesta
console.log(car2.name);    //Output: Santa Fe

3) 创建与创建方法Javascript对象

的Object.create()允许创建与像价值,可配置,可枚举和可写的详细属性选择对象。 创建扩展原型对象的新对象作为paramtere传递

let car = Object.create(Object.prototype,{
   name:{
     value: 'Fiesta',
     configurable: true,
     writable: true,
     enumerable: false
   },
   maker:{
     value: 'Ford',
     configurable: true,
     writable: true,
     enumerable: true
   }});
console.log(car.name)    //Output: Fiesta

原型:每一个对象是通过构造函数建立。 构造函数使与它自己的原型样机的对象是构造函数和对象之间的任意路段。

4) 使用JavaScript创建ES6类

class Vehicle {
 constructor(name, maker, engine) {
   this.name = name;
   this.maker =  maker;
   this.engine = engine;
 }
}

let bike1 = new Vehicle('Hayabusa', 'Suzuki', '1340cc');
let bike2 = new Vehicle('Ninja', 'Kawasaki', '998cc');

console.log(bike1.name);    //Output: Hayabusa
console.log(bike2.maker);   //Output: Kawasaki

5) 利用对象的构造

var d = new Object();

最好的方法来创建空的对象。

注:我已编制采取了大部分的内容从这个链接https://codeburst.io/various-ways-to-create-javascript-object-9563c6887a47



Answer 7:

为了理解方法2,读者需要了解新的关键字的工作方式颇有些技术方面的东西。 具体来说,它将实际调用匿名函数的构造,而不是实例化一个新的函数对象和obj变量倾倒。

为了理解的方式3,读者只需要了解IIFE模式。 这种模式已经在JavaScript代码在过去的两年里变得非常普遍,这可能是为什么该版本是比较常用的。

两个版本都用来生产封装,两个版本都需要一个复杂的语言特性的知识来理解。 但是在方法上三个必需的语言功能更常见比理解方法有两个要求的语言特性闻名。 这就是为什么方法三是在野外更常用。



Answer 8:

你的问题应该是2点的途径,因为方法3酷似方法1只,创造一个有自我执行功能的方法。

关于差异,当你做出像方法1的对象,你可以考虑一下喜欢的对象,只有像Java中的静态函数。 所以它总是活着,你不使实例出来的(类似singleton)的 - 所以,当你做这个对象:

var obj = {
    prop: value,
    func: function(){
     alert(this.prop);
    }
};

您可以立即调用它:

obj.prop = 'something else';
obj.func();

方法2(不含新像你已经拿到了评论)是一个经典的对象,你可以创建实例-让继承(与JS的“招数”)等:

function Person(firstName,lastName){ // or var Person = function(...
   this.firstName = firstName;
   this.lastName= lastName;

   this.getFullName = function(){
      return this.firstName + ' ' + this.lastName;
   }
}

//use
var person1 = new Person('yair','lapid');
var person2 = new Person('Naftali','Bennet');

you can put it in an array etc...
var arr = [person1,person2, new Person('shelly','yekimovits')];


Answer 9:

没有一个整体很大的差异之间,用于一次性物品接近2和3。 (如果你的名字在方法2中使用的功能,你会定义一个可重用的构造函数)。我的印象是,方法3是比较常用的针对这些情况,但我没有看到一大堆它们之间的差异。

应当指出的是,这两种方法2和3可以使用参数:

var approach2Obj = new function(formalArg) {
    var privateProp = ...;
    this.publicProp = ...;
    // more constructor logic
)(actualArg);

var approach3Obj = (function(formalArg) {
    var privateProp = ...;
    // more creation logic
    return {
        publicProp : ...;
    };
}(actualArg));

PS作为@Alexey列别杰夫在他的回答指出 ,这两个(也许是唯一的一个)之间的一个区别是, approach2Obj.constructorapproach3Obj.constructor会有所不同。 approach3Obj.constructor将相同的Object ,而approach2Obj.constructor将是匿名函数。



文章来源: Javascript creating objects - multiple approaches, any differences?