[javascript] JavaScript '바인드'방법의 사용은 무엇입니까?

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));

출력되는 내용 :

자세한 정보 및 대화식 예제는 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;

답변

답변

답변

답변

답변

답변

요약:

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

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

답변

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