this和执行上下文实现代码

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了this和执行上下文实现代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4795字，纯文字阅读大概需要7分钟。

内容图文

var v1 = "global variable"; //全局变量附属于对象 
//this.v1 = "global variable with this"; //全局变量定义时使用var v1和this.v1两种方法等效。 
function func1(){ 
var v1 = "part variable"; 
writeHtml(v1); 
writeHtml(this.v1); 
} 
func1(); //part variable 
//global variable 
 
因为func1中有和全局对象同名的v1变量，所以在func1中直接引用v1引用的是func1中定义的变量。javascript同样有局部变量隐藏全局变量的特性。但func1没有明确的指定附属对象，因此他的执行上下文是全局对象，使用this引用变量的是全局变量。 
再看一个稍微复杂一点的例子： 
 代码如下:

function ftest(){ 
var v = "v1v1v1"; 
this.this_v = "this_v"; 
return function(){ 
writeHtml(v); 
writeHtml(this.this_v); 
} 
} 
var a = ftest(); 
var v = "v2v2v2"; 
writeHtml(this_v); // this_v 
a(); //v1v1v1 
//this_v 
 
当ftest当做函数来执行时，上下文为全局对象。所以在ftest中使用this定义的变量成为了全局变量。所以我们在ftest外面直接使用变量名访问this_v的值。但是，由于ftest中返回的匿名函数是定义在ftest内部的，所以这个匿名函数的作用域就是在ftest内部。因此当有全局变量v和局部变量v同名时，这个匿名函数访问到的是ftest内部定义的变量v。 
接下来把ftest当做类，使用new关键字来实例化： 
 代码如下:

function ftest(){ 
var v = "v1v1v1"; 
this.this_v = "this_v"; 
return function(){ 
writeHtml(v); 
writeHtml(this.this_v); 
} 
} 
var a = new ftest(); 
var v = "v2v2v2"; 
//writeHtml(this_v); // 错误:this_v未定义 
a(); //v1v1v1 
//undefined 
 
把ftest当做对象来实例化时，在对象的创建过程中，上下文为被创建的对象本身。注意，这个时候创建的对象是ftest的实例，而创建完成以后又返回了一个函数，这导致了new ftest()实例化后返回的是一个函数，而不是ftest()实例化后对象的引用。因此，这个已经实例化的对象无法被引用。当我们定义这个被返回的函数时，因为没有用this指定这个函数的上下文，因此这个被返回的函数上下文为全局对象，作用域为ftest()函数内部。所以函数a()执行时的由于上下文中没有定义this_v变量，导致了访问错误。 
注意，上面的代码： 
 代码如下:

function ftest(){ 
return function(){ 
} 
} 
 
这样的形式并不是一个静态封装环境，静态封装环境应该是：在一个函数定义完成后立即执行，并且执行完成后返回函数中的某一个内部函数。 
我们看下面一个例子，观察作用域和上下文对变量引用的影响。 
 代码如下:

var v = "global variable"; 
function method(){ 
writeHtml(v); 
writeHtml(this.v); 
} 
var Class1 = function(){ 
var v = "private variable"; 
this.v = "object variable"; 

var method2 = method; 
this.method2 = method; 

var method3 = function(){ 
writeHtml(v); 
writeHtml(this.v); 
} 
this.method3 = function(){ 
writeHtml(v); 
writeHtml(this.v); 
} 

method2(); //global variable 
//global variable 
this.method2(); //global variable 
//object variable 
method3(); //private variable 
//global variable 
this.method3();//private variable 
//object variable 
} 
var obj = new Class1(); 
 

由于method在全局中定义，所以method的作用域在定义的时候就被确定为全局的。所以method2在Class1内部被调用时，其作用域与是全局，上下文是全局对象。因此，在函数中访问到的变量都是全局变量。 
同理，this.method2在被调用时，其作用域是全局，但是由于该函数在定义时使用this关键字指明了其上下文为Class1的对象，所以在该函数访问没有上下文限定的变量时访问到的是全局变量，访问有上下文限定的变量时为访问到的是当前上下文中对应的变量。 
在调用method3和this.method3时，在访问没有上下文限定的变量时访问到的是局部变量，因为局部变量隐藏了全局变量。有上下文限定时和method2相同，访问到的是当前上下问文中的变量。 
使用call和apply可以改变执行上下文，由于call和apply只是参数类型不一样，因此例子下面都用call来演示。 
 代码如下:

var v = "global variable"; 
var method = function(){ 
writeHtml(this.v); 
} 
var Class2 = function(){ 
this.v = "object variable in instance of Class2"; 
this.method = function(){ 
writeHtml(this.v); 
} 
} 
var Class3 = function(){ 
this.v = "object variable in instance of Class3"; 
this.method = function(){ 
writeHtml(this.v); 
} 
} 

var obj2 = new Class2(); 
var obj3 = new Class3(); 

method(); //global variable 
obj2.method(); //object variable in instance of Class2 
obj3.method(); //object variable in instance of Class3 

method.call(obj2); //object variable in instance of Class2 
method.call(obj3); //object variable in instance of Class3 
obj2.method.call(obj3); //object variable in instance of Class3 
obj2.method.call(this); //global variable 
obj3.method.call(obj2); //object variable in instance of Class2 
obj3.method.call(this); //global variable 
 

可以看到，使用call或apply可以将方法绑定到指定的上下文中。在全局环境中this指向的上下文为全局对象。
            
            


           
                
                                                

内容总结

以上是互联网集市为您收集整理的this和执行上下文实现代码全部内容，希望文章能够帮你解决this和执行上下文实现代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端