Javascript에서 바인드를 구현하는 방법

본 글에서는 바인드 학습부터 자바스크립트 구현까지의 과정을 주로 소개합니다. 관심 있는 친구들은 따라하며 배울 수 있습니다.

bind() 메소드는 호출 시 새 함수를 생성하고 제공된 값으로 this 키워드를 설정하며, 새 함수를 호출할 때 제공된 특정 매개변수 시퀀스 앞에 a를 제공합니다.

var result = fun.bind(thisArg[, arg1[, arg2[, ...]]]) 
result(newArg1, newArg2...)

이해가 안 되더라도 괜찮으니 계속 읽어주세요.

바인드가 하는 일이 정확히 무엇인가요

위 소개에서 세 가지 점을 알 수 있습니다. 먼저, 바인딩 메소드를 호출하면 새 함수가 반환됩니다(이 새 함수의 함수 본문은 fun과 동일해야 합니다). 동시에 두 개의 매개변수가 바인드에 전달됩니다. 첫 번째 매개변수는 이것이 가리키는 것입니다. 즉, 전달된 매개변수는 무엇이든 동일합니다. 다음 코드에 표시된 대로:

this.value = 2
var foo = {
  value: 1
}
var bar = function() {
 console.log(this.value)
}
var result = bar.bind(foo)
bar() // 2
result() // 1,即this === foo

두 번째 매개변수는 시퀀스이며 원하는 만큼의 매개변수를 전달할 수 있습니다. 그리고 이는 새로운 기능 매개변수 이전에 사전 설정됩니다.

this.value = 2
var foo = {
  value: 1
};
var bar = function(name, age, school) {
 console.log(name) // 'An'
 console.log(age) // 22
 console.log(school) // '家里蹲大学'
}
var result = bar.bind(foo, 'An') //预置了部分参数'An'
result(22, '家里蹲大学') //这个参数会和预置的参数合并到一起放入bar中

결과(22, 'University at home')가 최종적으로 호출되면 바인딩을 호출할 때 전달된 'An'이 이미 포함되어 있음을 알 수 있습니다.

한 문장으로 요약: 바인딩을 호출하면 새 함수가 반환됩니다. 이 함수에서 this는 바인드의 첫 번째 매개변수를 가리키며, 이 뒤에 오는 매개변수는 이 새 함수에 미리 전달됩니다. 새 함수를 호출할 때 전달된 매개변수는 미리 설정된 매개변수 뒤에 배치되어 새 함수에 함께 전달됩니다.

바인드를 직접 구현

바인드를 구현하려면 다음 두 가지 함수를 구현해야 합니다.함수를 반환하고 이를 바인드한 후 미리 설정된 매개변수를 전달합니다

바인드에서 반환된 함수는 다음과 같이 사용할 수 있습니다. 생성자. 따라서 생성자로 사용하면 유효하지 않지만 전달된 매개변수는 여전히 유효합니다

1. 함수를 반환하고 이를 바인딩한 다음 사전 설정된 매개변수를 전달합니다

this.value = 2
var foo = {
  value: 1
};
var bar = function(name, age, school) {
  console.log(name) // 'An'
  console.log(age) // 22
  console.log(school) // '家里蹲大学'
  console.log(this.value) // 1
}
Function.prototype.bind = function(newThis) {
  var aArgs  = Array.prototype.slice.call(arguments, 1) //拿到除了newThis之外的预置参数序列
  var that = this
  return function() {
    return that.apply(newThis, aArgs.concat(Array.prototype.slice.call(arguments)))
    //绑定this同时将调用时传递的序列和预置序列进行合并
  }
}
var result = bar.bind(foo, 'An')
result(22, '家里蹲大学')

