JavaScriptでの呼び出しの詳細説明

今回は、JavaScriptでの呼び出しについて詳しく説明し、JavaScriptで呼び出しを使用する際の注意事項について、実際のケースを見てみましょう。

まず、関数自体が次のような独自の

属性 を持っていることを理解する必要があります。

length: 仮パラメータの数;

prototype: 関数のプロトタイプ。クラス、プロトタイプで定義されたメソッド これらはすべて、このクラスの現在のインスタンスのパブリック メソッドです
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

役割 1: Fn の場合、それは通常の関数そのものであり、実行されると、プライベート スコープが形成され、その後、仮のパラメーターが割り当てられます。メモリが破壊された後、事前解析、コード実行、および実行完了が実行されます。

役割 2: クラスは独自のインスタンスを持ち、f は Fn によってクラスとして生成されたインスタンスであり、属性もあります。独自のプロトタイプであるプロトタイプと呼ばれ、そのインスタンスは独自のプロトタイプを指すことができます。

役割 3: 通常のオブジェクト、Fn は var obj = {} の obj と同じであり、通常のオブジェクトです (すべての関数は のインスタンスです)。 Function) は、オブジェクトとして、独自のプライベート プロパティを持つことも、proto を介して渡すこともできます。 Function.prototype

関数の上記 3 つの役割を見つけてください。ほとんどの学生は、役割 1 と役割 2 について疑問を持たないでしょう。 、しかし、彼らは役割 3 について少し疑問を持っているかもしれないので、理解するために絵を描いてください:

通常のオブジェクトとしての機能.png

詳細な呼び出し

call の

基本的な使い方

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

上記 2 つの実行プロセス単純なコード行は次のとおりです。 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);

call メソッドの役割: 最初に call メソッドを探し、最後にそのプロトタイプで call メソッドを見つけます。プロトタイプチェーンを介して関数を実行し、呼び出しメソッドを実行させます。呼び出しメソッドを実行するときに、fn メソッド内のこれを最初のパラメーター値 obj に変更し、最後に fn 関数を実行します。

2.2. callメソッドの原理

Functionで組み込みのcallメソッドをシミュレートし、myCallメソッドを記述し、callメソッドの実行原理を調べます

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 in myCall メソッドは fn

sum.myCall(obj);//myCall メソッドの元の this は sum です

コード行の fn.myCall(obj) が実行されると、this の検索ルールに従って、 myCall メソッドの前に「.」を追加し、次に myCall This を 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。 call メソッドのコードの実行中に、まず fn1 の「this キーワード」を fn2 に変更してから、fn1 メソッドを実行します。

注: call メソッドを実行すると、fn1 の this は確かに fn2 に変更されますが、fn1 のメソッド本体の出力内容にはこれに関連する内容が含まれていないため、依然として 1 が出力されます。

出力 2

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

まず、fn1 はプロトタイプ チェーンを通じて Function.prototype の call メソッドを見つけ、次に call メソッドにプロトタイプを通じて Function プロトタイプの呼び出しを見つけさせます (call 自体の値も関数であるため、Function.prototype になります)。 )、2 回目に call が見つかったときにメソッドを実行します。まず、このメソッドの this を 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

これら 2 つの形式の記述は同じ効果があることがわかっています。次に、この時点で fn1.call.call(fn2) を test1.call(fn2) として記述することができ、呼び出し内の this は test1 になります:

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

注: 現時点では、呼び出し内の this は test1 です。

次に、呼び出し内でこれを fn2 に置き換えると、test1 メソッドは次のようになります:

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

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

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

推荐阅读：

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

javaScript使用call和apply

以上がJavaScriptでの呼び出しの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。