bind()JavaScript에서 무엇을 사용 합니까?

바인드 this는 함수 내부가에 전달 된 매개 변수가되도록 하는 새 함수를 작성합니다 bind().

다음 bind은 올바른 멤버 메소드를 전달하는 방법을 보여주는 예제입니다 this.

var myButton = {
  content: 'OK',
  click() {
    console.log(this.content + ' clicked');
  }
};

myButton.click();

var looseClick = myButton.click;
looseClick(); // not bound, 'this' is not myButton - it is the globalThis

var boundClick = myButton.click.bind(myButton);
boundClick(); // bound, 'this' is myButton

출력되는 내용 :

OK clicked
undefined clicked
OK clicked

1 번째 ( this) 매개 변수 뒤에 추가 매개 변수를 추가 할 수 bind있으며 해당 값을 원래 함수로 전달합니다. 나중에 바운드 함수에 전달하는 추가 매개 변수는 바운드 매개 변수 다음에 전달됩니다.

// Example showing binding some parameters
var sum = function(a, b) {
  return a + b;
};

var add5 = sum.bind(null, 5);
console.log(add5(10));

출력되는 내용 :

15

자세한 정보 및 대화식 예제는 JavaScript 함수 바인드 를 확인하십시오 .

업데이트 : ECMAScript 2015는 =>기능 지원을 추가 합니다. =>함수는 더 간결하며 this포인터를 정의 범위에서 변경하지 않으므로 bind()자주 사용할 필요가 없습니다 . 예를 들어 콜백을 DOM 이벤트 Button에 연결하기 위해 첫 번째 예제에서 함수를 사용하려는 경우 click다음을 수행하는 올바른 방법입니다.

var myButton = {
  ... // As above
  hookEvent(element) {
    // Use bind() to ensure 'this' is the 'this' inside click()
    element.addEventListener('click', this.click.bind(this));
  }
};

또는:

var myButton = {
  ... // As above
  hookEvent(element) {
    // Use a new variable for 'this' since 'this' inside the function
    // will not be the 'this' inside hookEvent()
    var me = this;
    element.addEventListener('click', function() { me.click() });
  }
};    

또는:

var myButton = {
  ... // As above
  hookEvent(element) {
    // => functions do not change 'this', so you can use it directly
    element.addEventListener('click', () => this.click());
  }
};

가장 간단한 사용법 bind()은 호출 방식에 관계없이 특정 this값으로 호출되는 함수를 만드는 것입니다 .

x = 9;
var module = {
    x: 81,
    getX: function () {
        return this.x;
    }
};

module.getX(); // 81

var getX = module.getX;
getX(); // 9, because in this case, "this" refers to the global object

// create a new function with 'this' bound to module
var boundGetX = getX.bind(module);
boundGetX(); // 81

자세한 내용은이 링크를 참조하십시오

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

바인딩 허용

• "this"의 값을 특정 객체로 설정하십시오. 때때로 이것은 매우 도움이된다 이 의도 것이 아니다.
• 재사용 방법
• 기능을 카레

예를 들어 월별 클럽 수수료를 공제하는 기능이 있습니다.

function getMonthlyFee(fee){
  var remaining = this.total - fee;
  this.total = remaining;
  return this.name +' remaining balance:'+remaining;
}

이제이 기능을 다른 클럽 회원에게 재사용하려고합니다. 월별 요금은 회원마다 다릅니다.

레이첼의 잔고가 500이고 월 정비가 90이라고 가정 해 봅시다.

var rachel = {name:'Rachel Green', total:500};

이제 매월 그녀의 계정에서 수수료를 공제하는 데 사용할 수있는 기능을 만드십시오.

//bind
var getRachelFee = getMonthlyFee.bind(rachel, 90);
//deduct
getRachelFee();//Rachel Green remaining balance:410
getRachelFee();//Rachel Green remaining balance:320

이제 다른 멤버쉽 요금으로 다른 멤버에게 동일한 getMonthlyFee 함수를 사용할 수 있습니다. 예를 들어 Ross Geller의 잔액은 250이고 월 수수료는 25입니다.

var ross = {name:'Ross Geller', total:250};
//bind
var getRossFee = getMonthlyFee.bind(ross, 25);
//deduct
getRossFee(); //Ross Geller remaining balance:225
getRossFee(); //Ross Geller remaining balance:200

에서 MDN이 워드 프로세서 에 Function.prototype.bind():

결합 () 메소드가 호출 될 때, 새로운 함수가 호출 될 때 어떤 제공 선행 인자의 주어진 순서로 제공된 값이 그 키워드 세트가 새로운 기능을 생성한다.