여기서 한 가지 세부 정보는 Array.prototype.slice입니다. call( 인수, 1) 이 문장에서 우리는 인수 변수가 함수가 호출될 때 전달된 매개변수를 얻을 수 있다는 것을 알고 있지만 배열은 아니지만 길이 속성을 가지고 있습니다. 왜 이렇게 호출하면 순수 배열로 바뀔 수 있나요? 그런 다음 분석을 위해 V8의 소스 코드로 돌아가야 합니다. #본 버전의 소스코드는 상대적으로 내용이 적은 초기 버전입니다.

function ArraySlice(start, end) {
 var len = ToUint32(this.length); 
 //需要传递this指向对象，那么call(arguments)，
 //便可将this绑定到arguments，拿到其length属性。
 var start_i = TO_INTEGER(start);
 var end_i = len;
 if (end !== void 0) end_i = TO_INTEGER(end);
 if (start_i < 0) {
  start_i += len;
  if (start_i < 0) start_i = 0;
 } else {
  if (start_i > len) start_i = len;
 }
 if (end_i < 0) {
  end_i += len;
  if (end_i < 0) end_i = 0;
 } else {
  if (end_i > len) end_i = len;
 }
 var result = [];
 if (end_i < start_i)
  return result;
 if (IS_ARRAY(this))
  SmartSlice(this, start_i, end_i - start_i, len, result);
 else 
  SimpleSlice(this, start_i, end_i - start_i, len, result);
 result.length = end_i - start_i;
 return result;
};

소스 코드를 보면 슬라이스 호출에 대한 인수 아래에 길이 속성을 할당한 후 start_i 및 end_i를 통해 최종 배열을 얻을 수 있으므로 슬라이스 배열 변수에 전달하지 않고도 순수한 배열을 얻을 수 있습니다. .

2. Bind가 반환한 함수는 생성자로 사용될 수 있습니다.

생성자로 사용되는 경우 이는 new가 생성한 인스턴스를 가리켜야 하며 인스턴스의 프로토타입을 가리키는 프로토타입 속성도 가져야 합니다.

this.value = 2
var foo = {
 value: 1
};
var bar = function(name, age, school) {
 ...
 console.log('this.value', this.value)
}
Function.prototype.bind = function(newThis) {
 var aArgs  = Array.prototype.slice.call(arguments, 1)
 var that = this //that始终指向bar
 var NoFunc = function() {}
 var resultFunc = function() {
  return that.apply(this instanceof that ? this : newThis, aArgs.concat(Array.prototype.slice.call(arguments)))
 } 
 NoFunc.prototype = that.prototype //that指向bar
 resultFunc.prototype = new NoFunc()
 return resultFunc
}
var result = bar.bind(foo, 'An')
result.prototype.name = 'Lsc' // 有prototype属性
var person = new result(22, '家里蹲大学')
console.log('person', person.name) //'Lsc'

위의 시뮬레이션 코드는 두 가지 중요한 작업을 수행합니다.

1. 반환된 함수에 대한 프로토타입 속성을 시뮬레이션합니다. , 프로토타입에 정의된 속성과 메서드는 생성자 new

var NoFunc = function() {}
...
NoFunc.prototype = that.prototype //that指向bar
resultFunc.prototype = new NoFunc()
return resultFunc

의 인스턴스를 통해 쿼리할 수 있기 때문입니다. 위 코드에서 볼 수 있듯이 항상 bar를 가리킵니다. 동시에 반환된 함수는 bar.prototype인 that.prototype을 상속했습니다. 반환된 함수의 프로토타입 속성 resultFunc.prototype을 bar(that).prototype과 동일하게 만드는 것은 어떨까요? 이는 모든 새 인스턴스가 프로토타입 체인에 액세스할 수 있기 때문입니다. 직접 할당하면 새 객체가 bar 함수의 프로토타입 체인을 직접 수정할 수 있는데, 이는 프로토타입 체인 오염입니다. 따라서 우리는 상속(생성자의 프로토타입 체인을 상위 생성자의 인스턴스에 할당)을 사용하여 bar에서 새 객체의 프로토타입 체인을 분리합니다.

