John Jeong (토론 | 기여) (→예시 1) |
(→같이 보기) |
||
(사용자 3명의 중간 판 29개는 보이지 않습니다) | |||
1번째 줄: | 1번째 줄: | ||
== | ==개념== | ||
;JavaScript Object | ;JavaScript Object | ||
;자바스크립트 객체 | ;자바스크립트 객체 | ||
* 객체도 변수와 동일하지만 여러가지 값을 담을 수 있는 변수라 생각하면 됨 | |||
* 자바스크립트에서 객체(속성과 행위를 가지는 것)를 만들어 사용할 수 있음 | * 자바스크립트에서 객체(속성과 행위를 가지는 것)를 만들어 사용할 수 있음 | ||
* 문자, 숫자, 함수, 객체 등 모든 것들이 객체가 될 수 있음 | * 문자, 숫자, 함수, 객체 등 모든 것들이 객체가 될 수 있음 | ||
7번째 줄: | 8번째 줄: | ||
* name : value 의 쌍으로 입력 가능 | * name : value 의 쌍으로 입력 가능 | ||
== | ==프로퍼티== | ||
*<code>{</code><code>}</code>를 통해 name과 age의 | *<code>{</code><code>}</code>를 통해 name과 age의 프로퍼티를 가지는 객체 생성 및 초기화 | ||
< | <syntaxhighlight lang="javascript"> | ||
var person = {name:JohnJeong, age:45}; | var person = {name:JohnJeong, age:45}; | ||
var person2 = {name:jmnote, age:35}; | var person2 = {name:jmnote, age:35}; | ||
</ | </syntaxhighlight> | ||
== | ==프로퍼티+메소드== | ||
*<code>{</code><code>}</code>를 통해 name과 color의 | *<code>{</code><code>}</code>를 통해 name과 color의 프로퍼티와 bark메소드를 가지는 객체 생성 및 초기화 | ||
< | <syntaxhighlight lang='JavaScript'> | ||
var dog = { | var dog = { | ||
name: "Snoopy", | name: "Snoopy", | ||
28번째 줄: | 29번째 줄: | ||
dog.bark(); | dog.bark(); | ||
// Woof! | // Woof! | ||
</ | </syntaxhighlight> | ||
== | ==new== | ||
< | *<code>new</code> 키워드를 통해 Dog 객체 생성 | ||
*Dog() 함수는 객체를 만드는 생성자 (constructor)가 됨 | |||
<syntaxhighlight lang='JavaScript'> | |||
function Dog(name) { | function Dog(name) { | ||
this.name = name; | this.name = name; | ||
41번째 줄: | 44번째 줄: | ||
myDog.bark(); | myDog.bark(); | ||
// Woof! | // Woof! | ||
</ | </syntaxhighlight> | ||
==new Object()== | |||
*<code>new Object()</code> 키워드를 통해 객체 생성 | |||
*<code>{}</code>와 동일함 | |||
<syntaxhighlight lang="JavaScript"> | |||
var dog = new Object(); | |||
dog.name = "Woody"; | |||
dog.age = 5; | |||
</syntaxhighlight> | |||
<syntaxhighlight lang="JavaScript"> | |||
var dog = {}; | |||
dog.name = "Woody"; | |||
dog.age = 5; | |||
</syntaxhighlight> | |||
==예시== | |||
<syntaxhighlight lang='JavaScript'> | |||
function Dog(name) { | |||
this.name = name; | |||
this.bark = function() { | |||
console.log("Woof! I'm " + this.name +"."); | |||
} | |||
} | |||
var myDog = new Dog("Snoopy"); | |||
myDog.bark(); | |||
// Woof! I'm Snoopy. | |||
</syntaxhighlight> | |||
<syntaxhighlight lang='JavaScript'> | |||
var Dog = function(name) { | |||
this.name = name; | |||
} | |||
Dog.prototype.bark = function() { | |||
console.log("Woof! I'm " + this.name +"."); | |||
} | |||
var myDog = new Dog("Snoopy"); | |||
myDog.bark(); | |||
// Woof! I'm Snoopy. | |||
</syntaxhighlight> | |||
<syntaxhighlight lang='JavaScript'> | |||
var Dog = function(name) { | |||
var name; | |||
var Dog = { | |||
name: name, | |||
bark: function() { | |||
console.log("Woof! I'm " + this.name +"."); | |||
} | |||
} | |||
return Dog; | |||
} | |||
var myDog = new Dog("Snoopy"); | |||
myDog.bark(); | |||
// Woof! I'm Snoopy. | |||
</syntaxhighlight> | |||
==같이 보기== | ==같이 보기== | ||
{{z컬럼3| | |||
*[[객체]] | |||
*[[ | |||
*[[DOM]] | *[[DOM]] | ||
*[[객체]] | *[[New_object]] | ||
* [[JavaScript 자료형]] | |||
* [[JavaScript 클래스]] | |||
* [[JavaScript 프로토타입]] | |||
* [[자바스크립트 window 객체]] | |||
* [[자바스크립트 document 객체]] | |||
* [[자바스크립트 location 객체]] | |||
* [[자바스크립트 Audio 객체]] | |||
* [[JavaScript 객체를 배열로 변환]] | |||
* [[JavaScript 배열을 객체로 변환]] | |||
}} | |||
==참고 | ==참고== | ||
*http://www.w3schools.com/js/js_objects.asp | *http://www.w3schools.com/js/js_objects.asp | ||
[[분류: JavaScript | [[분류: JavaScript 객체]] | ||
2023년 11월 12일 (일) 15:02 기준 최신판
1 개념[ | ]
- JavaScript Object
- 자바스크립트 객체
- 객체도 변수와 동일하지만 여러가지 값을 담을 수 있는 변수라 생각하면 됨
- 자바스크립트에서 객체(속성과 행위를 가지는 것)를 만들어 사용할 수 있음
- 문자, 숫자, 함수, 객체 등 모든 것들이 객체가 될 수 있음
{
,}
사이에 기입- name : value 의 쌍으로 입력 가능
2 프로퍼티[ | ]
{
}
를 통해 name과 age의 프로퍼티를 가지는 객체 생성 및 초기화
JavaScript
Copy
var person = {name:JohnJeong, age:45};
var person2 = {name:jmnote, age:35};
3 프로퍼티+메소드[ | ]
{
}
를 통해 name과 color의 프로퍼티와 bark메소드를 가지는 객체 생성 및 초기화
JavaScript
Copy
var dog = {
name: "Snoopy",
color: "white",
bark: function bark() {
console.log("Woof!");
}
};
console.log( dog.name );
// Snoopy
dog.bark();
// Woof!
4 new[ | ]
new
키워드를 통해 Dog 객체 생성- Dog() 함수는 객체를 만드는 생성자 (constructor)가 됨
JavaScript
Copy
function Dog(name) {
this.name = name;
this.bark = function() {
console.log("Woof!");
}
}
var myDog = new Dog("snoopy");
myDog.bark();
// Woof!
5 new Object()[ | ]
new Object()
키워드를 통해 객체 생성{}
와 동일함
JavaScript
Copy
var dog = new Object();
dog.name = "Woody";
dog.age = 5;
JavaScript
Copy
var dog = {};
dog.name = "Woody";
dog.age = 5;
6 예시[ | ]
JavaScript
Copy
function Dog(name) {
this.name = name;
this.bark = function() {
console.log("Woof! I'm " + this.name +".");
}
}
var myDog = new Dog("Snoopy");
myDog.bark();
// Woof! I'm Snoopy.
JavaScript
Copy
var Dog = function(name) {
this.name = name;
}
Dog.prototype.bark = function() {
console.log("Woof! I'm " + this.name +".");
}
var myDog = new Dog("Snoopy");
myDog.bark();
// Woof! I'm Snoopy.
JavaScript
Copy
var Dog = function(name) {
var name;
var Dog = {
name: name,
bark: function() {
console.log("Woof! I'm " + this.name +".");
}
}
return Dog;
}
var myDog = new Dog("Snoopy");
myDog.bark();
// Woof! I'm Snoopy.
7 같이 보기[ | ]
8 참고[ | ]
편집자 Jmnote Jmnote bot
로그인하시면 댓글을 쓸 수 있습니다.