자바스크립트에서 객체를 만드는 데 가장 좋은 방법은 무엇입니까?객체 속성 앞에 var가 필요합니까?
지금까지 자바스크립트로 객체를 만드는 세 가지 방법을 보았습니다.어떤 방법이 객체를 만드는 데 가장 좋고 그 이유는 무엇입니까?
는 또한 이 예에서 가 다는 것을 .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 */ }
최선의 방법은 없습니다, 사용하는 경우에 따라 다릅니다.
- 비슷한 개체를 여러 개 생성하려면 방법 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;
함수를 정의하는 방법은 다양합니다.그것은 전적으로 당신의 요구에 따라 결정됩니다.다음은 몇 가지 스타일입니다:-
- 객체 생성자
- 리터럴 생성자
- 함수 기반
- 프로토타입 기반
- 기능 및 프로토타입 기반
- 싱글톤 베이스
예:
- 객체 생성자
var person = new Object();
person.name = "Anand",
person.getName = function(){
return this.name ;
};
- 리터럴 생성자
var person = {
name : "Anand",
getName : function (){
return this.name
}
}
- 함수 생성기
function Person(name){
this.name = name
this.getName = function(){
return this.name
}
}
- 프로토타입
function Person(){};
Person.prototype.name = "Anand";
- 함수/원형 조합
function Person(name){
this.name = name;
}
Person.prototype.getName = function(){
return this.name
}
- 싱글턴
var person = new function(){
this.name = "Anand"
}
혼란스러우시면 콘솔로 사용해보실 수 있습니다.
개체를 만드는 "최상의 방법"은 없습니다.각 방법은 사용 사례에 따라 이점이 있습니다.
( )와 쌍을 함수)new이를 호출하는 연산자)는 프로토타입 상속을 사용할 수 있는 가능성을 제공하는 반면, 다른 방법들은 그렇지 않습니다.프로토타입 상속을 원한다면, 컨스트럭터 기능을 사용하는 것이 좋습니다.
그러나 원형 상속을 원하는 경우에는 를 사용할 수도 있으므로 상속이 보다 명확합니다.
(: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];.
자바스크립트에서 객체를 만드는 방법은 여러 가지가 있습니다.객체나 객체 리터럴 표기를 만들기 위해 컨스트럭터 함수를 사용하는 것은 자바스크립트에서 많이 사용되고 있습니다.또한 Object 인스턴스를 만든 다음 속성과 메서드를 추가하는 일반적인 방법으로 자바스크립트에서 객체를 만드는 세 가지 방법이 있습니다.
생성자 함수
Date(), Number(), Boolean() 등과 같이 우리 모두가 때때로 사용할 수 있는 내장된 컨스트럭터 함수가 있습니다. 모든 컨스트럭터 함수는 대문자로 시작합니다. 그 동안 자바스크립트에서 사용자 정의 컨스트럭터 함수를 만들 수 있습니다.
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?
}
새 (),를 사용하여 생성자의 새 인스턴스를 만드는 것만으로 호출할 수 있습니다. 아래와 같은 것을 만들고 매개 변수가 채워진 생성자 함수를 호출합니다.
var newBox = new Box(8, 12, true);
객체 리터럴
객체 리터럴을 사용하면 자바스크립트에서 객체를 생성할 때 매우 많이 사용되며, 이는 단순한 객체를 생성하는 예로, 객체 속성이 정의되어 있는 한 어떤 것이든 할당할 수 있습니다.
var person = {
name: "Alireza",
surname: "Dezfoolian"
nose: 1,
feet: 2,
hands: 2,
cash: null
};
프로토타이핑
오브젝트를 작성한 후 더 많은 구성원을 프로토타입할 수 있습니다. 예를 들어 상자에 색상을 추가하는 등 다음과 같은 작업을 수행할 수 있습니다.
Box.prototype.colour = 'red';
이곳의 많은 사람들은 객체를 만드는 최선의 방법이 없다고 말하지만, 2019년 현재 자바스크립트에서 객체를 만드는 방법이 그렇게 많은 이유에 대한 근거가 있습니다. 이것은 1997년까지 거슬러 올라가는 EcmaScript 릴리스의 여러 반복에 대한 자바스크립트의 발전과 관련이 있습니다.
ECMAscript 5 이전에는 객체를 생성하는 방법은 compactor 함수 또는 리터럴 표기(새로운 Object())의 두 가지뿐이었습니다.생성자 함수 표기법을 사용하면 여러 인스턴스로 인스턴스화할 수 있는 개체를 만들 수 있으며(새 키워드를 사용하여) 문자 표기법은 단일 개체(예: 단일 개체)를 전달합니다.
// constructor function
function Person() {};
// literal notation
var Person = {};
사용하는 방법에 상관없이 자바스크립트 개체는 단순히 키 값 쌍의 속성입니다.
// Method 1: dot notation
obj.firstName = 'Bob';
// Method 2: bracket notation. With bracket notation, you can use invalid characters for a javascript identifier.
obj['lastName'] = 'Smith';
// Method 3: Object.defineProperty
Object.defineProperty(obj, 'firstName', {
value: 'Bob',
writable: true,
configurable: true,
enumerable: false
})
// Method 4: Object.defineProperties
Object.defineProperties(obj, {
firstName: {
value: 'Bob',
writable: true
},
lastName: {
value: 'Smith',
writable: false
}
});
자바스크립트의 초기 버전에서는 클래스 기반 상속을 모방할 수 있는 유일한 실제 방법은 생성자 함수를 사용하는 것이었습니다.constructor function은 'new' 키워드와 함께 호출되는 특수 함수입니다.관례적으로 함수 식별자는 대문자로 표시되며 알비엣은 필요하지 않습니다.생성자 내부에서는 생성자 함수가 암묵적으로 생성하는 객체에 속성을 추가하기 위해 'this' 키워드를 참조합니다.생성자 함수는 명시적으로 반환 키워드를 사용하고 다른 것을 반환하지 않는 한 채워지는 속성을 가진 새 개체를 암묵적으로 호출 함수로 반환합니다.
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.sayName = function(){
return "My name is " + this.firstName + " " + this.lastName;
}
}
var bob = new Person("Bob", "Smith");
bob instanceOf Person // true
sayName 메서드에 문제가 있습니다.일반적으로 Object-Oriented Class 기반 프로그래밍 언어에서는 클래스를 팩토리로 사용하여 개체를 만듭니다.각 개체에는 고유한 인스턴스 변수가 있지만 클래스 Blueprint에 정의된 메서드에 대한 포인터가 있습니다.안타깝게도 자바스크립트의 컨스트럭터 함수를 사용할 때 호출될 때마다 새로 생성된 객체에 sayName 속성을 정의하게 됩니다.따라서 각 개체에는 고유한 sayName 속성이 있습니다.이렇게 하면 메모리 리소스가 더 많이 소모됩니다.
메모리 리소스 증가와 더불어, 컨스트럭터 기능 내부의 메서드를 정의하면 상속 가능성이 사라집니다.다시, 메서드는 새로 생성된 개체에서 다른 개체가 아닌 속성으로 정의되므로 상속이 이렇게 작동할 수 없습니다.따라서 자바스크립트는 프로토타입 체인을 상속의 한 형태로 제공하여 자바스크립트를 프로토타입 언어로 만듭니다.
부모가 있고 부모가 자식의 많은 속성을 공유하는 경우 자식은 해당 속성을 상속해야 합니다.ES5 이전에는 다음과 같이 수행되었습니다.
function Parent(eyeColor, hairColor) {
this.eyeColor = eyeColor;
this.hairColor = hairColor;
}
Parent.prototype.getEyeColor = function() {
console.log('has ' + this.eyeColor);
}
Parent.prototype.getHairColor = function() {
console.log('has ' + this.hairColor);
}
function Child(firstName, lastName) {
Parent.call(this, arguments[2], arguments[3]);
this.firstName = firstName;
this.lastName = lastName;
}
Child.prototype = Parent.prototype;
var child = new Child('Bob', 'Smith', 'blue', 'blonde');
child.getEyeColor(); // has blue eyes
child.getHairColor(); // has blonde hair
위의 프로토타입 체인을 사용한 방법은 이상한 점이 있습니다.프로토타입은 라이브 링크이므로 프로토타입 체인에서 한 개체의 속성을 변경하면 다른 개체의 동일한 속성도 변경할 수 있습니다.분명히 자녀의 상속 방식을 바꾼다고 해서 부모의 방식이 바뀌어서는 안 됩니다.Object.create에서는 폴리필을 사용하여 이 문제를 해결했습니다.따라서 Object.create를 사용하면 프로토타입 체인의 부모 동일한 속성에 영향을 주지 않고 프로토타입 체인의 자식 속성을 안전하게 수정할 수 있습니다.
ECMAscript 5는 객체 생성을 위한 컨스트럭터 함수에서 전술한 버그를 해결하기 위해 Object.create를 도입하였습니다.Object.create() 메서드는 기존 개체를 새로 만든 개체의 프로토타입으로 사용하여 새 개체를 만듭니다.새 개체가 생성되므로 프로토타입 체인의 하위 속성을 수정하면 해당 체인의 해당 속성에 대한 상위 참조가 수정되는 문제가 더 이상 발생하지 않습니다.
var bobSmith = {
firstName: "Bob",
lastName: "Smith",
sayName: function(){
return "My name is " + this.firstName + " " + this.lastName;
}
}
var janeSmith = Object.create(bobSmith, {
firstName : { value: "Jane" }
})
console.log(bobSmith.sayName()); // My name is Bob Smith
console.log(janeSmith.sayName()); // My name is Jane Smith
janeSmith.__proto__ == bobSmith; // true
janeSmith instanceof bobSmith; // Uncaught TypeError: Right-hand side of 'instanceof' is not callable. Error occurs because bobSmith is not a constructor function.
ES6 이전에는 함수 생성자와 Object.create를 사용하는 일반적인 생성 패턴이 있었습니다.
const View = function(element){
this.element = element;
}
View.prototype = {
getElement: function(){
this.element
}
}
const SubView = function(element){
View.call(this, element);
}
SubView.prototype = Object.create(View.prototype);
이제 Object.create는 자바스크립트에서 객체 생성 및 상속을 위해 생성자 함수와 결합되어 널리 사용되었습니다.그러나 ES6는 자바스크립트의 기존 프로토타입 기반 상속에 대한 통사적 당(syntical sugar)인 클래스 개념을 도입했습니다.클래스 구문은 JavaScript에 개체 지향 상속 모델을 새로 도입하지 않습니다.따라서 자바스크립트는 프로토타입 언어로 남아있습니다.
ES6 클래스를 사용하면 상속이 훨씬 쉬워집니다.더 이상 부모 클래스의 프로토타입 함수를 수동으로 복사하고 자식 클래스의 생성자를 재설정할 필요가 없습니다.
// create parent class
class Person {
constructor (name) {
this.name = name;
}
}
// create child class and extend our parent class
class Boy extends Person {
constructor (name, color) {
// invoke our parent constructor function passing in any required parameters
super(name);
this.favoriteColor = color;
}
}
const boy = new Boy('bob', 'blue')
boy.favoriteColor; // blue
자바스크립트에서 객체 생성의 이 5가지 전략은 EcmaScript 표준의 진화와 일치했습니다.
물론 최선의 방법이 있습니다.javascript의 개체는 열거형 속성과 열거형 속성이 없습니다.
var empty = {};
console.log(empty.toString);
// . function toString(){...}
console.log(empty.toString());
// . [object Object]
위의 예에서 빈 개체가 실제로 속성을 가지고 있음을 알 수 있습니다.
좋아요, 우선 어떤 방법이 최선인지 알아보겠습니다.
var new_object = Object.create(null)
new_object.name = 'Roland'
new_object.last_name = 'Doda'
//etc
console.log("toString" in new_object) //=> false
위의 예에서 로그는 false를 출력합니다.
이제 다른 개체 생성 방법이 잘못된 이유를 살펴보겠습니다.
//Object constructor
var object = new Object();
console.log("toString" in object); //=> true
//Literal constructor
var person = {
name : "Anand",
getName : function (){
return this.name
}
}
console.log("toString" in person); //=> true
//function Constructor
function Person(name){
this.name = name
this.getName = function(){
return this.name
}
}
var person = new Person ('landi')
console.log("toString" in person); //=> true
//Prototype
function Person(){};
Person.prototype.name = "Anand";
console.log("toString" in person); //=> true
//Function/Prototype combination
function Person2(name){
this.name = name;
}
Person2.prototype.getName = function(){
return this.name
}
var person2 = new Person2('Roland')
console.log("toString" in person2) //=> true
위에서 볼 수 있듯이 모든 예제는 true로 기록됩니다.그 말은 만약 당신이 그 사건을 가지고 있다면for in개체에 속성이 있는지 확인하기 위해 루프를 사용하면 잘못된 결과를 초래할 수 있습니다.
가장 좋은 방법은 쉽지 않다는 것에 유의하세요.개체의 모든 속성을 한 줄씩 정의해야 합니다.다른 방법들은 더 쉽고 개체를 만드는 코드가 적지만 경우에 따라 주의해야 합니다.저는 항상 "다른 방법"을 사용합니다. 그리고 최선의 방법을 사용하지 않을 경우 위 경고에 대한 한 가지 해결책은 다음과 같습니다.
for (var property in new_object) {
if (new_object.hasOwnProperty(property)) {
// ... this is an own property
}
}
객체를 만드는 방법은 크게 세 가지가 있습니다.
가장 간단한 것은 객체 리터럴을 사용하는 것입니다.
const myObject = {}
이 방법이 가장 간단하지만 개체에 동작(함수)이 있는 경우에는 단점이 있지만 나중에 이 방법을 변경하려면 모든 개체에서 변경해야 합니다.
따라서 이 경우에는 Factory나 Constructor Functions를 사용하는 것이 좋습니다.(마음에 드는 anyone)
Factory Functions란 객체를 반환하는 기능을 말합니다. 예를 들어,
function factoryFunc(exampleValue){
return{
exampleProperty: exampleValue
}
}
생성자 함수(Constructor Functions)는 "이" 키워드를 사용하여 객체에 속성을 할당하는 함수입니다. 예:
function constructorFunc(exampleValue){
this.exampleProperty= exampleValue;
}
const myObj= new constructorFunc(1);
언급URL : https://stackoverflow.com/questions/6843951/which-way-is-best-for-creating-an-object-in-javascript-is-var-necessary-befor
'programing' 카테고리의 다른 글
| JQuery/Javascript : var가 존재하는지 확인 (0) | 2023.09.27 |
|---|---|
| Angular Cli Webpack, 외부 js 파일 추가 또는 번들 방법? (0) | 2023.09.27 |
| 데이터베이스에서 상위 테이블과 하위 테이블이란? (0) | 2023.09.27 |
| Mysql에서 이메일 주소 확인 (0) | 2023.09.27 |
| %를(를) 사용할 수 없음:자르기Remainer를 대신 사용합니다."는 다음을 의미합니까? (0) | 2023.09.27 |