적용/호출/바인딩 및 JavaScript의 경우

apply/call/bind 사이의 연결은 모두 함수에서 this가 가리키는 값을 변경하는 데 사용될 수 있으며 첫 번째 매개변수는 가리킬 this의 값이고 apply의 두 번째 매개변수는 (또는 바인드 및 호출의 변수 매개변수)는 전달될 매개변수입니다. 이것은 자바스크립트의 함수에 대한 요점을 언급해야 합니다. 간단히

fun.apply(context,[argsArray])

fun을 호출하는 동시에 fun 함수의 원본 this를 들어오는 새로운 컨텍스트 개체는 동일한 메서드를 구현하고 이를 다른 개체에서 재사용합니다.

context: fun 함수의 원본 this를 대체하는 전달된 객체

argsArray: 배열 매개변수가 확장되어 fun에 전달되는 배열 또는 배열 유사 객체; 별도의 실제 매개변수로 기능의 경우 매개변수의 순서에 주의해야 합니다.

fun.call(context,[arg1],[arg2],[…])

매개변수 목록이 다르다는 점을 제외하면 적용과 동일합니다. 통화를 분리해야 합니다. 매개변수 개수를 모르는 경우 적용을 사용하세요.

용도:

Math.max() //개별 매개변수만 전달받으며, 다음 방법을 통해 배열의 max 메소드를 사용할 수 있습니다.
Math.max.apply(null , array); //배열 배열 매개변수는 별도의 매개변수로 확장된 다음
Array.prototype.push.apply(arr1, arr2)로 전달됩니다. //하나의 배열을 분할하여 다른 배열로 푸시할 필요가 없습니다. 적용하려면 후속 배열 매개변수가 요소로 푸시됩니다.
Array.prototype.slice.call(arguments); //클래스 요소 그룹 객체에 슬라이스 메소드 사용

function isArray(obj){
  return Object.prototype.toString.call(obj) === '[object Array]' ;
}  //验证是否是数组

fun.bind(context,[arg1],[arg2],[…])

fun 메소드에 의해 실행되는 컨텍스트가 절대 변하지 않도록 만듭니다.

arg1: 새 함수에 전달할 매개변수 목록

이후 호출에 대한 함수를 반환합니다. 해당 함수 본문은 원래 함수 fun과 동일하지만 새 함수의 this는 가리킵니다. 새로 전달된 컨텍스트 객체에. 새 함수에는 바인드 메소드에 의해 지정된 초기 매개변수 arg1/arg2...가 있습니다. 이후에 새 함수를 호출할 때 실제 매개변수는 기존 매개변수 뒤에 정렬됩니다.

//原来的函数有4个参数
var displayArgs = function (val1, val2, val3, val4) {
  console.log(val1 + " " + val2 + " " + val3 + " " + val4);
}
var emptyObject = {};
// 生成新函数时bind方法指定了2个参数，则新函数会带着这个两个实参
var displayArgs2 = displayArgs.bind(emptyObject, 12, "a");
// 调用时传入另2个参数，要在bind方法传入的2个实参后面
displayArgs2("b", "c");
// Output: 12 a b c

이벤트 핸들러 함수에 바인드 사용:

var obj = {
  arg1 : 1,
  attach: function(){
    //var self = this; 普通传入this 的方法
    $('xxx').on('click',function (event) {
      console.log(this.arg1);//若不绑定this，回调函数中的this常指目标元素
     }.bind(this));  //使用bind方法绑定this
  }
}

bind() 메서드를 사용하여 Slice() 메서드를 다시 작성합니다.

var _Slice = Array.prototype.slice;
var slice = Function.prototype.call.bind(_Slice);
slice(…);

bind()는 Ie5~ie8 처리와 호환됩니다

if (!Function.prototype.bind) {
  Function.prototype.bind = function(context) {
    var self = this, // 调用bind方法的目标函数
    args = arguments;
    return function() {
      self.apply(context, Array.prototype.slice.call(args, 1));//参数个数不确定时用apply
    }
  }
}

일반적으로 setTimeout()의 이는 창 또는 전역 객체를 가리킵니다. 클래스 메서드를 사용하고 클래스 인스턴스를 가리키는 데 이것이 필요한 경우 self를 전달하는 대신 바인딩()을 사용하여 이를 호출 개체에 바인딩할 수 있습니다.

this

이 객체는 함수가 실행될 때 함수의 실행 환경에 따라 바인딩됩니다. 전역 함수에서 this는 window와 같고, 함수는 다음과 같이 처리됩니다. 객체의 메서드가 호출되면 이는 해당 객체와 동일합니다.

판단 방법: 함수가 실행될 때 . 연산자가 있으면 . 이전 개체를 참조하고, 그렇지 않으면 창을 참조합니다. new 키워드가 호출되면 새 객체를 참조합니다. Apply/call/bind가 있을 경우 첫 번째 파라미터를 참조합니다.

/*例1*/
function foo() {
  console.log( this.a );
} 
var obj2 = {
  a: 42,
  foo: foo
};
var obj1 = {
  a: 2,
  obj2: obj2
};
obj1.obj2.foo(); // 42;当foo函数被调用时，其本身是归obj2所拥有
/*例2*/
function foo() {
  console.log( this.a );
} 
var obj = {
  a: 2,
  foo: foo
};
var bar = obj.foo;   // bar引用foo函数本身
var a = "global";   // 全局对象的属性
bar();        // "global" ;

HTML DOM 이벤트 핸들러에서 이는 항상 핸들러가 바인딩된 DOM 노드를 가리킵니다.

자바스크립트의 적용/호출/바인드와 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!