그래서, 무슨 뜻입니까?!

자, 다음과 같은 함수를 봅시다 :

var logProp = function(prop) {
    console.log(this[prop]);
};

이제 다음과 같은 객체를 보자.

var Obj = {
    x : 5,
    y : 10
};

다음과 같이 함수를 객체에 바인딩 할 수 있습니다.

Obj.log = logProp.bind(Obj);

이제 Obj.log코드의 어느 곳에서나 실행할 수 있습니다.

Obj.log('x'); // Output : 5
Obj.log('y'); // Output : 10

this우리는 객체 의 값을 바인딩했기 때문에 작동 합니다 Obj.

실제로 흥미로운 곳은에 대한 값을 바인딩 할 this뿐만 아니라 인수에 대한 바인딩입니다 prop.

Obj.logX = logProp.bind(Obj, 'x');
Obj.logY = logProp.bind(Obj, 'y');

우리는 이제 이것을 할 수 있습니다 :

Obj.logX(); // Output : 5
Obj.logY(); // Output : 10

과는 달리 Obj.log, 우리는 통과하지 않아도 x또는 y우리가 우리의 결합했을 때 우리가 그 가치를 전달하기 때문에.

변수에는 지역 및 전역 범위가 있습니다. 이름이 같은 두 개의 변수가 있다고 가정 해 봅시다. 하나는 전역 적으로 정의되고 다른 하나는 함수 클로저 안에 정의되며 함수 클로저 안에있는 변수 값을 가져 오려고합니다. 이 경우이 bind () 메소드를 사용합니다. 아래의 간단한 예를 참조하십시오.

var x = 9; // this refers to global "window" object here in the browser
var person = {
  x: 81,
  getX: function() {
    return this.x;
  }
};

var y = person.getX; // It will return 9, because it will call global value of x(var x=9).

var x2 = y.bind(person); // It will return 81, because it will call local value of x, which is defined in the object called person(x=81).

document.getElementById("demo1").innerHTML = y();
document.getElementById("demo2").innerHTML = x2();

<p id="demo1">0</p>
<p id="demo2">0</p>

요약:

이 bind()메소드는 객체를 첫 번째 인수로 사용하여 새 함수를 만듭니다. 함수가 호출되면 this함수 본문 의 값은 함수의 인수로 전달 된 객체가 bind()됩니다.

this어쨌든 JS에서 작동 합니까

thisjavascript 의 값은 항상 함수가 호출되는 객체에 따라 다릅니다. 이것의 값은 항상 함수가 호출되는 곳에서 점 왼쪽의 객체를 나타냅니다 . 전역 범위의 경우이 범위는 window(또는 global입니다 nodeJS). 단 call, apply그리고 bind다른 바인딩이를 변경할 수 있습니다. 이 키워드의 작동 방식을 보여주는 예는 다음과 같습니다.

let obj = {
  prop1: 1,
  func: function () { console.log(this); } 
}

obj.func();   // obj left of the dot so this refers to obj

const customFunc = obj.func;  // we store the function in the customFunc obj

customFunc();  // now the object left of the dot is window, 
               // customFunc() is shorthand for window.customFunc()
               // Therefore window will be logged

바인드는 어떻게 사용됩니까?

바인드 는 참조 할 수 this있는 고정 된 개체를 가짐 으로써 키워드의 어려움을 극복하는 데 도움이 될 수 있습니다 this. 예를 들면 다음과 같습니다.

var name = 'globalName';

const obj = {
  name: 'myName',
  sayName: function () { console.log(this.name);}
}

const say = obj.sayName; // we are merely storing the function the value of this isn't magically transferred

say(); // now because this function is executed in global scope this will refer to the global var

const boundSay = obj.sayName.bind(obj); // now the value of this is bound to the obj object

boundSay();  // Now this will refer to the name in the obj object: 'myName'

함수가 특정 this값에 바인딩되면 함수 를 전달하고 다른 객체의 속성에 넣을 수도 있습니다. 의 가치 this는 동일하게 유지됩니다.

나는 이론적으로뿐만 아니라 실제적으로 bind를 설명 할 것이다.

자바 스크립트의 bind는 Function.prototype.bind 메소드입니다. bind는 방법입니다. 함수 프로토 타입에서 호출됩니다. 이 메소드는 본문이 호출 된 함수와 유사한 함수를 작성하지만 'this'는 bind 메소드에 전달 된 첫 번째 매개 변수를 나타냅니다. 문법은

     var bindedFunc = Func.bind(thisObj,optionsArg1,optionalArg2,optionalArg3,...);

