자바스크립트 호출에 대한 자세한 설명

이번에는 call in javascript에 대한 자세한 설명을 가져오는데요, call in javascript 사용 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

먼저 함수 자체에 다음과 같은 속성이 있다는 점을 이해해야 합니다.

길이: 형식 매개변수 수
이름: 함수 이름; 클래스, 프로토타입에 정의된 메소드 그들은 모두 이 클래스의 현재 인스턴스의 공개 메소드입니다.
proto: 함수를 일반 객체로 취급하고 Function 클래스의 프로토타입을 가리킵니다.
함수는 가장 복잡하고 중요한 지식입니다. 전체 JavaScript에는 여러 역할이 있습니다:

function Fn() {
    var num = 500;    this.x = 100;
}
Fn.prototype.getX = function () {
    console.log(this.x);
}
Fn.aaa = 1000;var f = new Fn;
f.num // undefinedf.aaa // undefined12345678910111213
var res = Fn(); // res是undefined Fn中的this是window

Role 1: 일반 함수. Fn의 경우 실행되면 개인 범위가 형성되고 형식적인 매개변수가 할당됩니다. 메모리가 소멸된 후 사전 파싱, 코드 실행 및 실행 완료가 수행됩니다.

역할 2: 클래스는 자체 인스턴스를 가지며, f는 Fn이 클래스로 생성한 인스턴스이며 속성도 있습니다. 자체 프로토타입인 프로토타입이라고 하며 해당 인스턴스는 자체 프로토타입을 가리킬 수 있습니다.

역할 3: 일반 객체, Fn은 var obj = {}의 obj와 동일하며 일반 객체입니다(모든 함수는 함수) 객체로서 자체적인 개인 속성을 가질 수도 있고 proto를 통해 전달될 수도 있습니다. Function.prototype

함수의 세 가지 역할을 찾으세요. 대부분의 학생들은 역할 1과 역할 2에 대해 의심하지 않을 것입니다. , 그러나 역할 3에 대해 약간의 의구심을 가질 수 있으므로 이해하기 위해 그림을 그립니다.

일반 객체로서의 기능.png

심층 호출

call의

기본 사용

var ary = [12, 23, 34]; 
ary.slice();

위 두 가지의 실행 프로세스 간단한 코드 라인은 다음과 같습니다. ary 이 인스턴스는 프로토타입 체인의 검색 메커니즘을 통해 Array.prototype에서 슬라이스 메소드를 찾고, 발견된 슬라이스 메소드가 실행되도록 하며, 슬라이스 메소드 실행 중에 ary 배열이 차단됩니다.

참고: 슬라이스 메서드가 실행되기 전에 프로토타입을 검색하는 과정이 있습니다(현재 인스턴스에서 찾을 수 없는 경우 프로토타입 체인에 따라 검색됩니다).

객체에서 메서드를 호출하는 검색 프로세스가 있다는 것을 알고 나면 다음을 살펴보겠습니다.

var obj = {name:’iceman’}; 
function fn() { 
console.log(this); 
console.log(this.name); 
} 
fn(); // this –> window 
// obj.fn(); // Uncaught TypeError: obj.fn is not a function 
fn.call(obj);

호출 메서드의 역할: 먼저 호출 메서드를 찾고 마지막으로 개체의 프로토타입에서 호출 메서드를 찾습니다. 프로토타입 체인을 통해 함수를 만든 다음 호출 메서드를 실행하도록 하고, 호출 메서드를 실행할 때 fn 메서드에서 이를 첫 번째 매개변수 값인 obj로 변경하고 마지막으로 fn 함수를 실행합니다.

2.2. 호출 메서드의 원리

Function에 내장된 호출 메서드를 시뮬레이션하고, myCall 메서드를 작성하고, 호출 메서드의 실행 원리를 살펴보세요