2. 이것을 일반 바인드에 사용할지, 현재 this의 지점을 변경하기 위해 호출할 때 생성자에 사용할지 결정합니다.

이것이 현재 가리키는 위치를 확인하는 방법은 무엇입니까? 첫 번째 지점부터 우리는 바인드 메서드에서 반환된 새 함수에 이미 프로토타입 체인이 있다는 것을 알고 있습니다. 시뮬레이션을 완료합니다. 부르심을 받는 현재의 자세를 판단하는 방법. 대답은 인스턴스입니다.

instanceof 연산자는 객체의 프로토타입 체인에 생성자의 프로토타입 속성이 있는지 여부를 테스트하는 데 사용됩니다.

// 定义构造函数
function C(){} 
function D(){} 
var o = new C();
// true，因为 Object.getPrototypeOf(o) === C.prototype
o instanceof C; 
// false，因为 D.prototype不在o的原型链上
o instanceof D;

위에서 볼 수 있듯이, instanceof는 이 함수를 통해 객체가 새로운지 여부를 판단할 수 있습니다. 새로운 객체라면 이 객체의 프로토타입 체인이 해당 함수의 프로토타입이 되어야 합니다.

자, 살펴보겠습니다. at this 반환된 함수 구조의 핵심은 다음과 같습니다.

var resultFunc = function() {
  return that.apply(this instanceof that ? 
    this : 
    newThis, 
    aArgs.concat(Array.prototype.slice.call(arguments)))
 }

여기서 우리는 먼저 이 인스턴스에서 이것이 바인드 함수가 호출된 후 반환된 새 함수에 있음을 인식해야 합니다. 따라서 이것은 일반적인 범위 환경에서 실행될 수도 있고, 방향을 바꾸는 것이 새로운 것일 수도 있습니다. 다시 살펴보면 that은 항상 bar를 가리키며 해당 프로토타입 체인 that.prototype은 항상 존재합니다. 따라서 이 새 함수가 이제 새 작업을 수행해야 하는 경우 이것은 새 함수를 가리키고 이 인스턴스는 === true이므로 이것을 Apply에 새 함수를 가리키는 포인터로 전달합니다. 이것이 일반적인 호출이라면 이것은 new에 의해 생성되지 않습니다. 즉, new 함수는 생성자로 사용되지 않으며 === false인 이 인스턴스는 명백합니다. 이번에는 일반적인 바인드 호출입니다. 호출의 첫 번째 매개변수를 이에 대한 포인터로 사용하면 됩니다.

完整代码(MDN下的实现)

if (!Function.prototype.bind) {
 Function.prototype.bind = function(oThis) {
  if (typeof this !== 'function') {
   // closest thing possible to the ECMAScript 5
   // internal IsCallable function
   throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
  }

  var aArgs  = Array.prototype.slice.call(arguments, 1),
    fToBind = this,
    fNOP  = function() {},
    fBound = function() {
     return fToBind.apply(this instanceof fNOP
         ? this
         : oThis,
         aArgs.concat(Array.prototype.slice.call(arguments)));
    };

  if (this.prototype) {
   // Function.prototype doesn't have a prototype property
   fNOP.prototype = this.prototype; 
  }
  fBound.prototype = new fNOP();
  return fBound;
 };
}

可以看到，其首先做了当前是否支持bind的判定，不支持再实行兼容。同时判断调用这个方法的对象是否是个函数，如果不是则报错。

同时这个模拟的方法也有一些缺陷，可关注MDN上的Polyfill部分

小结

模拟bind实现最大的一个缺陷是，模拟出来的函数中会一直存在prototype属性，但是原生的bind作为构造函数是没有prototype的，这点打印一下即可知。不过这样子new出来的实例没有原型链，那么它的意义是什么呢。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

MVVM框架如何解析双向绑定

JS运动特效

JS中链式运动（详细教程）

위 내용은 Javascript에서 바인드를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!