예:--

  var checkRange = function(value){
      if(typeof value !== "number"){
              return false;
      }
      else {
         return value >= this.minimum && value <= this.maximum;
      }
  }

  var range = {minimum:10,maximum:20};

  var boundedFunc = checkRange.bind(range); //bounded Function. this refers to range
  var result = boundedFunc(15); //passing value
  console.log(result) // will give true;

bind () 메소드는이 값이 bind ()로 전달 된 값에 바인드 된 새 함수 인스턴스를 작성합니다. 예를 들면 다음과 같습니다.

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

여기에서 bind ()를 호출하고 객체 o를 전달함으로써 sayColor ()로부터 objectSayColor ()라는 새로운 함수가 생성됩니다. objectSayColor () 함수는 o와 동등한이 값을 가지므로 전역 호출로도 함수를 호출하면 문자열 "blue"가 표시됩니다.

참조 : Nicholas C. Zakas-웹 개발자를위한 전문 JAVASCRIPT®

인수를 값에 바인딩하여 새 함수 작성

이 bind메소드는 암시 적 this인수를 포함하여 특정 값에 바인딩 된 하나 이상의 인수를 사용하여 다른 함수에서 새 함수를 작성합니다 .

부분 신청

이것은 부분 적용 의 예입니다 . 일반적으로 우리는 값을 산출하는 모든 인수를 가진 함수를 제공합니다. 이것을 함수 응용 프로그램이라고합니다. 함수를 인수에 적용하고 있습니다.

고차 함수 (HOF)

부분 적용은 더 적은 수의 인수로 새로운 함수를 생성하기 때문에 고차 함수 (HOF) 의 예입니다 .

여러 인수 바인딩

bind여러 인수가있는 함수를 새 함수로 변환 하는 데 사용할 수 있습니다 .

function multiply(x, y) { 
    return x * y; 
}

let multiplyBy10 = multiply.bind(null, 10);
console.log(multiplyBy10(5));

인스턴스 메소드에서 정적 함수로 변환

가장 일반적인 사용 사례에서 하나의 인수로 호출하면 bind메소드는 this특정 값에 바인딩 된 값 을 갖는 새로운 함수를 작성 합니다. 실제로 이것은 인스턴스 메소드를 정적 메소드로 변환합니다.

function Multiplier(factor) { 
    this.factor = factor;
}

Multiplier.prototype.multiply = function(x) { 
    return this.factor * x; 
}

function ApplyFunction(func, value) {
    return func(value);
}

var mul = new Multiplier(5);

// Produces garbage (NaN) because multiplying "undefined" by 10
console.log(ApplyFunction(mul.multiply, 10));

// Produces expected result: 50
console.log(ApplyFunction(mul.multiply.bind(mul), 10));

상태 저장 콜백 구현

다음 예제에서는 바인딩을 this사용하여 객체 메서드가 객체의 상태를 쉽게 업데이트 할 수있는 콜백 역할을하도록하는 방법을 보여줍니다 .

function ButtonPressedLogger()
{
   this.count = 0;
   this.onPressed = function() {
      this.count++;
      console.log("pressed a button " + this.count + " times");
   }
   for (let d of document.getElementsByTagName("button"))
      d.onclick = this.onPressed.bind(this);
}

new ButtonPressedLogger();      

<button>press me</button>
<button>no press me</button>

언급 한 바와 같이 Function.bind()함수가 실행될 컨텍스트를 지정할 수 있습니다. 즉, 함수 this본문에서 키워드가 확인할 개체를 전달할 수 있습니다 .

유사한 서비스를 수행하는 몇 가지 유사한 툴킷 API 메소드 :

jQuery.proxy ()

도조 히치 ()

/**
 * Bind is a method inherited from Function.prototype same like call and apply
 * It basically helps to bind a function to an object's context during initialisation 
 * 
 * */

window.myname = "Jineesh";  
var foo = function(){ 
  return this.myname;
};

//IE < 8 has issues with this, supported in ecmascript 5
var obj = { 
    myname : "John", 
    fn:foo.bind(window)// binds to window object
}; 
console.log( obj.fn() ); // Returns Jineesh

아래에 나열된 간단한 프로그램을 고려하십시오.

//we create object user
let User = { name: 'Justin' };

//a Hello Function is created to Alert the object User 
function Hello() {
  alert(this.name);
}

