var p = "window.p";var obj = {p : "obj.p"};setTimeout(function() {console.log(this.p); // "window.p"}, 1000);// bind에 obj객체로 지정하여 여기서 this는 obj를 가르킨다.setTimeout( function() {console.log(this.p); // "obj.p"}.bind(obj), 1000);/*기본적으로 핸들러로 호출되는 람다함수(익명함수)들의 this는 전역객체(window)이기 때문에타이머라든지 이밴트 핸들러의 콜백함수로 호출이될때도 특정 객체와 연결하여 this를 유지 하고싶을때 bind 함수로 해결할수 있다.bind함수는 실행 될때의 함수를 특정객체의 범위에 묶어버리는 것이다.쉽게 말하면 bind는 함수 내의 this를 변경 시키려는 것이 목적이다.ex : fun.bind(object,arg1,....argn)자바스크립트는 function도 객체이기 때문에 .bind메서드 사용이 가능하며function prototype 멤버로 bind메서드가 존재한다.ie는 9 이상부터 지원ECMAScript 5에서 추가되었다.함수선언문이아닌 표현식함수(익명함수)에만 바인딩할수 있다.*///-----------------------------------------------------------------------------------------------------------------------Foo = {};/*Foo.method = function() {function test() {console.log(this); // 여기 this는 Global 객체를 가리킨다. (무조건 함수에서 this는 모두 전역객체이다);}test();}//아이디어1Foo.method = function() {var that = this; // Local 변수 that를 통해 this에 접근한다.function test() {console.log(that);}test();}*/Foo.method = function() {var test = function() { // ECMAScript 5부터는 익명함수와 결합된 bind 메서드를 사용하여 아이디어1과 같은 결과를 얻을 수 있다.console.log(this);}.bind(this); // bind메서드를 통해 this를 지정한다.test();}Foo.method();
<!doctype html><html lang="ko"><head><meta charset="utf-8"><script src="./lib/jquery/1.9.1/jquery.min.js"></script></head><body><button onclick='aaa()'>버튼</button><script>// window 객체console.dir(this.aaa); // function aaa()this.aaa = this.aaa.bind($('button').get(0)); // this ctx변경console.dir(this.aaa); // function bound aaa() // bound (법.의무 등에) 얽매인function aaa() {console.log(this) // 함수 안에서 this는 윈도우이다.. // 그러나.. button으로 변경}</script></body></html>
<!doctype html><html lang="ko"><head><meta charset="utf-8"><script src="./lib/jquery/1.9.1/jquery.min.js"></script></head><body><button>버튼</button><script>Foo = {};Foo.method = function() {console.dir(this)}.bind(Foo);// Foo.method = Foo.method.bind(Foo);$('button').click(Foo.method); // 클릭했을때 this는 button이 되지만 bind를 통해 Foo로 ctx고정</script></body></html>
반응형
'JavaScript' 카테고리의 다른 글
| [JavaScript] 클로저(closure) (0) | 2015.07.28 |
|---|---|
| [JavaScript] split - 구분자를 통해 문자열 자르기 (0) | 2015.07.09 |
| [JavaScript] setInterval - interval id 삭제 (0) | 2015.05.07 |
| [JavaScript] 자바스크립트 form 프로퍼티 제어 (0) | 2015.02.12 |
| [JavaScript] Math.random() - 난수발생 (0) | 2015.02.11 |
