[javascript] 객체 - this / 호출 방법에 따른 this / form 요소에서 this

[javascript] 객체 - this / 호출 방법에 따른 this / form 요소에서 this

---

✔️ 객체의 this

: 자바스크립트에서 함수를 호출할 때 기존 매개변수로 전달되는 인자 값에 더해 ✨arguments 객체 및 this 인자가 함수 내부로 암시적으로 전달✨된다. 

: 현재 객체를 참조할 때 this 키워드를 사용하며, 일반적으로 this 는 메소드에서 호출하는 객체를 참조한다.

: 객체 프로퍼티는 점(.) 이나 괄호([]) 로 접근가능하다.

 

📓 정리

- 객체 메소드 호출할 때 this : 해당 메소드를 호출한 객체

- 일반 함수를 호출할 때 this : 전역 객체

- 생성자 함수를 호출할 때 this : 새로 생성되는 객체

 

1) 객체 메소드 호출할 때 this : 해당 메소드를 호출한 객체

var obj = {
		name:'김자바',
		sayName: function(){
			console.log(this.name); 
			//메소드안에서의 this 는 sayName() 메소드를 호출한 객체
		}
};

obj.sayName();

💡 obj 의 this name 이겠다.

 

2) 생성자 함수를 호출할 때 this : 새로 생성되는 객체

function Test(name) {
	this.name = name; // 생성자 함수에서의 this: 생성된 객체
	this.getName = () => {
		console.log(this);
		return this.name;
	}
}

var obj2 = new Test('호호호');
var s = obj2.getName();
console.log(s); //호호호

💡 생성자에서 this 는 생성자로 생성된 객체의 this 값이다.

 

3) 일반 함수를 호출할 때 this : 전역 객체

var user = '이자바'// 전역변수
console.log(window.user); //이자바

// sayUser() 일반함수(객체x) 호출시 this는 전역객체(window)에 바인딩
var sayUser = function() {
	console.log(this.user, user, window.user); //이자바, 이자바, 이자바
}

sayUser();

💡 sayUser() 일반함수 호출시, this 는 전역객체. 를 바인딩한다. 

 

 

✔️ form 요소들의 이벤트 핸들러에서의 this

: form 요소의 이벤트 핸들러에서의 this 는 이벤트를 발생시킨 객체이다.

<form name="myForm">
	<p> 이름 : <input type="text" name="name"></p>
	
	<p> 국어 : <input type="text" name="kor" onchange="validate(this);"></p>
	<p> 영어 : <input type="text" name="eng" onchange="validate(this);"></p>
	<p> 수학 : <input type="text" name="mat" onchange="validate(this);"></p>
	<p> <button type="button" onclick="send();">확인</button>
</form>

💡 validate(this); 라고 쓰였다. 여기서 this 는 이벤트를 발생시킨 객체다.

 

- 확인 버튼 함수

function send() {
	const f = document.myForm;
	let s;
	
	const inputELS = document.querySelectorAll("form input[type=text]");
	for(let obj of inputELS){
		if(! obj.value){
			obj.focus();
			return;
		}
	}
	
	s = f.name.value + ", ";
	s += f.kor.value + ", ";
	s += f.eng.value + ", ";
	s += f.mat.value;
	
	alert(s);
}

function validate(obj){
	if( !obj.value || isNaN(obj.value) || parseInt(obj.value)<0 || parseInt(obj.value) > 100){
		alert('점수는 0~100만 가능');
		obj.value = "";
		obj.focus();
	}	
}

💡 validate(obj) 에서 obj 는 input 객체 그자체를 의미한다!!!!!!!!
그래서 obj.value 라는 것도,  input 의 값을 의미하는 것이다.

<!-- onchange: input에 값 쓰고 내려가면 실행됨 -->
<!-- onchange(this): 국어 input이면 kor 이 실행...각각 이런식이다. -->
<!-- 영어 input 에서는 eng 가 this로, 아래로 내려가면서 실행한다. -->

 

 

✔️ form 안에서의 this.form

: 현재 객체의 부모 form을 나타낸다.

<form name="myForm">
	<p> 이름 : <input type="text" name="name"></p>
	<p> 국어 : <input type="text" name="kor"></p>
	<p> 영어 : <input type="text" name="eng"></p>
	<p> 수학 : <input type="text" name="mat"></p>
	<p> <button type="button" onclick="send(this.form);">확인</button>
</form>

💡 send(this.form) : 부모가 되는 form 을 의미

 

function send(f) {
	let s;
	
	
	const inputELS = document.querySelectorAll("form input[type=text]");
	for(let obj of inputELS){
		if(! obj.value){
			obj.focus();
			return;
		}
	}

	s = f.name.value + ", ";
	s += f.kor.value + ", ";
	s += f.eng.value + ", ";
	s += f.mat.value;
	
	alert(s);
}

💡 send(f) 에서 f 는 this.form 을 의미한다. (즉, button 의 부모가 되는.. form!)