js実行コンテキスト変数、関数、これ

この記事では、主に js の実行コンテキスト変数、関数、およびこれを紹介します。これには、必要な友達が参照できるように共有します

ES6 変数のスコープと巻き上げ: 変数のライフサイクルの詳細な説明

変数の巻き上げ

変数の定義は、コードの事前解析中にスコープの先頭で定義されます
No var 変数の巻き上げなし

• console.log(a);  // undefined，如果没有定义会直接报错
  var a = 'aaa';
  console.log(a);  // aaa
  
  // 下面代码全等于上面代码
  var a;  // 变量提升，函数作用域范围内
  console.log(a);  // undefined
  a = 'aaa';
  console.log(a);  // aaa
  
  console.log(a);  // 直接报错
  a = 'aaa';

関数ホイスティング

関数の定義は、コードの事前解析中にスコープの先頭で定義されます
関数の割り当てはスコープの先頭で行われます

• console.log(f1);  // f1() { console.info('函数'); }
  var f1 = function() { console.info('变量'); }
  console.log(f1);  // ƒ () { console.info('变量'); }
  function f1() { console.info('函数'); }
  console.log(f1);  // ƒ () { console.info('变量'); }
  
  // 下面代码全等于上面代码
  var f1;  // 定义提升
  function f1() { console.info('函数'); }  // 函数顶部赋值
  console.log(f1);  // f1() { console.info('函数'); }
  f1 = function() { console.info('变量'); }
  console.log(f1);  // ƒ () { console.info('变量'); }
  console.log(f1);  // ƒ () { console.info('变量'); }

関数コンテキスト

関数のコンテキストは定義時に決定されます

• var scope = "global scope";
  function checkscope() {
    var scope = "local scope";
    function f() { return scope; }
    return f;
  }
  checkscope()();  // local scope

このコンテキスト関係

このコンテキスト関係は実行時に決定されます
通常の関数呼び出し、これは window

// 在 function 里
function test() {
    var type = this === window;
    return type;
}
test();  // true

メソッド呼び出しを指します、これは呼び出し元のオブジェクト

// 在对象里
var obj = {
    test: function() {
        var type = this === obj;
        return type;
    }
};
obj.test();  // true

// 在 prototype 对象的方法中
function obj() {
}
obj.prototype.test = function() {
    return this;
}
var o = new obj();
o.test() === o;  // true

コンストラクター関数の呼び出しを指します、これは新しい世代を指します オブジェクト

// 调用 new 构造对象时
function obj() {
    this.test = function() {
        return this;
    }
}
var o = new obj();
o.test() === o;  // true

apply / callは

function test() {
    return this;
}
var o = {};

// apply
test.apply(o) === o;  // true

// call
test.call(o) === o;  // true

domのイベント属性を呼び出します

// 点击后输出 true
<input id="a" type="text" onclick="console.info(this === document.getElementById(&#39;a&#39;))" />

// 点击后输出 true
<input id="a" type="text" />
<script type="text/javascript">
    document.getElementById(&#39;a&#39;).addEventListener("click", function(）{
        console.info(this === document.getElementById(&#39;a&#39;));
    });
</script>

// 点击后输出 true
<input id="a" type="text" />
<script type="text/javascript">
    document.getElementById(&#39;a&#39;).onclick = function(）{
        console.info(this === document.getElementById(&#39;a&#39;));
    });
</script>

以上がこの記事の全内容だと思います。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

JSとJQはフォーカスチャートのカルーセル効果を実現します

jsはボタンをクリックすることで編集を実現します

JSについて 継承の紹介

以上がjs実行コンテキスト変数、関数、これの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。