JS(호출, 적용, 바인딩)_javascript 기술에서 이 포인터를 변경하는 방법

이것은 JavaScript의 키워드입니다. 함수가 다른 상황에서 사용됨에 따라 이 값이 변경됩니다. 그러나 항상 원칙이 있습니다. 즉, 함수를 호출하는 객체를 참조한다는 것입니다.

일반적으로 현재 수신자를 가리키지만 다른 방법으로 변경할 수도 있습니다. 아래에 세 가지 방법을 소개합니다.

1. 상속으로 사용하는 경우:

function Parent(age){
this.name=['mike','jack','smith'];
this.age=age;
}
function Child(age){
Parent.call(this,age);//把this指向Parent,同时还可以传递参数
}
var test=new Child(21);
console.log(test.age);//21
console.log(test.name);
test.name.push('bill');
console.log(test.name);//mike,jack,smith,bill

2. call과 apply 모두 을 가리키도록 변경할 수 있지만 apply의 두 번째 매개변수는 해시 분포이고 call은 배열일 수 있습니다.

console.log(Math.max.apply(null,[1,2,3,4]));//4

apply() 메서드는 두 개의 매개변수를 받습니다. 하나는 함수를 실행할 범위이고 다른 하나는 매개변수 배열입니다. 그 중 두 번째 매개변수는 Array의 인스턴스이거나 인수 객체일 수 있습니다. call() 메소드는 apply() 메소드와 동일한 효과를 가지며, 매개변수를 수신하는 방식만 다릅니다. 통화용()
메서드에 관한 한 첫 번째 매개변수의 this 값은 변경되지 않습니다. 변경된 점은 나머지 매개변수가 함수에 직접 전달된다는 것입니다. 즉, call() 메소드를 사용할 때 함수에 전달되는 매개변수를 하나씩 열거해야 한다.

3.ES5는 함수의 인스턴스를 생성하는 :bind() 메서드도 정의하고 해당 this 값은 바인딩() 함수 값에 바인딩됩니다. .

등

window.color='red';
var o={color:'blue'};

function sayColor(){
console.log(this.color);
}
var objectSaycolor=sayColor.bind(o);
//var objectSaycolor=sayColor.bind();
objectSaycolor();//blue

여기서 sayColor()는 바인딩()을 호출하고 객체 o를 전달하여 objectSayColor() 함수를 생성합니다. objectSayColor() 함수의 this 값은 o와 같으므로 전역 범위에서 이 함수를 호출하더라도 파란색으로 표시됩니다.

위는 JS에서 이 포인터를 변경하기 위해 에디터가 소개하는 방법(호출, 적용, 바인드)입니다. 도움이 되셨으면 좋겠습니다!

아직 시간이 남아서 몇 가지 기본 지식을 알려드리겠습니다: call()과 apply()의 차이점

1. 방법의 정의

통화 방법:

구문: call(thisObj, Object)

정의: 현재 개체를 다른 개체로 대체하려면 개체의 메서드를 호출합니다.

지침:

호출 메소드를 사용하면 다른 객체를 대신하여 메소드를 호출할 수 있습니다. call 메소드는 함수의 객체 컨텍스트를 초기 컨텍스트에서 thisObj가 지정한 새 객체로 변경합니다.

thisObj 매개변수가 제공되지 않으면 전역 개체가 thisObj로 사용됩니다.

신청방법 :

구문: apply(thisObj, [argArray])

정의: 객체의 메소드를 적용하여 현재 객체를 다른 객체로 대체합니다.

설명:

argArray가 유효한 배열이 아니거나 인수 객체가 아닌 경우 TypeError가 발생합니다.
argArray나 thisObj가 모두 제공되지 않으면 전역 개체가 thisObj로 사용되며 매개 변수를 전달할 수 없습니다.

코드 예:

function Animal(name) {
   this.name = name;
   this.showName = function() {
     console.log(this.name);
   };
 }
 function Cat(name) {
   Animal.call(this, name);
 }
 Cat.prototype = new Animal();
 function Dog(name) {
   Animal.apply(this, name);
 }
 Dog.prototype = new Animal();
 var cat = new Cat("Black Cat"); //call必须是object
 var dog = new Dog(["Black Dog"]); //apply必须是array
 cat.showName();
 dog.showName();
 console.log(cat instanceof Animal);
 console.log(dog instanceof Animal);

통화 시뮬레이션, 이 대체 적용

 function Animal(name) {
   this.name = name;
   this.showName = function() {
     alert(this.name);
   };
 };
 function Cat(name) {
   this.superClass = Animal;
   this.superClass(name);
   delete superClass;
 }
 var cat = new Cat("Black Cat");
 cat.showName();