ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript でのメソッド呼び出しの詳細な紹介

JavaScript でのメソッド呼び出しの詳細な紹介

PHPz
リリース: 2018-09-29 17:56:42
オリジナル
1170 人が閲覧しました

この記事では、JavaScript におけるメソッド呼び出しについて詳しく紹介します。JavaScript では、関数がオブジェクトに属している場合、そのオブジェクトを介して関数にアクセスすることを「メソッド呼び出し」と呼びます。 。

JavaScriptでは、関数がオブジェクトに属している場合、そのオブジェクトを介して関数にアクセスする行為を「メソッド呼び出し」と呼びます。通常の関数呼び出しとは異なり、メソッド呼び出しを行うと、関数内の this 参照が変更されます。これは、関数の呼び出しに使用されるオブジェクトを参照します (オブジェクトはメソッド呼び出しの呼び出しコンテキストになります):

var x = 99;
var sample = {
  x:1,
  act:function(a){
    this.x = a*a;//assign value to sample's x, not global object's x.
  }
}
sample.act(6);
console.log(sample.x);//36
console.log(x);//9
ログイン後にコピー

オブジェクトのプロパティにアクセスするのと同じように、ドット演算子を使用するだけでなく、JavaScript はブラケット演算子を使用してメソッド呼び出しを行うこともできます。

//other ways to invoke method
sample["act"](7);
console.log(sample.x);//4
ログイン後にコピー

JavaScript の関数の場合、より興味深い動作です。それは、関数 (クロージャ) を関数に埋め込むことができるということです。メソッド呼び出しを行うとき、メソッド関数に埋め込み関数がある場合、埋め込み関数内のコードは外部変数値にアクセスできます:

//nested function can access variable outside of it.
var y = 88;
var sample2 = {
  y:1,
  act2:function(a){
    this.y = inner();
    function inner(){
      return a*a;
    }
  }
}
sample2.act2(8);
console.log(sample2.y);//64
console.log(y);//88
ログイン後にコピー

ただし、直感に反して、埋め込み関数はコード内のコードはこれを外部から継承できません。つまり、埋め込み関数では、メソッドを呼び出すオブジェクトではなく、グローバル オブジェクトを参照します。

//nested function does not inherit "this". The "this" in nested function is global object
var sample3 = {
  act3:function(){
    inner();
    function inner(){
      console.log(this);//window object
    }
  }
}
sample3.act3();
ログイン後にコピー

本当に必要な場合関数を埋め込む メソッドを呼び出すオブジェクトにアクセスするには、この値を外部関数の変数に保存します。

//pass "this" to nested function
var sample4 = {
  act4:function(){
    var self = this;
    inner();
    function inner(){
        console.log(self);//Object {act4=function()}
    }
  }
}
sample4.act4();
ログイン後にコピー

上記はこの章の全内容です。さらに関連するチュートリアルについては、こちらをご覧ください。 JavaScript ビデオ チュートリアル !

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート