javascript 中的执行上下文和调用栈
es6 变量作用域与提升：变量的生命周期详解
变量提升变量的定义在代码预解析时，在作用域顶部定义
无 var 没有变量提升
console.log(a); // undefined，如果没有定义会直接报错var a = 'aaa';console.log(a); // aaa// 下面代码全等于上面代码var a; // 变量提升，函数作用域范围内console.log(a); // undefineda = 'aaa';console.log(a); // aaaconsole.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
this 上下文关系this 的上下文关系在执行时确定
正常函数调用，this 指向 window// 在 function 里function test() { var type = this === window; return type;}test(); // true
方法调用，this 指向调用对象// 在对象里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
构造器函数调用，this 指向 new 生成的对象// 调用 new 构造对象时function obj() { this.test = function() { return this; }}var o = new obj();o.test() === o; // true
apply / call 调用function test() { return this;}var o = {};// applytest.apply(o) === o; // true// calltest.call(o) === o; // true
dom 的事件属性中// 点击后输出 true<input id="a" type="text" onclick="console.info(this === document.getelementbyid('a'))" />// 点击后输出 true<input id="a" type="text" /><script type="text/javascript"> document.getelementbyid('a').addeventlistener("click", function(）{ console.info(this === document.getelementbyid('a')); });</script>// 点击后输出 true<input id="a" type="text" /><script type="text/javascript"> document.getelementbyid('a').onclick = function(）{ console.info(this === document.getelementbyid('a')); });</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
js与jq实现焦点图轮播效果
js实现点击按钮可实现编辑
关于js 继承的介绍
以上就是js执行上下文 变量、函数、this的详细内容。