//since there the value of this is lost we need to bind user to use this keyword
let user = Hello.bind(User);
user();

//we create an instance to refer the this keyword (this.name);

bind 함수는 호출하는 함수와 동일한 함수 본문을 사용하여 새 함수를 만듭니다. this 인수로 호출됩니다. 왜 우리는 bind fun을 사용합니까? : 새로운 인스턴스가 생성되고 첫 번째 초기 인스턴스를 사용해야 할 때마다 우리는 bind fun을 사용합니다. 우리는 bind fun을 무시할 수 없습니다. 단순히 클래스의 초기 객체를 저장합니다.

setInterval(this.animate_to.bind(this), 1000/this.difference);

다른 사용법은 바인드 된 함수를 다른 실행 컨텍스트에서 작동하는 다른 함수의 인수로 전달할 수 있다는 것입니다.

var name = "sample";
function sample(){
  console.log(this.name);
}
var cb = sample.bind(this);

function somefunction(cb){
  //other code
  cb();
}
somefunction.call({}, cb);

간단한 예

function lol(text) {
    console.log(this.name, text);
}

lol(); // undefined undefined
lol('first'); // undefined first
lol.call({name: 'karl'}); // karl undefined
lol.call({name: 'karl'}, 'second'); // karl second
lol.apply({name: 'meg'}); // meg undefined
lol.apply({name: 'meg'}, ['third']); // meg third
const newLol = lol.bind({name: 'bob'});
newLol(); // bob undefined
newLol('fourth'); // bob fourth

바인드 방법

바인드 구현은 다음과 같습니다.

Function.prototype.bind = function () {
  const self = this;
  const args = [...arguments];
  const context = args.shift();

  return function () {
    return self.apply(context, args.concat([...arguments]));
  };
};

bind 함수는 여러 개의 인수를 사용 하여 새 함수를 반환 할 수 있습니다 .

새로운 함수 는 JS Function.prototype.apply메소드를 사용하여 원래 함수를 호출합니다 .
이 apply메소드는 대상 함수에 전달 된 첫 번째 인수를 컨텍스트 ( this)로 사용하고 apply메소드 의 두 번째 배열 인수 는 대상 함수의 나머지 인수를 조합하여 반환을 호출하는 데 사용되는 인수와 연결됩니다 기능 (순서대로).

예를 들면 다음과 같습니다.

function Fruit(emoji) {
  this.emoji = emoji;
}

Fruit.prototype.show = function () {
  console.log(this.emoji);
};

const apple = new Fruit('🍎');
const orange = new Fruit('🍊');

apple.show();  // 🍎
orange.show(); // 🍊

const fruit1 = apple.show;
const fruit2 = apple.show.bind();
const fruit3 = apple.show.bind(apple);
const fruit4 = apple.show.bind(orange);

fruit1(); // undefined
fruit2(); // undefined
fruit3(); // 🍎
fruit4(); // 🍊

간단한 설명 :

bind () 는 새로운 함수, 그것이 당신에게 반환하는 함수의 새로운 참조를 만듭니다.

이 키워드 다음에 나오는 매개 변수에는 미리 구성하려는 매개 변수를 전달합니다. 실제로 즉시 실행되지 않고 실행 준비 만합니다.

원하는만큼 매개 변수를 사전 구성 할 수 있습니다.

바인드를 이해하는 간단한 예 :

function calculate(operation) {
  if (operation === 'ADD') {
   alert('The Operation is Addition');
  } else if (operation === 'SUBTRACT') {
   alert('The Operation is Subtraction');
  }
}

addBtn.addEventListener('click', calculate.bind(this, 'ADD'));
subtractBtn.addEventListener('click', calculate.bind(this, 'SUBTRACT'));

bind는 이름이 bind를 사용하여 함수 호출을 컨텍스트에 바인딩하는 데 사용되는 Java 스크립트 프로토 타입에서 사용할 수있는 함수입니다. 예를 들면 다음과 같습니다.

    var rateOfInterest='4%';
    var axisBank=
    {
    rateOfInterest:'10%',
    getRateOfInterest:function()
    {
    return this.rateOfInterest;
    }
    }
    axisBank.getRateOfInterest() //'10%' 


    let knowAxisBankInterest=axisBank.getRateOfInterest // when you want to assign the function call to a varaible we use this syntax
    knowAxisBankInterest(); // you will get output as '4%' here by default the function is called wrt global context

let knowExactAxisBankInterest=knowAxisBankInterest.bind(axisBank);     //so here we need bind function call  to its local context


    knowExactAxisBankInterest() // '10%'