javascript_javascript 기술에서 바인드 사용 소개

며칠 전에 인터뷰 질문을 봤는데 질문이 이랬어요.
JavaScript의 Apply, Call, Bind에 대한 이해를 알려주실 수 있나요?
우선 Apply와 Call이 진부한 표현인데, Bind의 경우 잠시 놀랐습니다. 이 단어는 이벤트를 DOM 요소에 바인딩하는 데 사용되는 jquery에서 자주 사용되는 메소드이기 때문입니다.
낯설지만 익숙한 이 바인딩을 이해하기 위해 구글링을 해보니 이 메서드가 JavaScript 버전 1.8.5에서 기본적으로 구현되어 있는 것으로 나타났습니다. 현재 IE9, ff4, chrome7에서는 이 메서드를 지원하지만 Opera와 Safari에서는 지원하지 않습니다. (MDN에 대한 설명)
바인드의 기능은 적용 및 호출의 기능과 유사하며 둘 다 런타임 중에 this 키워드의 핵심인 함수의 실행 컨텍스트를 변경합니다. 하지만 사용법은 조금 다릅니다. 함수는 바인딩된 후 나중에 실행될 수 있습니다.
예제는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

var person = {
name: '앤드류',
job: '웹 프런트 엔드 개발자',
gender: 'male',
sayHello: function() {
return '안녕하세요, 저는 'this.name', a 'this.job입니다.
}
}
console.log(person.sayHello()) // 안녕하세요, 저는 웹 프론트엔드 개발자 Andrew입니다.
var anotherGuySayHello = person .sayHello.bind({
name:'Alex',
job: '백엔드 C# 개발자'
})
console.log(anotherGuySayHello()); // 안녕하세요, 저는 백엔드 C# 개발자 Alex입니다.

매개변수가 포함된 또 다른 예:

코드 복사 코드는 다음과 같습니다.

function add(arg1, arg2, arg3, arg4) {
return arg1 ' ' arg2 ' ' arg3 ' ' arg4; var addMore = add.bind({}, 'a', 'b')
console.log(addMore('c', 'd')) // a b c d


브라우저에서 이 방법이 당분간 지원되지 않지만 멋지다고 생각하면 MDN에서도 참조 구현을 제공합니다. 이 구현은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

if(!Function.prototype.bind) {

함수. 프로토타입.bind = function(oThis) {
if( typeof this !== 'function') {
throw new TypeError('Function.prototype.bind - 바인딩하려는 항목을 호출할 수 없습니다.');
}
var fSlice = Array.prototype.slice,
aArgs = fSlice.call(arguments, 1),
fToBind = this,
fNOP = function() {},
fBound = function() {
return fToBind.apply(이 fNOP 인스턴스 ? this : oThis || window, aArgs.concat(fSlice.call(arguments)))
fNOP.prototype; = this.prototype;
fBound.prototype = new fNOP ();
return fBound;
}


코드의 마지막 몇 줄은 프로토타입 체인, 여기서 fBound는 바인딩 함수를 호출하는 하위 클래스입니다. 구현을 위해 런타임에 결정되는 fBound = function(){ return ... } 부분을 주의 깊게 살펴볼 수 있습니다. 여기서 고려해야 할 사항은 new를 사용하여 함수(생성자 메서드)를 호출하는 경우입니다.
다음 예는 설명의 편의를 위해 MDN에서 직접 가져온 것입니다.

코드 복사

코드는 다음과 같습니다. function Point(x,y) { this.x = x

this.y = y

Point; .prototype .toString = function() {
return this.x ',' this.y;
var p = new Point(1, 2)
p.toString() ; / / 1,2
var emptyObj = {};
var YAxisPoint = Point.bind(emptyObj, 0)
var axisPoint = new YAxisPoint(5); ; / / 0, 5
axisPoint 인스턴스of Point; // true
axisPoint 인스턴스of YAxisPoint;
더 깊은 이해를 돕기 위해 기사 링크는 마지막에 제공됩니다
MDN:
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind



MSDN:
http://msdn.microsoft.com/en-us/library/ff841995(v=vs.94).aspx