호출은, 적용, 바인딩과의 차이를 사용 - 연구 노트를

 

바인딩과 같은 문제의, 그들에게 JS 통화에 대해 질문 거의 모든 시간을 인터뷰 적용 ...

• 전화를 사용하는 방법, 배열의 최대 또는 최소 값을 찾아 적용
• 호출을 사용하는 방법, 상속을 적용
• , 전화, 결합의 차이 및 주요 응용 프로그램 시나리오를 적용

첫째, 우리는 이들 세 가지 기능의 존재의 의미를 이해한다?

: 대답은 함수가 실행되는 컨텍스트를 변경 한 후 특정 지점은 런타임 기능이 지점을 변경 .

이러한 이해를 바탕으로, 우리는이 세 가지 기능을 사용하는 방법, 봐.

하자 OBJ = {이름 : '토니' }; 
  
  함수 자식 (명) {
     이 .name을 = 이름; 
  } 
  
  Child.prototype = { 
    생성자 : 자식 
    showName : 함수 () { 
      CONSOLE.LOG ( 이 .name을); 
    } 
  } 
  var에 아이 = 새로운 아이 ( '토마스' ); 
  child.showName (); // 토마스 
  
  //   호출, 적용, 결합使用
  child.showName.call (OBJ); 
  child.showName.apply (OBJ); 
  바인드하자 = child.showName.bind (obj) 등; // 返回一个函数
  묶다(); // 토니

 

우리는 다른 사람의 showName 방법을, 동적 멀티 플렉스를 달성하기 위해 최종 분석에서, 자신의 출력 상황에 맞는 도움말 정보입니다 변경

묶다

바인딩 방법이 변경의 사전에있는 것은 우리가 원하는해야 fn을하는 것입니다, 그리고 좋은 준비 해당하는 매개 변수 값은 나중에 사용하기 위해, 당신은 실행을 지시 할 수있다, 그 결합은 이러한 변화를 가리하지만, 수 적용 차이는 즉시 (예로서) 호출을 수행되지

참고 :이 방법에서 바인드는 IE6 ~ 8 호환되지 않습니다.

차

위의 세 가지 기능은 거의 세 사람이 존재해야하는 이유 때문에, 당신이 머물 수없는, 거의 같은 일을하고, 역할을 보인다. 그래서 사실 그들은 사물의 본질은 이러한 맥락에서 같은 역동적 인 변화이다, 그러나 얼마나 많은 약간의 차이가 있습니다 ..

• 전화 신청 및 결합의 차이

전화 기능의 실행 후에 컨텍스트 변경이 기능을 적용하고, 복귀 바인드 컨텍스트 변화의 함수이다.

• 차이 호출 적용

이들 사이의 차이가 두 파라미터, 호출 차이에 놓여 있고 상기 제 인수는 오브젝트 컨텍스트를 변경하는 적용하고, 두 번째 인수로부터 호출 파라미터의리스트의 형태로 표시하기 시작, 상기 콘텍스트 객체를 변경하는 것 외에도 적용 할 수있다 된 두번째 인수 파라미터 어레이.

실시 예 1 : 가장 값 어레이

arr1의 송출 = [1,2 ,. 19 ,. 6. ] 
CONSOLE.LOG (Math.max.call ( 널 , 1,2,19,6)); // . 19 
CONSOLE.LOG (Math.max.call ( 널 , arr1)); // NaN3를 
CONSOLE.LOG (Math.max.apply ( 널 , arr1)); //   . 19 arr1로 직접 전달 될 수있다

예 2 :

함수 FN () { 
    CONSOLE.LOG가 ( 이 께 ) 
} 
// 결과는 동일한 방식 적용 
()를 fn.call; // 정의 정상 모드는이 모드에서 엄격한 윈도우이다 
fn.call ( null가 ) / / 정상 모드는이 모드에서 엄격 널이 창이다 
fn.call (미정의); // 이 엄격 모드가 정의되어 정상 모드는이 윈도우이고

신청

• 배열로 더미 어레이 (객체 속성을 포함하는 길이 DOM 노드 함수 매개 인자)

JS 의사 어레이 배열 누름없이 길이 특성을 갖는, 첨자 1, 2에 의해 액세스 될 수있는 요소 ...하지만 (document.getElementsByTagName 소자를 획득하여 예컨대, 길이 속성은 객체를 포함), 팝업 그리고 다른 방법. 전화를 사용할 수, 실제 배열로 변환 적용, 배열이 방법을 사용할 수 있습니다

case1: dom节点：

<div 클래스 = "div1"> 1 </ div> 
<div 클래스 = "div1"> 2 </ div> 
<div 클래스 = "div1"> 3 </ div> 
하자 DIV = document.getElementsByTagName ( 'DIV' ) ; 
CONSOLE.LOG (DIV); // HTMLCollection (3) div.div1, div.div1, div.div1]里面包含길이属性
arr2하자 = Array.prototype.slice.call (DIV)를; 
CONSOLE.LOG (arr2); // 数组[div.div1, div.div1, div.div1]

그러나 이것은 당신이 오류가 발생합니다, IE6 ~ 8에 적용되지 않습니다 :

