js execution context variables, functions, this-JS Tutorial-php.cn

js execution context variables, functions, this

不言

Release： 2018-07-05 17:25:21

Original

2020 people have browsed it

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 = &#39;aaa&#39;;
console.log(a);  // aaa

// 下面代码全等于上面代码
var a;  // 变量提升，函数作用域范围内
console.log(a);  // undefined
a = &#39;aaa&#39;;
console.log(a);  // aaa

console.log(a);  // 直接报错
a = &#39;aaa&#39;;

Copy after login

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(&#39;函数&#39;); }
var f1 = function() { console.info(&#39;变量&#39;); }
console.log(f1);  // ƒ () { console.info(&#39;变量&#39;); }
function f1() { console.info(&#39;函数&#39;); }
console.log(f1);  // ƒ () { console.info(&#39;变量&#39;); }

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

apply / call Call

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

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

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

Copy after login

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>

Copy after login

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!