자바스크립트 - 배열 / 객체 (2)

자바스크립트 - 배열 / 객체 (2)

Insert title here // 객체 리터널(이니셜라이저)를 이용한 객체 생성 var obj = {name:'홍길동', age:20}; // 프로퍼티이름:값, 프로퍼티명은 문자열만 가능 // var obj = {'name':'홍길동', 'age':20}; // 가능 console.log( typeof obj ); // "object" console.log( obj ); console.dir( obj ); // 객체 속성 값 확인 console.log( obj.name ); // 홍길동 // 객체 속성 값 변경 obj.name = '김자바'; console.log( obj.name ); // 김자바 var s; s = obj.age >= 19 ? obj.name +"님은 성인 입니다." : obj.name +"님은 성인이 아닙다."; console.log( s ); obj.Age = 22; // 프로퍼티의 대소문자가 틀리면 에러가 나오지 않고 새로운 속성이 추가된다. console.log( obj.age ); // 20 console.dir( obj ); // 객체 리터널(이니셜라이저)를 이용한 객체 생성 - 2 var obj2 = { }; // 빈 객체 console.log( typeof obj2 ); console.log( obj2 ); // 실행시 동적으로 속성 추가 obj2.subject = "자바"; console.log( obj2 ); console.log( obj2.subject ); // 객체 리터널(이니셜라이저)를 이용한 객체 생성 - 3 var obj3 = { name : '홍길동', age : 20, state : function() { return this.age >= 19 ? '성인' : '미성년자'; }, msg : function() { // 메소드안에서 속성 및 다른 메소드를 호출할때 this 생략 불가 var s = `${this.name}님은 ${this.state()} 입니다`; console.log(s); } }; console.log( obj3 ); obj3.msg(); 객체 만들기

객체를 선언과 동시에 초기화 할 수 있다.

그리고 만든 객체의 여러 정보들을 보고 싶을때

console.log로 좋지만 console.dir도 자세한 정보를 보여준다.

obj2.subject = "자바"; 이런식으로 기존에 만들었던 객체에 속성을 추가 할 수 있다.

var obj3 = {

name : '홍길동',

age : 20,

state : function() {

return this.age >= 19 ? '성인' : '미성년자';

},

msg : function() {

// 메소드안에서 속성 및 다른 메소드를 호출할때 this 생략 불가

var s = `${this.name}님은 ${this.state()} 입니다`;

console.log(s);

}

};

그리고 이건 객체에 속성을 넣었는데 속성끼리 서로 영향을 주는 모습을 볼 수 있다.

msg 속성에서 state속성과 name 속성을을 이용하는 모습을 볼 수 있다.

state 속성에서는 age속성을 참조 했다.

Insert title here // 생성자 함수를 이용한 객체 생성 // 생성자 함수 작성 - 생성자는 대문자로 시작한다. function User(name, age) { this.name = name; this.age = age; this.state = function() { return this.age >= 19 ? "성인":"미성년자"; } this.msg = function() { var s = this.name +"님은 "+this.state()+"입니다."; console.log( s ); } } // 생성자 함수를 이용한 객체 생성 var obj = new User('홍길동', 20); console.log( obj.name ); obj.msg(); var Book = { subject:'자바', msg:function() { return '좋아하는 과목은 '+this.subject+'입니다.'; } }; //Object.create()메소드를 이용한 객체 생성 var b1 = Object.create(Book); var b2 = Object.create(Book); b1.subject = 'HTML'; b2.subject = 'CSS'; console.log(Book.msg()); // 자바 console.log(b1.msg()); // HTML console.log(b2.msg()); // CSS 객체 생성

생성자 함수를 만들때는 항상 대문자로 시작 해야한다.

function User(name, age) {

this.name = name;

this.age = age;

this.state = function() {

return this.age >= 19 ? "성인":"미성년자";

}

this.msg = function() {

var s = this.name +"님은 "+this.state()+"입니다.";

console.log( s );

}

}

name과 age를 매개변수로 입력 받아서 내부에서 this.을 붙여서 활용하는 모습이다.

Object.create()로도 객체를 생성 할 수 있다.

Insert title here // 생성자 함수 function User(name) { this.name = name; } var obj = new User('홍길동'); console.log(obj instanceof User); // true console.log(obj instanceof Object); // true. User의 상위 객체는 Object // 객체 리터널 var obj2 = {}; // 객체 리터널로 생성되는 객체는 Object 객체 console.log(obj2 instanceof Object); // true 객체-인스턴스

instanceof 는 변수의 클래스와 비교를 해준다.

obj와 User의 관계가 어떠냐고 물어서 true가 나오고

obj와 Object의 관계도 true가 나온다. 왜냐하면 자바처럼 상위 객체는 같다고 취급 해준다.

Insert title here // 객체의 메소드를 호출할때 메소드 내부 코드에서 사용한 this : 해당 메소드를 호출한 객체 var obj = { // 객체 생성 name : '김자바', msg : function(){ // console.dir(this); console.log(this.name); // this는 msg() 메소드를 호출한 객체 } }; obj.msg(); // 생성자 함수를 호출할 때의 this : 새로 생성되는 객체 function Test(arg) { this.name = arg; this.getName = function() { return this.name; }; } var obj2 = new Test('자바'); console.log( obj2.getName() ); // 함수를 호출할때의 this var userName = '스프링'; // 전역 변수. 전역변수는 자동으로 window의 속성이 된다. // console.log(userName); // 스프링 console.log(window.userName); // 스프링 // sayUser()를 호출할 때 this는 전역 객체(window)에 바인딩 var sayUser = function(){ console.log( this.userName, userName, window.userName); // 스프링 스프링 스프링 }; sayUser(); 객체 - this

만든 객체의 메소드를 사용할때 그 메소드 내부에서 this를 사용했다면

그건 해당 메소드를 호출한 객체를 말한다.

하지만 생성자의 함수를 호출할 때의 this는 새로 생성되는 객체를 의미한다.

그리고 전역변수를 호출할 때는 window.을 붙여주면 된다.

var asd = 'asd'; 라고 전역변수를 선언했을때 얘를 부를때는 그냥 asd로 불러도 되지만

window.asd 라고 호출 해도 된다.

그리고 this.asd라고 하게 되면 전역 객체에 해당되어 사용 된다.

다 똑같다는 말

from http://heidong.tistory.com/110 by ccl(A) rewrite - 2021-09-30 03:01:56