อะไรคือความแตกต่างระหว่าง `วัตถุใหม่ () 'กับสัญกรณ์ตามตัวอักษร?

อะไรคือความแตกต่างระหว่างไวยากรณ์ที่สร้างขึ้นนี้สำหรับการสร้างวัตถุ:

person = new Object()

... และไวยากรณ์ตามตัวอักษรนี้:

person = {
    property1 : "Hello"
};

ปรากฏว่าทั้งคู่ทำสิ่งเดียวกันแม้ว่า JSLint จะชอบให้คุณใช้สัญกรณ์ตามตัวอักษร

อันไหนดีกว่าและทำไม?

พวกเขาทั้งสองทำสิ่งเดียวกัน (ยกเว้นบางคนทำสิ่งที่ผิดปกติ) นอกเหนือจากที่สองของคุณสร้างวัตถุและเพิ่มคุณสมบัติให้กับมัน แต่สัญกรณ์ที่แท้จริงนั้นใช้พื้นที่น้อยในซอร์สโค้ด มันเป็นที่รู้จักอย่างชัดเจนว่าเกิดอะไรขึ้นดังนั้นเมื่อใช้new Object()คุณพิมพ์ได้มากขึ้นและในทางทฤษฎีหากไม่ได้รับการปรับแต่งโดยเอนจิ้น JavaScript ให้ทำการเรียกฟังก์ชั่นที่ไม่จำเป็น

เหล่านี้

person = new Object() /*You should put a semicolon here too.  
It's not required, but it is good practice.*/ 
-or-

person = {
    property1 : "Hello"
};

ในทางเทคนิคไม่ได้ทำสิ่งเดียวกัน ครั้งแรกที่เพิ่งสร้างวัตถุ ที่สองสร้างหนึ่งและกำหนดคุณสมบัติ เพื่อให้คนแรกเหมือนกันคุณต้องมีขั้นตอนที่สองเพื่อสร้างและกำหนดคุณสมบัติ

"บางสิ่งบางอย่างที่ผิดปกติ" ที่ใครบางคนสามารถทำได้คือการทำเงาหรือกำหนดให้กับค่าเริ่มต้นของObjectโลก:

// Don't do this
Object = 23;

ในกรณีที่ผิดปกติอย่างมากnew Objectจะล้มเหลว แต่{}จะทำงาน

ในทางปฏิบัติไม่มีเหตุผลที่จะใช้new Objectมากกว่า{}(เว้นแต่คุณจะทำสิ่งที่ผิดปกติมาก)

ไม่มีความแตกต่างสำหรับวัตถุอย่างง่ายโดยไม่มีวิธีการในตัวอย่างของคุณ อย่างไรก็ตามมีความแตกต่างใหญ่เมื่อคุณเริ่มเพิ่มวิธีการในวัตถุของคุณ

ทางอักษร:

function Obj( prop ) { 
    return { 
        p : prop, 
        sayHello : function(){ alert(this.p); }, 
    }; 
} 

วิธีต้นแบบ:

function Obj( prop ) { 
    this.p = prop; 
} 
Obj.prototype.sayHello = function(){alert(this.p);}; 

ทั้งสองวิธีอนุญาตให้สร้างอินสแตนซ์Objเช่นนี้:

var foo = new Obj( "hello" ); 

อย่างไรก็ตามด้วยวิธีการตามตัวอักษรคุณจะต้องนำสำเนาของsayHelloวิธีการภายในแต่ละวัตถุของคุณ ในขณะที่ด้วยวิธีต้นแบบวิธีการที่กำหนดไว้ในต้นแบบวัตถุและใช้ร่วมกันระหว่างวัตถุทุกอินสแตนซ์ หากคุณมีวัตถุจำนวนมากหรือมีวิธีการมากมายวิธีการตามตัวอักษรอาจทำให้เสียความทรงจำที่ค่อนข้างใหญ่

ใน JavaScript เราสามารถประกาศวัตถุว่างใหม่ได้สองวิธี:

var obj1 = new Object();  
var obj2 = {};  

ฉันไม่พบอะไรเลยที่จะชี้ให้เห็นว่ามีความแตกต่างอย่างมีนัยสำคัญเกี่ยวกับวิธีการทำงานของเบื้องหลัง (โปรดแก้ไขให้ฉันถ้าฉันผิด - ฉันชอบที่จะรู้) อย่างไรก็ตามวิธีที่สอง (ใช้สัญกรณ์ตัวอักษร) มีข้อได้เปรียบเล็กน้อย

1. มันสั้นกว่า (10 ตัวอักษรเพื่อความแม่นยำ)
2. มันง่ายขึ้นและมีโครงสร้างมากขึ้นในการสร้างวัตถุได้ทันที
3. มันไม่สำคัญว่าบัฟฟี่บางตัวจะมีออบเจกต์แทนที่โดยไม่ตั้งใจ

พิจารณาวัตถุใหม่ที่มีชื่อสมาชิกและ TelNo โดยใช้การประชุม Object () ใหม่เราสามารถสร้างมันได้เช่นนี้:

var obj1 = new Object();  
obj1.Name = "A Person";  
obj1.TelNo = "12345"; 

Expando คุณสมบัติคุณสมบัติของ JavaScript ช่วยให้เราสร้างสมาชิกใหม่ด้วยวิธีนี้ในการบินและเราบรรลุสิ่งที่ตั้งใจ อย่างไรก็ตามวิธีนี้ไม่ได้มีโครงสร้างหรือห่อหุ้มมากนัก จะเป็นอย่างไรถ้าเราต้องการระบุสมาชิกเมื่อมีการสร้างโดยไม่ต้องพึ่งพาคุณสมบัติของ expando และการสร้างโพสต์ที่ได้รับมอบหมาย

นี่คือที่สัญกรณ์ตัวอักษรของวัตถุสามารถช่วย:

var obj1 = {Name:"A Person",TelNo="12345"};  

ที่นี่เราได้รับเอฟเฟกต์เดียวกันในโค้ดหนึ่งบรรทัดและมีอักขระน้อยลงอย่างมาก

การอภิปรายเพิ่มเติมเกี่ยวกับวิธีการสร้างวัตถุด้านบนสามารถดูได้ที่: JavaScript และ Object Oriented Programming (OOP)

และในที่สุดสิ่งที่งี่เง่าที่เอาชนะวัตถุ? คุณคิดว่ามันเป็นไปไม่ได้เหรอ? ดีJSFiddle นี้พิสูจน์เป็นอย่างอื่น การใช้สัญกรณ์สัญลักษณวัตถุทำให้เราไม่สามารถทำสิ่งสกปรกได้ง่าย

(จากhttp://www.jameswiseman.com/blog/2011/01/19/jslint-messages-use-the-object-literal-notation/ )

บนเครื่องของฉันโดยใช้ Node.js ฉันรันสิ่งต่อไปนี้:

console.log('Testing Array:');
console.time('using[]');
for(var i=0; i<200000000; i++){var arr = []};
console.timeEnd('using[]');

console.time('using new');
for(var i=0; i<200000000; i++){var arr = new Array};
console.timeEnd('using new');

console.log('Testing Object:');

console.time('using{}');
for(var i=0; i<200000000; i++){var obj = {}};
console.timeEnd('using{}');

console.time('using new');
for(var i=0; i<200000000; i++){var obj = new Object};
console.timeEnd('using new');

หมายเหตุนี่เป็นส่วนขยายของสิ่งที่พบที่นี่: ทำไม arr = [] เร็วกว่า arr = new Array

ผลลัพธ์ของฉันคือต่อไปนี้:

Testing Array:
using[]: 1091ms
using new: 2286ms
Testing Object:
using{}: 870ms
using new: 5637ms

ชัดเจน {} และ [] นั้นเร็วกว่าการใช้สิ่งใหม่ในการสร้างวัตถุ / อาร์เรย์ที่ว่างเปล่า

ทุกคนที่นี่กำลังพูดถึงความคล้ายคลึงกันของทั้งสอง ฉันจะชี้ให้เห็นความแตกต่าง

1. การใช้new Object()ช่วยให้คุณผ่านวัตถุอื่น ผลลัพธ์ที่ชัดเจนคือวัตถุที่สร้างขึ้นใหม่จะถูกตั้งค่าเป็นการอ้างอิงเดียวกัน นี่คือตัวอย่างรหัส:

   var obj1 = new Object();
   obj1.a = 1;
   var obj2 = new Object(obj1);
   obj2.a // 1

2. การใช้งานไม่ จำกัด เฉพาะวัตถุเช่นเดียวกับในวัตถุ OOP ประเภทอื่นสามารถส่งผ่านไปได้เช่นกัน ฟังก์ชั่นจะตั้งค่าประเภทตาม ตัวอย่างเช่นถ้าเราส่งจำนวนเต็ม 1 ไปยังวัตถุชนิดของหมายเลขจะถูกสร้างขึ้นสำหรับเรา

   var obj = new Object(1);
   typeof obj // "number"

3. วัตถุที่สร้างขึ้นโดยใช้วิธีการด้านบน ( new Object(1)) จะถูกแปลงเป็นประเภทวัตถุหากมีการเพิ่มคุณสมบัติเข้าไป

   var obj = new Object(1);
   typeof obj // "number"
   obj.a = 2;
   typeof obj // "object"

4. หากวัตถุนั้นเป็นสำเนาของคลาสลูกของวัตถุเราสามารถเพิ่มคุณสมบัติโดยไม่ต้องแปลงประเภท

   var obj = new Object("foo");
   typeof obj // "object"
   obj === "foo" // true
   obj.a = 1;
   obj === "foo" // true
   obj.a // 1
   var str = "foo";
   str.a = 1;
   str.a // undefined

จริงๆแล้วมีหลายวิธีในการสร้างวัตถุใน JavaScript เมื่อคุณต้องการสร้างวัตถุไม่มีประโยชน์ในการสร้างวัตถุที่ใช้ "คอนสตรัคเตอร์ " โดยใช้ตัวดำเนินการ " ใหม่ " มันเหมือนกับการสร้างวัตถุโดยใช้ไวยากรณ์" object literal " แต่วัตถุ "ที่ยึดตามคอนสตรัคเตอร์ " ที่สร้างขึ้นด้วยตัวดำเนินการ " ใหม่ " มาถึงการใช้งานอย่างไม่น่าเชื่อเมื่อคุณกำลังคิดเกี่ยวกับ "การสืบทอดต้นแบบ " คุณไม่สามารถรักษาห่วงโซ่การสืบทอดด้วยวัตถุที่สร้างขึ้นด้วยไวยากรณ์ที่แท้จริง แต่คุณสามารถสร้างฟังก์ชั่นคอนสตรัค , แนบคุณสมบัติและวิธีการกับต้นแบบของมัน"โอเปอเรเตอร์มันจะคืนค่าออบเจกต์ซึ่งจะสามารถเข้าถึงเมธอดและคุณสมบัติทั้งหมดที่แนบมากับต้นแบบของฟังก์ชันคอนสตรัคเตอร์นั้น

นี่คือตัวอย่างของการสร้างวัตถุโดยใช้ฟังก์ชั่นตัวสร้าง (ดูคำอธิบายรหัสที่ด้านล่าง):

function Person(firstname, lastname) {
    this.firstname = firstname;
    this.lastname = lastname;
}

Person.prototype.fullname = function() {
    console.log(this.firstname + ' ' + this.lastname);
}

var zubaer = new Person('Zubaer', 'Ahammed');
var john = new Person('John', 'Doe');

zubaer.fullname();
john.fullname();

ตอนนี้คุณสามารถสร้างวัตถุได้มากเท่าที่คุณต้องการโดยการสร้างฟังก์ชั่นการสร้างคนทันทีและวัตถุทั้งหมดจะสืบทอดชื่อเต็ม () จากมัน

หมายเหตุ: " นี้ " คำหลักจะอ้างถึงวัตถุที่ว่างเปล่าภายในฟังก์ชั่นคอนสตรัคและเมื่อใดก็ตามที่คุณสร้างวัตถุใหม่จากคนใช้ " ใหม่ " ผู้ประกอบการก็จะกลับวัตถุที่มีทั้งหมดของคุณสมบัติและวิธีการที่แนบมากับ " นี้ " คำหลัก . และวัตถุเหล่านี้จะได้รับสืบทอดวิธีการและคุณสมบัติที่แนบมากับต้นแบบของฟังก์ชันตัวสร้างบุคคล (ซึ่งเป็นข้อได้เปรียบหลักของวิธีนี้)

โดยวิธีการถ้าคุณต้องการได้รับฟังก์ชั่นเดียวกันกับไวยากรณ์" วัตถุตัวอักษร " คุณจะต้องสร้างชื่อเต็ม () ในทุกวัตถุดังต่อไปนี้:

var zubaer = {
    firstname: 'Zubaer',
    lastname: 'Ahammed',
    fullname: function() {
        console.log(this.firstname + ' ' + this.lastname);
    }
};

var john= {
    firstname: 'John',
    lastname: 'Doe',
    fullname: function() {
        console.log(this.firstname + ' ' + this.lastname);
    }
};

zubaer.fullname();
john.fullname();

ในที่สุดถ้าคุณถามว่าทำไมฉันควรใช้วิธีการสร้างฟังก์ชั่นของตัวแทนที่จะเป็นวิธีการตามตัวอักษรวัตถุ :

*** การถ่ายทอดทาง Prototypal ทำให้การสืบทอดสายโซ่เป็นเรื่องง่ายซึ่งมีประโยชน์และมีประสิทธิภาพอย่างมาก

*** มันช่วยประหยัดหน่วยความจำโดยการสืบทอดวิธีการทั่วไปและคุณสมบัติที่กำหนดไว้ในฟังก์ชั่นต้นแบบการสร้าง มิฉะนั้นคุณจะต้องคัดลอกมันซ้ำแล้วซ้ำอีกในวัตถุทั้งหมด

ฉันหวังว่านี่จะสมเหตุสมผล

นอกจากนี้ตามหนังสือจาวาสคริปต์บางเล่มของ O'Really .... (อ้างถึง)

อีกเหตุผลสำหรับการใช้ตัวอักษรที่ตรงข้ามกับตัวสร้างวัตถุก็คือว่าไม่มีการแก้ไขขอบเขต เนื่องจากเป็นไปได้ว่าคุณได้สร้าง Constructor ท้องถิ่นที่มีชื่อเดียวกันล่ามจึงต้องค้นหาเชนขอบเขตจากที่ที่คุณเรียก Object () จนสุดจนกว่าจะพบ Construct Object ทั่วโลก

ฉันพบความแตกต่างหนึ่งอย่างสำหรับ ES6 / ES2015 new Object()คุณไม่สามารถกลับวัตถุโดยใช้ไวยากรณ์ฟังก์ชั่นจดชวเลขลูกศรเว้นแต่คุณจะล้อมรอบวัตถุที่มี

> [1, 2, 3].map(v => {n: v});
[ undefined, undefined, undefined ]
> [1, 2, 3].map(v => new Object({n: v}));
[ { n: 1 }, { n: 2 }, { n: 3 } ]

นี่เป็นเพราะคอมไพเลอร์สับสนโดย{}วงเล็บและคิดว่าn: iเป็นฉลาก:สร้างคำสั่ง ; อัฒภาคเป็นตัวเลือกดังนั้นจึงไม่บ่นเกี่ยวกับมัน

หากคุณเพิ่มคุณสมบัติอื่นไปยังวัตถุในที่สุดก็จะโยนข้อผิดพลาด

$ node -e "[1, 2, 3].map(v => {n: v, m: v+1});"
[1, 2, 3].map(v => {n: v, m: v+1});
                           ^

SyntaxError: Unexpected token :

อัพเดต 2019

ฉันรันรหัสเดียวกันกับ @rjloura บน OSX High Sierra 10.13.6 โหนดรุ่น 10.13.0 และผลลัพธ์เหล่านี้คือผลลัพธ์

console.log('Testing Array:');
console.time('using[]');
for(var i=0; i<200000000; i++){var arr = []};
console.timeEnd('using[]');

console.time('using new');
for(var i=0; i<200000000; i++){var arr = new Array};
console.timeEnd('using new');

console.log('Testing Object:');

console.time('using{}');
for(var i=0; i<200000000; i++){var obj = {}};
console.timeEnd('using{}');

console.time('using new');
for(var i=0; i<200000000; i++){var obj = new Object};
console.timeEnd('using new');


Testing Array:
using[]: 117.613ms
using new: 117.168ms
Testing Object:
using{}: 117.205ms
using new: 118.644ms

การใช้หน่วยความจำจะแตกต่างกันถ้าคุณสร้าง 10,000 อินสแตนซ์ new Object()จะเก็บเพียงหนึ่งสำเนาเท่านั้นในขณะที่{}จะเก็บ 10,000 ชุด