객체편
===============================
객체사전적정의 : 물건 , 물체
객체지향 : 세상의 수많은 객체를, 현재상태와 행동으로 정의 하고있다.
(즉, 객체는 변수와 함수 이렇게? 정의가 되겠죠.)
예)
나무 , 뿌리 = 현재상태 (스테이트)
나무 = 광합성활동 , 물을 흡수하는 능력 = behavior(행동) = 메소드
즉,
자바스크립트에서는,
즉,
객체지향에서는,
스테이트 (상태) 를 프로퍼티 라고한다.
behavior(행동) 를 메소드 라고 한다.
(즉, 객체(오브젝트)는 프로퍼티와 메소드 이 2가지로 구성되있다.)
자바스크립트에서,,,
빌트 인 오브젝트는 다 객체다.
그리고
자바스크립트에서는 배열에 대해서 정확히 말하자면 배열이라는것 보다는 ,
유사 배열 라고 한다.
그래서 배열 자체도 객체의 한 종류다.
그냥 상식으로만 알아두고
그냥 배열 이라고 알아두면된다.
자바스크립트에서
빌트인오브젝트는 =
코어 자바스크립트라고해서,
순수 자바스크립트라고한다.
그래서
Built-in Object
여기 안에는
Object , String , Number , Boolean , Array , Function 등등 여러가지 많음.
그리고
Native Object 라고 해서, 이건 뭐냐면,
DOM 이라고 한다.
즉, 브라우져에서 작동되는 것(돔트리)
그리고
Host Object 는
사용자가 만든 오브젝트를 의미한다.
정리하자면,
코어자바스크립트가 있고,
그안에는
3개
-빌트인오브젝트
-네이티브오브젝트
-호스트오브젝트
가 있다.
빌트인오브젝트 카테고리에서
오브젝트는
-객체리터럴방식과
-오브젝트 생성자 함수
를 가지고 객체를 생성할수있다.
//객체리터럴방식
var obj = {
name : 'jack',
age : '23'
};
여기서
저 name 부분은 키 또는 프로퍼티 라고 하고,
jack 부분은 밸류라고 한다.
(보통 리터럴 방식을 사용하는것을 권장한다.)
var student = {
name : 'jack',
country : 'korea',
age : 31,
skills : ['javascript' , 'html' , 'css'],
data : {year : 2106 , month : '2월'},
intro : function(){ // 매소드
console.log(student.name + student.country);
}
};
그래서
저 intro 부분의 프로퍼티는 내용(벨류가)이 함수가 들어있으니까 메소드라고 부른다.
즉, 객체안에 함수값의 형태는 메소드라고 부른다.
*생성자함수 방법
(생성자함수를 컨스트럭쳐 라고 이야기하기도한다)
var obj = new Object(); // 빈 객체가 생성
obj.width = 20; //그냥 여기에 이렇게 프로퍼티를 정의하면됨
console.log(obj); // {width : 20} 이렇게 만들어 진걸 확인할수있음
- 리터럴방식과 , 생성자함수방식의 데이터의 접근은
var obj = {
name : 'jack',
age : '23'
};
obj.name = 'foo';
obj.name; // 값 변경
var s = objl;
s.name // 하면 접근 가능함
s.name = 1; // 값 변경 , 여기서 값변경해도 obj.name 값이 바뀌는거임
obj.gender = 'male'; // 프로퍼티 추가
s.gender = 'male'; //프로퍼티 추가 // s에다가 추가를 해도 obj 에 적용됨
- 생성자함수에서
- 생성자함수로 만든 객체는
- 어떠한 것들도 다 접근이 가능하다.
즉,
var obj = new Object();
obj.width = 20;
console.log(obj);
var copyobj = obj; // 여기 카피오비제이 변수를 만들고 obj 객체를 대입
console.log(copyobj.width); //그리고 카피오비제이 (변수이름) 쩜 위드 하니까
// {width : 20}
// 20
이렇게 나온다.
저 변수안에 20이 들어가있다.
var student = {
name : 'jack',
country : 'korea',
age : 31,
skills : ['javascript' , 'html' , 'css'],
data : {year : 2106 , month : '2월'},
intro : function(){ // 매소드
console.log(student.name + student.country);
}
};
for (var prop in student)
*for in 문에서는 괄호안의 첫번째부분은 인덱스값인데,
어디의 인덱스 값이냐면,
저 스튜던트 객체안의 프로퍼티 이름을 인덱스로 지정하는거다.
그리고
for in 문에서는 괄호안의 두번째 부분은 객체의 이름을 넣어줘서
이 객체를 대상으로
반복을하라는 것이다.
그리고
객체 접근방법은
쩜 하는방법하고 student.name
대괄호 콤마 방법있음 student['name']
근데 보통 쩜을 사용하지...
근데
for in 문 안에서 도는 인덱스를 접근할때는
student[name]
그냥 이렇게 콤마를 빼고 한다.
for in 문 에서 만약
student.name 이렇게 하면 언디파인드가 뜬다.
자바스크립트는 모든게 객체개념이다.
자바스크립트에서 생성되는 모든 객체는 오브젝트 라고하는 객체 , 즉 오브젝트라고하는 생성자죠
이 오브젝트 종족에서 파생되어 나온 객체들이에요.
즉, 오브젝트가 씨앗인거죠.
오브젝트로 인해 나온 객체들은 암묵적으로 Array 객체를 상속받는다.
예를들어)
var obj = {
name : 'henry'
};
console.log(obj['name']); // 이렇게 어레이 객체방식으로 접근을해도 접근이 가능하다.
어레이 객체를 상속을했기때문에... 저 대괄호를 쓸수있는...
var obj = {};
obj.age =10;
obj.name
var sum = obj.age + 20;
console.log(sum); //30
console.log(obj.name); //undefined
프로퍼티안에 값을 할당하지 않으면 신텍스 에러난다.
프로퍼티삭제는
delete obj.name; // 프로퍼티삭제
*객체안의 메서드
(객체안의 함수는 매서드라고 부르고, 그냥 밖에서 만든거는 함수다.)
var a = { name : function(){ console.log('a'); } }
a.name(); // 객체이름 쩜 매서드를 해서 접근(호출)함
function test (){ //일반함수
}
test(); 그냥 호출하는데 이게 사실 이 함수도 최상위 객체에서 상속받아 나온건데, 아무튼 따로 객체호출방식처럼 안하고 그냥 호출하면 된다.
참고로>
- Object 객체는 Built-in 객체로서 최상위레벨의 객체((Top-Level-Object) 이다. 즉 모든 객체는 이 Object 객체에서 파생되어 나온 확장형태인 것이다. Object 객체라는 최상위 객체를 껍대기로 파생되는 객체들은 Object 객체가 가지고 있는 기본적인 구성요소를 상속받게 된다.
그래서
메소드 활용방법중 하나는
var a = {};
a.b = 20;
a.c = 30;
a.v = function(){
console.log(this.b * this.c);
};
a.v();
참고로 this는 자신이 속한 상위객체를 가르킴
상위객체의 구성요소는
constructor
prototype
property
toString()
isPrototypeOf()
hasOwnProperty()
등등이있다.
오브젝트 생성자를 통해 객체를만들면
proto 가 들어있다.
뭐
proto : Object
이렇게 되있으면 오브젝트에서 만들어졌다는 즉, 상위생성자객체를 가르킨다.
