bind 함수 상세 설명

var name = "The Window";
var object = {
    name: "My Object",
    getNameFunc: function () {
        return function () {
            return this.name;
        }
    }
};

alert(object.getNameFunc()()); //"The Window"

object.getNameFunc()는 익명 함수를 반환합니다. 전역 환경에서 이 함수를 호출합니다. this가 가리키는 전역 대상
이 문제를 해결하려면 아래와 같이 익명 함수 외부 작용역에서this 대상을 패키지가 접근할 수 있는 변수에 저장할 수 있습니다

var name = "The Window";
var object = {
    name: "My Object",
    getNameFunc: function () {
        var that = this;
        return function () {
            return that.name;
        }
    }
};

alert(object.getNameFunc()()); //"My Object"

상술한 해결 방법은 대상을 수정하는 방법이 필요합니다. 만약 원래 대상의 방법을 수정할 수 없다면 어떻게 해야 합니까?
이때, 우리는 아래와 같이 apply나call 방법으로 함수의 작용역을 지정할 수 있다

var name = "The Window";
var object = {
    name: "My Object",
    getNameFunc: function () {
        return function () {
            return this.name;
        }
    }
};
var func=object.getNameFunc();
alert(func.apply(object)); //"My Object"

apply, call을 통해 이미 예상한 My Object를 출력할 수 있습니다
단, 호출할 때마다func로 해야 합니다.apply (object) 형식 호출, 이상하잖아.
이상적인 호출 방식은 당연히 어떤 처리를 거친 후에 func () 형식으로 호출할 수 있다. 아래와 같다.

var name = "The Window";
var object = {
    name: "My Object",
    getNameFunc: function () {
        return function () {
            return this.name;
        }
    }
};
var func=object.getNameFunc();
func=func.bind(object);
alert(func()); //"My Object"

ECMAScript 5는 bind 방법을 정했습니다. 이 방법은 함수 실례를 만들고this값은 bind 함수에 전달되는 값에 귀속됩니다. 위 코드는 bind 함수의 사용 방식을 제시하고 간단한 예시를 제공합니다.

window.color="red";
var o={color:"blue"};
function sayColor(){
    alert(this.color);
}

var func=sayColor.bind(o);
func();//"blue"

대부분의 브라우저에서 ECMAScript 5가 정의한 이 방법을 사용할 수 있지만, 소수의 지원하지 않는 브라우저에서 호환성 문제가 발생할 수 있습니다. 이것은 어떻게 처리합니까?
위의 apply,call 방법을 통해 예시를 사용하면 아래와 같이 해결 방안을 제공할 수 있다

Function.prototype.bind=Function.prototype.bind||
    function(context){
        var self=this;
        return function()
        {
            return self.apply(context,arguments);
        }
    }

bind 매개변수 변경

만약 우리가 변수 귀속 매개 변수를 foo () 로 사용하고 newFoo () 를 호출하기 전에 변수를 바꾸면, 값이 왜 바뀔 것 같습니까?

function add(a,b){    
    return a + b;
}
var a = 3;
var b = 4;var newFoo = add.bind(this,a, b);
a = 6;
b = 7;
console.log(newFoo());

반환 값은 여전히 7입니다.bind () 가 연결된 것은 실제 변수의 값이 아니라 매개 변수의 값이기 때문입니다.이것은 좋은 소식이다. 내가 말한 바와 같이 우리는 코드에서 이 커다란 장점을 이용할 수 있다.하지만 나에게 가장 유용한 곳은callbacks에 있다.그 글에서 우리가 순환 중callbacks를 처리하는 해결 방안 중 하나는 우리가 호출하고자 하는 함수를 둘러싸고 익명 함수를 만드는 것이다.그러나 우리는 bind를 사용하여 코드를 크게 간소화할 수 있다.

 for(var i = 0;i < 10;i++){
    setTimeout(console.log.bind(this,i),1000);
  }

이벤트 프로세서용 bind

bind () 코드를 깨끗하게 할 수 있는 또 다른 곳은 이벤트 처리 프로그램입니다.이벤트 프로세서가 호출될 때 방문한 상하문에서 이벤트를 생성하는 것이지 이벤트 프로세서를 만드는 대상이 아니라는 것을 모두가 알고 있거나, 알아야 한다.bind를 사용하면 함수가 정확한 상하문에 접근할 수 있다는 것을 확신할 수 있다.

function ClassName(){
   this.eventHandler = (function(){
   }).bind(this);
}

Prototype.js의 bind

// The .bind method from Prototype.js 
Function.prototype.bind = function(){ 
  var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift(); 
  return function(){ 
    return fn.apply(object, 
      args.concat(Array.prototype.slice.call(arguments))); 
  }; 
};