JavaScript_javascript 스킬의 apply() 메소드와 call() 메소드 사용 소개

1. 각 함수에는 상속되지 않은 두 가지 메서드인 apply()와 call()이 포함되어 있습니다.
2. 목적은 동일하며 모두 특정 범위의 함수를 호출합니다.
3. 매개변수 수신 측면에서 다릅니다. apply()는 두 개의 매개변수를 받습니다. 하나는 함수가 실행되는 범위(this)이고 다른 하나는 매개변수 배열입니다.
call() 메소드의 첫 번째 매개변수는 apply() 메소드와 동일하지만, 함수에 전달되는 매개변수가 나열되어야 합니다.
예시 1:

코드 복사 코드는 다음과 같습니다.

window.firstName = "diz ";
window.lastName = "song";
var myObject = { firstName: "my", lastName: "Object" }
function HelloName() {
console.log ("안녕하세요 " this.firstName " " this.lastName, " 만나서 반가워요!")
}
HelloName.call(window) //huo .call(this); call(myObject );

실행 결과는 다음과 같습니다.
안녕하세요 노래 반가워요!
안녕하세요 내 개체 만나서 반가워요!
예 2:

코드 복사 코드는 다음과 같습니다.

function sum(num1, num2) {
return num1 num2;
}
console.log(sum.call(window, 10, 10)); //20
console.log(sum.apply(window,[10,20])); //30

분석: 예제 1에서 apply() 및 call()의 실제 사용은 기존 메서드를 사용하려는 경우 함수가 실행되는 범위를 확장하는 것임을 알았습니다. 이를 달성하려면 아래 코드를 참조하세요.

코드 복사 코드는 다음과 같습니다.

window.firstName = "diz";
window.lastName = "song";
var myObject = { firstName: "my", lastName: "Object" }; console.log("Hello " this.firstName " " this.lastName, " 만나서 반가워요!")
}
HelloName() //안녕하세요 노래
myObject .HelloName = HelloName;
myObject.HelloName(); //Hello my Object 만나서 반가워요!


빨간색 코드를 보면 myObject 객체의 HelloName() 함수를 사용하려면 HelloName() 함수에 대한 포인터 역할을 하는 myObject의 HelloName 속성을 동적으로 생성해야 합니다. 이러한 방식으로 myObject.HelloName()을 호출하면 this 변수가 함수는 myObject를 가리키며 객체의 다른 내부 공용 속성을 호출할 수 있습니다.
예제 2를 분석해보면 call(), apply() 함수의 실제 적용 모습을 볼 수 있는데, 실제 프로젝트에서는 상황에 따라 유연하게 처리해야 합니다!

작은 질문: 함수에서 함수를 정의할 때 이 변수를 다시 살펴보세요

코드 복사 코드 function temp1() {

console.log(this) //Object {}

function temp2() {
console.log(this) ; //Window
}
temp2();
}
var Obj =
temp1.call(Obj); //실행 결과는 위의 녹색 주석을 참조하세요. ! ! !


실행 결과는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. 다음: function temp1() {

console.log(this);

temp2()
}
function temp2() {
console. log(this);
}
var Obj = {};
temp1.call(Obj)

4.bind() 메서드 🎜> 이 방법의 탐색 지원 장치에는 IE9, Firefox4, Safari5.1, Opera12 및 Chrome이 포함됩니다. ECMAScript5에 속하는 메소드입니다. 예시를 직접 살펴보겠습니다.

코드 복사

코드는 다음과 같습니다.

window.color = " red"; var o = { color: "blue" }; function sayColor(){ alert(this.color) var OSayColor = sayColor.bind(o );

OSayColor(); //blue

여기서 sayColor()는 바인딩() 메서드를 호출하고 o 객체를 전달하며 OSayColor( ) 함수, OSayColor()에서 this의 값은 o 객체입니다.