SCRIPT5014: Array.prototype.slice: 'this' 不是 JavaScript 对象 (报错)

그런 다음 ~ 8에서 IE6는 하나의 사이클에 의해 배열에 추가 할 수 있습니다 :

위한 ( VAR I = 0; I <oLis.length; I ++ ) { 
    진 [ary.length] = olis 분 [I]; 
}

IE6 ~ 8 표준 브라우저, 배열 - 배열 도구로 추출 된 객체 사이의 차이를 바탕으로 :

함수 listToArray (likeAry) {
     VAR의 진 = [];
    시도 { 
        워 = Array.prototype.slice.call (likeAry)를; 
    } 캐치 (E) {
         위한은 ( VAR은 I = 0; I <likeAry.length; I ++ ) { 
            진 [ary.length] = likeAry [I]; 
        } 
    } 
    반환 진; 
}

Case2 : 인수 내부의 FN

함수 fn10 () {
     반환 Array.prototype.slice.call (인자); 
} 
CONSOLE.LOG (fn10 ( 1,2,3,4,5)); // [1, 2, 3, 4, 5]

참고 : 차용하는 방법 인수 배열 호환성 문제가 없다는 것입니다.

Case3는 : 개체 속성 길이를 포함

OBJ4 송출 = {
     0 :. 1 ,
     . 1 '토마스 ,
     2 : 13이며 , 
    길이 : 3. // 길이 속성 있어야 
} 

CONSOLE.LOG (Array.prototype.slice.call (OBJ4)) // [1. "토마스"13]

• 바느질의 배열, 추가

arr1 = 송출 여기서 L, 2,3 ] 
송출 된 arr2가 = [4,5,6 ]; 

// 메소드의 CONCAT 어레이 : 반환 새로운 배열 
송출 ARR3 = arr1.concat (arr2이다) 
CONSOLE.LOG (ARR3) ; // [1,2 ,. 3 ,. 4 ,. 5 ,. 6.] 

(arr1에) CONSOLE.LOG; // [. 1,2 ,. 3 변경 
(arr2이다)를 CONSOLE.LOG 단계; // [. 4 ,. 5 ,. 6] 일정한 
// 사용 방법에 적용 
[] .push.apply (arr1가 arr2이다)를;   // 첨가 arr2는 arr1하는 
CONSOLE.LOG (arr1) // [. 1,2 ,. 3 ,. 4 ,. 5 ,. 6] 
CONSOLE.LOG을 (arr2); // 변경

• 변수 유형을 분석

arr1 = 송출 여기서 1,2,3 ] 
송출 된 STR1 = '문자열' ; 
OBJ1하자 = {이름 '토마스 }
 //이
 작동 끝나면 IsArray (OBJ)는 {
   반환 Object.prototype.toString.call (OBJ)를 == = '[배열 개체] ; 
} 
(을 Fn1 () arr1에) CONSOLE.LOG 단계; // 참 

//   실시의 형태를 결정 배열이 결정되며, 일반적인 언어 객체 널 (대해서 typeof 널 객체 때문에 같음)   
CONSOLE.LOG를 ( ) (arr1의) Object.prototype.toString.call는; // [배열 객체] 
을 console.log (Object.prototype.toString.call (str1과를)); // [오브젝트 문자열] 
을 console.log (Object.prototype.toString합니다. 전화 (OBJ1)); // [개체 개체]
CONSOLE.LOG (Object.prototype.toString.call ( 널 )); // [오브젝트 널]

 

• 전화의 사용을 확인하고 상속을 적용

함수 동물 (명) {      
     이 본 .name을 = 이름,      
     이 본 .showName = 함수 () {       
        CONSOLE.LOG ( 이 본 .name을);       
    }       
}       

함수 고양이 (이름) {     
    Animal.call ( 이 본 이름);     
}       

// 동물 .call (이) 객체가 대신 동물 개체의를 사용하는 것입니다 의미 
// 모든 속성과 동물 고양이의 방법은 아직없는 고양이가 직접 개체의 방법과 동물의 속성을 호출 할 수 있습니다 
var에 CAT = 새 새 (고양이 "토니" );      
cat.showName ();    // TONY

 

• 다중 상속

  함수 클래스 1 (a, b) {
     이 .showclass1 = 함수 (a, b) { 
      CONSOLE.LOG (클래스 1 '$ {A}, {B} $'); 
    } 
  } 

  함수 Class2의 (a, b) {
     이 .showclass2 = 함수 (a, b) { 
      CONSOLE.LOG ( 'Class2의 $ {A}, {B} $'); 
    } 
  } 

  함수 강좌 3 (A, B, C) { 
    Class1.call ( 이 ); 
    Class2.call ( 이 ); 
  } 

  arr10하자 = [2,2 ]; 
  데모하자 = 새로운 강좌 3을 (); 
  demo.showclass1.call ( 이 , 1);// 클래스 1 : 1, 미정 
  demo.showclass1.call ( 이 , 1,2); // 클래스 1 : 1,1 
  demo.showclass2.apply ( 이 , arr10); // Class2의 : 1,2

若以上内容有不妥之处，还望指正，谢谢。

참고 : HTTPS : //juejin.im/post/5a9640335188257a7924d5ef