js execution context variables, functions, this

This article mainly introduces about js execution context variables, functions, and this. It has certain reference value. Now I share it with you. Friends in need can refer to

Execution in JavaScript Context and call stack

ES6 variable scope and promotion: detailed explanation of the life cycle of variables

Variable promotion

• The definition of variables is in the code When preparsing, define at the top of the scope

• No var No variable promotion

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';

Function promotion

• The definition of the function is defined at the top of the scope during code pre-parsing

• The function assignment is at the top of the scope

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('变量'); }

Function context Relationship

• The context of a function is determined when it is defined

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

this Context

• this The context relationship is determined at execution time

Normal function call, this points to the window

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

method call, this points to the calling object

// 在对象里
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

constructor function Call, this points to the object generated by new

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

apply / call Call

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

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

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

dom’s event attribute

// 点击后输出 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>

The above is the entire content of this article, I hope it will help everyone learn Helpful, please pay attention to the PHP Chinese website for more related content!

Related recommendations:

JS and JQ realize focus chart carousel effect

js realizes editing by clicking the button

About JS Introduction to inheritance

The above is the detailed content of js execution context variables, functions, this. For more information, please follow other related articles on the PHP Chinese website!