JavaScript에서 상속되지 않은 두 가지 메서드의 사용 예에 ​​대한 자세한 설명

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("Hello " + this.firstName + " " + this.lastName, " glad to meet you!"); 
} 
HelloName.call(window); //huo .call(this); 
HelloName.call(myObject);

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

Hello diz song glad to meet you! 
Hello my Object glad to meet you!

예 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()의 실제 사용은 Scope를 실행하도록 함수를 확장하는 것임을 알았습니다. , 전통적인 방법을 사용하여 구현하려면 아래 코드를 참조하세요.

window.firstName = "diz"; 
window.lastName = "song"; 
var myObject = { firstName: "my", lastName: "Object" }; 
function HelloName() { 
console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!"); 
} 
HelloName(); //Hello diz song glad to meet you! 
myObject.HelloName = HelloName; 
myObject.HelloName(); //Hello my Object glad to meet you!

빨간색 코드를 보면 myObject 개체에서 HelloName() 함수의 범위를 만들기 위해 다음이 필요하다는 것을 알았습니다. 동적으로 myObject 생성 HelloName 특성은 HelloName() 함수에 대한 포인터 역할을 합니다. 이러한 방식으로 myObject.HelloName()을 호출하면 함수 내부의 this 변수가 myObject를 가리키고 객체의 기타 내부 공용 속성이 될 수 있습니다. 라고 불리는.
예제 2를 분석해보면 call(), apply() 함수의 실제 적용 모습을 볼 수 있는데, 실제 프로젝트에서는 상황에 따라 유연하게 처리해야 합니다!
작은 질문: 함수에서 함수를 정의할 때 this 변수를 다시 한 번 살펴보세요.

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);

위 내용은 JavaScript에서 상속되지 않은 두 가지 메서드의 사용 예에 ​​대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!