함수 몸체의 내부 지점을 변경하는 자바스크립트의 응용 및 호출 사용법에 대한 자세한 설명

호출 및 적용 두 가지 모두 컨텍스트 즉, 함수가 실행될 때 컨텍스트를 변경하기 위해 존재합니다. 즉, 함수 본문 내에서 this의 포인터를 변경하는 것입니다.

call 및 apply ​​​​기능은 완전히 동일하지만 매개변수를 받아들이는 방식이 다릅니다.

메서드 정의
apply
Function.apply(obj,args) 메소드는 두 개의 매개변수를 받을 수 있습니다.

obj:이 객체는 함수 클래스의 이 객체를 대체합니다

args:This 배열이거나 배열과 유사하며 적용 메서드는 이 컬렉션의 요소를 호출된 함수에 대한 매개 변수로 전달합니다.

call

call 메소드의 첫 번째 매개변수는 apply 메소드와 동일합니다. 단, 두 번째 매개변수는 매개변수 목록

비엄격 모드에서 첫 번째 매개변수가 null 또는 정의되지 않은 값으로 전달되면 함수 본문의 this는 브라우저에서 window

var test = function(){
  console.log(this===window);
}
test.apply(null);//true
test.call(undefined);//true

Usage

"다른 사람의 메서드를 "하이재킹"합니다

인 기본 호스트 개체를 가리킵니다. time foo의 logName 메소드는 bar에서 참조되며, this는 상속을 구현하기 위해 bar

var foo = {
  name:"mingming",
  logName:function(){
    console.log(this.name);
  }
}
var bar={
  name:"xiaowang"
};
foo.logName.call(bar);//xiaowang

을 가리킵니다.

function Animal(name){   
  this.name = name;   
  this.showName = function(){   
    console.log(this.name);   
  }   
}   

function Cat(name){  
  Animal.call(this, name);  
}   

var cat = new Cat("Black Cat");   
cat.showName(); //Black Cat

자주 실수로 변경된 장면을 만났습니다.
로컬 fun 메서드가 있습니다. fun이 일반 함수로 호출되면 fun 내부의 this가 window를 가리키지만 우리는 종종 #test 노드를 가리키기를 원합니다. 다음 코드:

window.id="window";
document.querySelector('#test').onclick = function(){
  console.log(this.id);//test
  var fun = function(){
    console.log(this.id);
  }
  fun();//window
}

call,apply ​​​​를 사용하면 이 문제를 쉽게 해결할 수 있습니다

window.id="window";
document.querySelector('#test').onclick = function(){
  console.log(this.id);//test
  var fun = function(){
    console.log(this.id);
  }
  fun.call(this);//test
}

물론 이 작업도 수행할 수 있지만 ECMAScript 5의 strict 모드에서는 , 이 경우 전역 개체를 가리키지 않도록 규정되었지만 undefine:

window.id="window";
document.querySelector('#test').onclick = function(){
  var that = this;
  console.log(this.id);//test
  var fun = function(){
    console.log(that.id);
  }
  fun();//test
}

function func(){
  "use strict"
  alert ( this );  // 输出：undefined
}
func();

위 내용은 함수 몸체의 내부 지점을 변경하는 자바스크립트의 응용 및 호출 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!