■ 참조
[난해한 Javascript 개념] ‘this’ 키워드의 의미
자바스크립트의 ‘this’ 키워드 이해하기
■ javascript this?
– this는 객체의 owner혹은 context(문맥)을 가리킨다.
■ 이 context(문맥?)의 소유자는 누구인가? window이다.
console.log(this); // window
■ foo()함수의 소유자는 누구인가? window이다.
function foo() { console.log(this); } window.foo(); // window this.foo(); // window
■ foo 함수의 this이므로 this는 goo를 가리킨다. foo함수의 owner는 goo이므로 goo가 this이다.
크롬 콘솔에서는 ‘▶{foo: f}’라고 표시된다.
var goo = { foo : function() { console.log(this); } } goo.foo(); // goo
■ call()함수와 apply()함수는 변경하려는 owner를 첫번째 인자로 가지는 것은 유사하나 call은 인자를 나열하는 방식이고, apply는 배열로 전체 인자를 대체하는 방식이다.
var goo = { foo : function(one, two, three) { console.log(this); console.log(one+two+three); } } var xx = { yy : function() { console.log(this); // 실행되지 않음 } } goo.foo(1,2,3); // goo, 6 goo.foo.call(xx, 1,2,3); // xx, 6 goo.foo.apply(xx, [1,2,3]); // xx, 6 goo.foo.call(window, 1,2,3); // window, 6 goo.foo.apply(window, [1,2,3]); // window, 6
■ bind는 owner를 바꾼 ‘함수’를 리턴하는 것이다.(?)
var goo = { foo : function(x) { console.log(this); console.log(x); } } var binded = goo.foo.bind(window); goo.foo(1); // goo, 1 binded(2); // window, 2 goo.foo(3); // goo, 3
- 자바스크립트 숫자에 천단위 추가 2023년 12월 28일
- javascript 객체 정렬(object sort) 2022년 3월 23일
- autocomplete=”off” 자동완성 기능 없애기 2022년 3월 16일
- JSRender Helper 함수 예제 2021년 6월 15일
- Highcharts error #17 2019년 7월 10일
- Highchart TypeError: c.init is not a function 2019년 7월 10일
- Highchart 크기 조정 2019년 7월 8일
- Highcharts error #13 2019년 7월 8일
- npm 설치, NodeJS 설치 2019년 6월 18일
- javascript forEach 예제 2019년 5월 3일
- Highcharts update event 2019년 3월 26일
- CKEditor Tip 2019년 3월 25일
- javascript에서 날짜 구하기 2019년 1월 3일
- Javascript 문자열 Byte 길이 구하는 방법 2018년 2월 27일
- javascript this 2018년 2월 13일
- javascript Set 예제 2018년 2월 13일
- addEventListener – element에 이벤트 등록 예제 2016년 5월 31일
- javascript에서 간단한 form을 만들기 2016년 5월 31일
- javascript switch문 예제 2016년 5월 31일
- setInterval : 반복 작업 수행 2016년 5월 11일
- 인터넷 익스플로러 버전 체크(IE 버전) 2016년 1월 22일
- javascript 순환문 2015년 12월 29일
- javascript 문자열 2015년 12월 29일
- 크롬에서 자바스크립트 실행 시간 확인 2015년 10월 14일
- javascript setTimeout(delay) 2015년 10월 13일
- 자바스크립트, jQuery 데이터 타입 2015년 1월 25일
- 자바스크립트 for문 2015년 1월 25일
- 자바스크립트 문자열 길이, 배열의 길이 2015년 1월 25일