자바스크립트는 자바처럼 객체 선언이 가능하다.
아래와 같은 방식의 객체생성이 여러 생성방법 중 한가지이다.
1 2 3 4 5 6 7 | <script> var product = { name : 'mango', type : 'sweet', from : 'India' }; </script> | cs |
자바스크립트 배열과 상당히 유사한데 객체의 atttribute에 접근하는것도 비슷하게 접근가능하다. 혹은 java처럼 접근도 가능하다
1 2 3 4 5 6 7 | var name = product['name']; var type = product['type']; var name = product['from']; //or var name = product.name; var type = product.type; var from = product.from; | cs |
attrubute와 method가 포함된 객체 생성방법은 아래와 같다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <script> var student = {}; //declare attribute student.name = 'wonyoung'; student.hobby = 'lego'; //declare method student.toString = function(){ var output = ''; for (var key in this){ //do not print toString method if(key!='toString'){ output += key + '\t' + this[key] +'\n'; } } return output; } alert(student.toString()); </script> | cs |
생성자를 이용한 객체 생성
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script> function Student(name, hobby){ //declare attribute this.이름 = name; this.취미 = hobby; //declare method this.toString = function(){ return this.이름 + '\t' + this.취미 + '\n'; } } var students = []; students.push(new Student('wonyoung','lego'); students.push(new Student('somin','origami'); alert(students[0].toString()); </script> | cs |
프로토타입(prototype)을 활용한 객체 생성 - 메서드를 하나만 생성해도 모든 객체가 해당 메서드 사용이 가능
(기존의 생성자를 이용하여 객체를 만들면 메모리를 쓸데없이 많이 잡아먹는다고 한다 - from 모던 웹을 위한 Javascript jQuery 입문)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script> function Student(name, hobby){ //declare attribute this.이름 = name; this.취미 = hobby; } //declare method with prototype Student.prototype.toString = function(){ return this.이름 + '\t' + this.취미 + '\n'; }; var students = []; students.push(new Student('wonyoung','lego'); students.push(new Student('somin','origami'); alert(students[0].toString()); </script> | cs |
End of Document
반응형
'Programming Language > JS & JQuery' 카테고리의 다른 글
[Vue.JS] button 클릭시 다른 홈페이지로 redirect하는 방법 (273) | 2019.04.23 |
---|---|
Javascript의 json 객체에서 -(dash)가 포함된 name에 접근하는 방법? (268) | 2019.04.23 |
[JavaScript]변수내용이 json인지 확인하는 method(check valid json) (421) | 2019.04.16 |
jqeury 스크롤 내리다가 특정 영역(부분) 이벤트 발생시키기 (5) | 2017.04.27 |
Javascript 예외처리 (391) | 2017.03.30 |