자바스크립트

프로그래밍/JavaScript 자바스크립트 2021. 9. 30.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var obj = {
	name:'자바',
	city:'서울'
};

console.log(obj.name);
console.log(obj.city);
console.log(obj.age); // 없는 속성은 undefined. 에러가 아님

// 동적 속성 추가
obj.age = 10;
console.log(obj.age);

// 속성 제거
delete obj.city;
console.log(obj.city); // undefined

</script>
</head>
<body>

<h3>객체 - 프로퍼티 동적 추가, 삭제</h3>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var obj = {
	name:'이자바',
	age:20,
	msg:function() {
		return this.age>=19?'성인':'미성년자';
	}
};

// 객체 속성 접근
console.log(obj.name);     // 도트 표기법 접근
console.log(obj['name']);  // 대괄호 표기법으로 접근

// 메소드 접근
console.log(obj.msg());

// 객체의 프로퍼티 나열
for(var ob in obj) { // ob : 프로퍼티이름
	console.log(ob, obj[ob]);
}

console.log("name" in obj); // true. 객체에 속성이 존재하는지 확인
console.log("subject" in obj); // false


// console.log(obj.name);
// 간단한 표현
with(obj) {
	console.log(name);
	console.log(age);
}

</script>
</head>
<body>

<h3>객체 - 프로퍼티 접근 및 나열</h3>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
function User(name, age) {
	this.name = name;
	this.age = age;
}

var obj = new User('너자바', 20); // obj 객체 생성
obj.score = 80; // obj라는 객체에 score 속성을 추가
obj.state= function() { // obj라는 객체에  state() 메소드를 추가
	return this.age >= 19 ? "성인" : "미성년자";
};
console.log(obj.name, obj.score, obj.state()); // 너자바 80 성인

var obj2 = new User('김자바', 17); // obj2 객체 생성
console.log(obj2.name); // 김자바
// console.log(obj2.score); // undefined
// console.log(obj2.state()); // 에러

</script>

</head>
<body>

<h3> 객체 - 속성 및 메소드 추가 </h3>

</body>
</html>

객체의 속성을 제거 할 때는 delete obj.city 이런식으로 해주기

객체 속성에 접근할때는 . 붙여서 obj.name 이렇게도 가능 하지만, obj['name'] 이렇게 대괄호로도 가능하다.

객체 메소드에 접근할때는 꼭 괄호 붙여야한다. ex) obj.msg()

보통 속성이나 메소드 추가할때는 그냥 점 붙여서 한다.

없는 속성을 새로 추가하고 싶을때 = obj.score = 80;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
/*
- 생성자 함수에 추가하는 프로퍼티나 메소드 : 프로토타입에 추가하므로 생성자를 통해 생성된 모든 객체에 적용
- 프로토 타입
  객체는 부모 객체의 프로퍼티나 메소드를 상속 받아 사용할 수 있으며, 이러한 부모 객체를 프로토 타입 객체 또는 프로토타입이라 함
*/
function User(name) {
	this.name = name;
	this.age = 20;  // 기본값을 가질 수 있음
	this.state = function(){
		return this.age >= 19 ? '성인' : '미성년자';
	};
}

console.dir(User);

var obj = new User('홍길동');
console.log(obj.name, obj.state());

</script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
// 정적 메소드 : 생성자에 직접 지정된 메소드
function User(name) {
	this.name=name;
	this.getName = function() {
		return this.name;
	};
}

// 정적 메소드
User.state = function(age) {
	return age>=19?'성인':'미성년자';
};

console.log(User.state(15));
console.log(User.getName()); // 에러. 정적 메소드가 아님. 객체를 생성해서 호출해야함

var obj = new User('하하하');
console.log(obj.getName());

</script>
</head>
<body>

<h3>정적 메소드</h3>

</body>
</html>

생성자를 만들 수 있다.

인자가 필요한 생성자 안에도 변수의 기본값은 설정 가능하다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var obj = { // 객체 리터널로 객체 생성
	name:'홍길동',
	score:90
};

console.log(obj.valueOf()); // obj에는 valueOf()가 없지만 동작함. valueOf()는 상위 객체에서 물려 받음

console.dir(obj);

console.log(obj.__proto__ === Object.prototype); // true
// __proto__ 프로퍼티 : 객체의 부모를 나타내는 프로토타입으로 부모에게 물려 받은 정보를 가지고 있음
// prototype 프로퍼티 : 자신의 프로토 타입 객체로 하위로 물려 줄 프로토타입 정보를 가지고 있음

// ------------------------------
function User(name) {
	this.name = name;
}

var u = new User('이자바'); // 객체를 생성

console.dir(User); // prototype 프로퍼티가 존재
console.dir(u); // prototype 프로퍼티가 없음

console.log ( u.__proto__ === User.prototype ); // true

</script>

</head>
<body>

<h3>프로토 타입</h3>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
// prototype 프로퍼티 : 생성자에 존재. 생성자로 생성되는 객체에 물려줄 프로퍼티와 메소드를 자지고 있음
	
function User(name, age) {
	this.name = name;
	this.age = age;
}

User.prototype.score = 80;
User.prototype.state = function(){
	return this.age>=19 ? '성인' : '미성년자';
};

var obj = new User('자바', 20);
console.log(obj.name, obj.score, obj.state()); // 자바 80 성인

var obj2 = new User('스프링', 17);
console.log(obj2.name, obj2.score, obj2.state()); // 스프링 80 미성년자

// Date 내장객체에 weekday 라는 메소드를 추가하여 요일 출력
Date.prototype.weekday = function(){
	let week = ['일','월','화','수','목','금','토'];
	return week[this.getDay()];
};

var now = new Date();
console.log( now.weekday() ); // 요일 출력

</script>
</head>
<body>

<h3>객체에 프로퍼티나 메소드 추가. prototype 이용</h3>

</body>
</html>

프로퍼티를 이용하면 이미 존재하는 객체 안에 새로운 함수도 임의로 넣을 수 있다.

Date 객체는 이미 내장 객체로써 존재 하지만 안에 내가 필요로 하는 객체를 넣을 수 있다.

prototype을 이용한다.

Date.prototype.weekday = Date객체에(이미 존재하는) 프로토타입 prototype을 이용해서

weekday라는 이름의 function() 을 만들겠다.

저작자표시

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

자바스크립트 - apply / call / bind (0)	2021.09.30
자바스크립트 - 클래스 (0)	2021.09.30
자바스크립트 - 배열 / 객체 (2) (0)	2021.09.30
자바스크립트 - 배열 / 객체 (1) (0)	2021.09.30
자바스크립트 - 달력 (0)	2021.09.28

ABOUT ME

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바