function sum(){
    console.log(this);
}function fn(){
    console.log(this);
}var obj = {name:'iceman'};Function.prototype.myCall = function (context) {
    // myCall方法中的this就是当前我要操作和改变其this关键字的那个函数名
    // 1、让fn中的this关键字变为context的值->obj
    // 让this这个函数中的"this关键字"变为context
    // eval(this.toString().replace("this","obj"));
    // 2、让fn方法在执行
    // this();};1234567891011121314151617

fn.myCall(obj);//원본 this myCall 메소드에서 fn

sum.myCall(obj);//myCall 메소드의 원래 this는 sum
fn.myCall(obj); 코드 행이 실행되면 이에 대한 검색 규칙에 따라 다음이 있습니다. myCall 메소드 앞에 "."가 붙은 다음 myCall이 fn입니다. myCall 메서드를 실행하려면 첫 번째 단계에서 메서드 본문의 this가 들어오는 개체로 대체되고 원본 this가 실행됩니다. 참고: 원본 this가 실행됩니다. 학습) 이 기사에서는 fn이 실행됩니다.

위 문단을 읽고 조금 혼란스러우셨나요? 하하, 이해하기 위해 다음 예를 살펴보겠습니다.

호출 방법의 전형적인 예

function fn1() {
    console.log(1);
}function fn2() {
    console.log(2);
}123456

출력 1

fn1.call(fn2); // 1

먼저, fn1은 프로토타입 체인 검색 메커니즘을 통해 Function.prototype에서 호출 방법을 찾고 호출 방법을 실행하게 합니다. 이때 호출 방법에 있는 것은 다음과 같습니다. fn1이 작동됩니다. 호출 메서드 코드를 실행하는 동안 먼저 fn1의 "this 키워드"를 fn2로 변경한 다음 fn1 메서드를 실행하도록 합니다.

참고: 호출 메서드를 실행할 때 fn1의 this는 실제로 fn2로 변경되지만 fn1의 메서드 본문에 출력되는 콘텐츠에는 이와 관련된 콘텐츠가 포함되지 않으므로 여전히 1이 출력됩니다.

Output 2

fn1.call.call(fn2); // 2

먼저 fn1은 프로토타입 체인을 통해 Function.prototype에 대한 호출 메서드를 찾은 다음 호출 메서드가 프로토타입을 통해 Function 프로토타입에 대한 호출을 찾도록 합니다(call의 값 자체도 함수이기 때문에 Function.prototype). ), 호출이 두 번째로 발견되면 메서드가 실행되도록 합니다. 먼저 이 메서드에서 이를 fn2로 변경한 다음 fn1.call을 실행합니다.

이 예는 약간 복잡하지만 차근차근 이해해 보세요. 처음에는 fn1.call.call(fn2) 코드 줄의 마지막 호출에 있는 this가 fn1.call입니다. 이전 이해를 바탕으로 fn1.call의 원리는 대략 다음과 같습니다.

Function.prototype.call = function (context) {
    // 改变fn中的this关键字
    // eval(....);
    // 让fn方法执行
    this(); // 此时的this就是fn1};1234567

위의 코드를 다른 형식으로 작성:

Function.prototype.call = test1;function test1 (context) {
    // 改变fn中的this关键字
    // eval(....);
    // 让fn方法执行
    this(); // 此时的this就是fn1};12345678

우리는 이 두 가지 형식의 작성이 동일한 효과를 갖는다는 것을 알고 있습니다. 그런 다음 이때 fn1.call.call(fn2)을 test1.call(fn2)로 작성할 수 있으며 호출에서 이는 test1입니다.

Function.prototype.call = function (context) {
    // 改变fn中的this关键字
    // eval(....);
    // 让fn方法执行
    this(); // 此时的this就是test1};1234567

참고: 현재 호출에서 이는 test1입니다.

그런 다음 호출에서 이것을 fn2로 바꾸면 test1 메서드는 다음과 같습니다.

Function.prototype.call = function (context) {
    // 省略其他代码
    fn2(); 
};12345

所以最后是fn2执行，所以最后输出2。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

spring boot的定时任务应该如何使用

javaScript使用call和apply

위 내용은 자바스크립트 호출에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!