JavaScript var と this、{} と function

今回は JavaScript の var と this、{} と function、JavaScript を使用する際の注意事項とは何ですか var と this、{} と function、実際のケースを見てみましょう見てください。

JavaScript var は変数を定義するために使用され、プロパティやメソッドを定義したり呼び出したりするためによく使用されます。しかし、グローバル スコープでは、this と var変数を定義する は同等です。

window

 console.log('window:', name); var name = 'stone'; this.name = 'niqiu';
 console.log('var:',name);
 console.log('this:',this.name);

windowオブジェクトにはname属性があり、初期値は空ですが、最初のコンソールで値を取得する方法。 このウィンドウには最後の値が記録されていることがわかります。ページを再度開き、console.log('window:', name); を実行すると、出力は空になります。

  console.log('window:', name);  var name = 'stone';

リフレッシュ2回出力石を実行すると、ウィンドウオブジェクトは再作成されません。 window は {} オブジェクトです。 コンストラクターは存在しないため、新規にすることはできません。

関数と{}

関数内では、var でローカル変数を定義し、これで属性を定義します。この 2 つはカバーされていません。ただし、新しく作成されたオブジェクトはローカル変数を取得できません。

     var Fool = function () {            var name = 'stone';            var nikename = 'stoneniqiu';            this.name = 'niqiu';            this.getName = function () {
                console.log('var', name);
                console.log('this', this.name);
            };            this.getNickname = function() {                return nikename;
            };
        };

rree

しかし、{} を使用してオブジェクトを定義すると、すべての内部変数がプロパティになります。

    console.log(f.name); //niqiu
    console.log(f.nikename);//undefined
    console.log(f.getNickname());//stoneniqiu

window オブジェクトと同様、{} によって作成されたオブジェクトはコンストラクターがないため、新しいオブジェクトにすることはできません。

したがって、オブジェクトが再利用され、比較的大きい場合は、関数形式を使用してプライベート変数とパブリック プロパティまたはメソッドを分離することをお勧めします。関数の内部モジュールは、{} の形式にすることができます。

これによって所属するコンテキストを取得できるメソッドをパブリックメソッドと呼びます。この「超」遅延バインディングにより、関数は this を高度に再利用できます。

これは、変更を避けるために、現在実行されているオブジェクトを参照します。これを一時的に保存するには変数がよく使用されます。

  var block = {
            name: 'stone',
            nickname:'stoneniqiu',
            getName: function () {                // return this.name;//stone
                return name; //'windows name';            },
            getNickname:function() {                return this.nickname;
            },
            printAllName:function() {
                console.log(this.getNickname());
                console.log(this.getName());
            }
        };
       console.log(block.name);//stone
       console.log(block.getName()); //windows name

魔法のコールバック

以下の例を見てみましょう。コールバック メソッドはオブジェクトのパラメータで定義されていますが、実際には Fool 自体に渡したメソッドが実行されました。

var self=this

はエラーなしで実行されます。ボタンをクリックして getName メソッド をトリガーします。しかし、このように直接書くとエラーが報告されますが、これはごく常識です。

 var Fool = function (config) {           var parmas = {
               callback: function() {
                   console.log('raw callback');
               }
           };
           parmas = $.extend(parmas, config);           var name = 'stone';           var nikename = 'stoneniqiu';           this.name = 'niqiu';           this.getName = function () {
               console.log('var', name);
               console.log('this', this.name);
           };           this.getNickname = function () {               return nikename;
           };           this.doSomething = function () {
               parmas.callback();
           };
       };       var f = new Fool({callback:function() {
           $("#bt").click(function() {               f.getName()
           });
       }});
       f.doSomething();

再度修正して匿名関数でラップすると実行できるようになります。

 var f = new Fool({callback:f.getName()});

これは実際にはクロージャの問題であることがわかりました。関数内で実行される f.getName() は、関数が構築された時点の f ではなく、外部の f をバインドします。したがって、匿名関数では、ビルドでは f が作成されるかどうかは関係ありません。これは、次の古典的な問題と同等です:

var f = new Fool({callback:function() {             (function() {
               f.getName();
            })();
       }});
       f.doSomething();

上記のメソッドが実行されると、ループ終了後のバインディングは i になります。その瞬間に i をループする代わりに。上記のループ内のコードを次のように変更すると、

var addhandle=function(node){var ifor(i=0;i<node.length;i++){
 node[i].onclick=function(e){
 alert(i);
} 
}
}

は関数を構築するときの変数 i です。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

JavaScript イベント管理

jQuery、Angular、node における Promise の詳細な説明

以上がJavaScript var と this、{} と functionの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。