javascript this

■ 참조
[난해한 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일