深入学习JS执行--创建执行上下文(变量对象,作用域链,this) (2)

解读一下: 上面说的概括了this两种值的情况:
1.函数直接作为某对象的方法被调用则函数的this指向该对象。
2.函数作为函数直接独立调用(不是某对象的方法),或是函数中的函数,其this指向window。

我们看几个栗子便可理解:
栗子1:(这个例子我相信都能理解)当函数被独立运行时,其this的值指向window对象。

function a(){ console.log(this); } //独立运行 a(); //window

栗子2:(函数中函数,这里嵌套了个外围函数)这里也是指向window对象,也相当于函数作为函数调用,就是独立运行。其实这个例子也说明闭包的this指向Window。

//外围函数 function a(){ //b函数在里面 function b(){ console.log(this); } //虽然在函数中,但b函数独立运行,不是那个对象的方法 b(); } a(); //window

栗子3:(再写复杂点的话)x函数即使在对象里面,但它是函数中的函数,也是作为函数运行,不是Object的方法。getName才是objcet的方法,所以getName的this指向object(在下个栗子有)。

//一个对象 var object = { //getName是Object的方法 getName : function(){ //x是getName里面的函数,它是作为函数调用的,this就是window啦 function x(){ console.log(this); } x(); } } object.getName(); //window

以上三个都是输出window,下面是this指向某个对象的情况。

栗子4:函数作为某个对象的方法被调用。

//一个对象 var object = { name : "object", //getName是Object的方法 getName : function(){ console.log(this === object); } } object.getName(); //true , 说明this指向了object

这里的getName中的this是指向objct对象的,因为getName是object的一个方法,它作为对象方法被调用。

栗子5:再来个栗子。

var name = "window"; var obj = { name : "obj" }; function fn (){ console.log(this.name); } //将fn通过call或bind或apply直接绑定给obj,从而成为obj的方法。 fn.call(obj); //obj 再总结一下this的值

全局执行上下文:this的值是window
函数执行上下文:this的值两种:
1.函数中this指向某对象,因为函数作为对象的方法:怎么看函数是对象的方法,一种是直接写在对象里面(不是嵌套在对象方法中的函数,不懂再看看栗子3),另一种是通过call等方法直接绑定在对象中。

2.函数中this指向window:函数独立运行,不是对象的方法,函数中的函数(闭包),其this指向window。

四、总结整个js代码执行过程 (1)JS执行过程

js代码执行分成了两部分:预执行和执行

预执行:创建好执行上下文,有两种,一种是开始执行js代码就创建全局的执行上下文,一种是当某个函数被调用时创建它自己的函数执行上下文。这里也就是本节主要讲的东西,创建执行上下文的三个重要成分。

执行:在执行栈中执行,栈顶的执行上下文获得执行权,并按顺序执行当前上下文中的代码,执行完后弹栈销毁上下文,执行权交给下一个栈顶执行上下文。

(2)放上图示

某个执行上下文生命周期:

深入学习JS执行--创建执行上下文(变量对象,作用域链,this)

五、后话

整个js的执行过程就这样了,一开始可能有点难理解,但看多几遍就慢慢领会了。希望大家能够理解。如果觉得写得好,记得点赞,关注哦。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpzzpz.html