728x90
this에 대하여....
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
//this(이것,나, 누가 말하냐에 따라 가리키는 대상이 달라짐)
function fthis(){ //전역함수를 선언하는 것은 window의 메소드를 선언
console.log("this",this); //?? window
return "ppp";
}
//fthis();
window.fthis(); //위에 꺼와 동일!
var merong = "미누미누";
alert(window.merong);//??
var lmw = {name:"민우", hobby:"일찍일찍부지런!"};
lmw.jikak = fthis;
//this가 어떻게(context맥락에 따라) 불리느냐에 따라 가리키는 대상이 바뀜
lmw.jikak(); //요때 this는?
</script>
call ,apply ,bind 나중 정말 필요한 순간 나의 구세주가 되어줄 것이라 믿어 의심치 않는다
<!DOCTYPE html>
<meta charset="UTF-8">
<body>
<button id="myBtn">나의 버튼</button>
</body>
<script>
//마니 억지스러운 예제!!, call,applu 둘중에 1개랑 bind는 필수로 알아야 함!
var myBtn = document.querySelector("#myBtn");
function fClick(pName) {
alert(`${pName}님 안농하삼`);
console.log("bind This",this);
}
//()를 붙이는건 함수호출 문법이라 이벤트상관없이 실행되어 버림!
//bind는 call하고 문법이 똑같음!
//call은 함수를 부르는 반면 bind는 내부적으로 매개변수값을 가진 함수를 새로 만들어서
//그 함수의 포인터(참조값-함수명)을 되돌려 줌!
myBtn.addEventListener("click",fClick.bind({name:"뻥이요"},"뻥이요 과자 맛있음.")); //fClick()를 붙이는순간 함수 호출문법이라 ()를 붙이면 안된다
myBtn.addEventListener("click",fClick.bind("민우","천재개발자임민우"));
//맥락에 따라 this가 가리키는 대상이 바뀌는 건 인정하지만
// 프로그램상 일일이 따져가며 하는 건 너무 힘들당. 대책을 내놓아라!
// 그래서 당나라 당당 출현 call,apply,bind 강제로 this가 가리키는 대상 세팅!
function fthis(pArg,pArg2){
console.log("this", this,pArg,pArg2);
}
// call, apply 사용법 = 첫번쩨 매개변수는 무조건 this
fthis.call(document,"오늘도","야근!!?");
fthis.call({name:"헬스는"},"미누안미누","안운동");
//매개변수값들을[]배열안에 담아서 넘겨야 하는 것 빼고 aaply는 call과 완벽하게 똑같음
fthis.apply({huk:"현재시간"},["오후","7시30분"]);//apply 배열로 감싸줘야함
</script>'JSP > Muzi' 카테고리의 다른 글
| [Javascript] 콘솔로그 console.log() 맛있게 쓰는법 (0) | 2024.08.22 |
|---|---|
| [Javascript] history.back 이슈(오류) (0) | 2024.08.20 |
| [Javascript]로컬 스토리지 사용 with(몽고DB) (0) | 2024.08.05 |
| [JavaScript] Promise ,async ,await 개념과 이해 그리고 실습 (0) | 2024.07.04 |
| 자바스크립트 난독화 해제하기. (0) | 2024.03.22 |
