this和执行上下文实现代码

函数的执行上下文由当前的运行环境而定:
1. 全局变量和全局函数附属于全局对象(window),因此使用”var”或”this”两种方法定义全局变量是等效的。
2. 执行上下文和作用域不同。执行上下文在运行时确定,随时可能改变,而作用域则在定义时确定,永远不会变。
3. 如果当前执行的是一个对象的方法,则执行上下文就是这个方法所附属的对象。
4. 如果当前是一个创建对象的过程或者执行一个对象的方法,则执行上下文就是这个正在被创建的对象。
5. 如果一个方法在执行时没有明确指定附属对象,则这个方法的上下文为全局对象。
6. 使用call和apply可以改变对象的执行上下文。
看下面的例子:


代码如下:

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指向的上下文为全局对象。

(0)

相关推荐

  • this和执行上下文实现代码

    函数的执行上下文由当前的运行环境而定: 1. 全局变量和全局函数附属于全局对象(window),因此使用"var"或"this"两种方法定义全局变量是等效的. 2. 执行上下文和作用域不同.执行上下文在运行时确定,随时可能改变,而作用域则在定义时确定,永远不会变. 3. 如果当前执行的是一个对象的方法,则执行上下文就是这个方法所附属的对象. 4. 如果当前是一个创建对象的过程或者执行一个对象的方法,则执行上下文就是这个正在被创建的对象. 5. 如果一个方法在执行时没

  • 一篇文章弄懂javascript中的执行栈与执行上下文

    前言 作为一个前端开发人员,弄清楚JavaScript的执行上下文有助于我们理解js中一些晦涩的概念,比如闭包,作用域,变量提升等等. 执行栈 执行栈用于存储代码执行期间创建的所有执行上下文.具有FILO接口,也被称为调用栈. 当JavaScript代码被运行的时候,会创建一个全局上下文,并push到当前执行栈.之后当发生函数调用的时候,引擎会为函数创建一个函数执行上下文并push到栈顶.引擎会先执行调用栈顶部的函数,当函数执行完成后,当前函数的执行上下文会被移除当前执行栈.并移动到下一个上下文

  • 通过实例了解JS执行上下文运行原理

    壹 ❀ 引 我们都知道,JS代码的执行顺序总是与代码先后顺序有所差异,当先抛开异步问题你会发现就算是同步代码,它的执行也与你的预期不一致,比如: function f1() { console.log('听风是风'); }; f1(); //echo function f1() { console.log('echo'); }; f1(); //echo 按照代码书写顺序,应该先输出 听风是风,再输出 echo才对,很遗憾,两次输出均为 echo:如果我们将上述代码中的函数声明改为函数表达式,结

  • js bind 函数 使用闭包保存执行上下文

    复制代码 代码如下: window.name = "the window object" function scopeTest() { return this.name; } // calling the function in global scope: scopeTest() // -> "the window object" var foo = { name: "the foo object!", otherScopeTest: fu

  • 深入理解JavaScript系列(11) 执行上下文(Execution Contexts)

    简介 从本章开始,我将陆续(翻译.转载.整理)http://dmitrysoshnikov.com/网站关于ECMAScript标标准理解的好文. 本章我们要讲解的是ECMAScript标准里的执行上下文和相关可执行代码的各种类型. 原始作者:Dmitry A. Soshnikov 原始发布: 2009-06-26 俄文原文:http://dmitrysoshnikov.com/ecmascript/ru-chapter-1-execution-contexts/ 英文翻译:Dmitry A.

  • 浅析JavaScript作用域链、执行上下文与闭包

    闭包和作用域链是JavaScript中比较重要的概念,这两天翻阅了一些资料,把相关知识点给大家总结了以下. JavaScript 采用词法作用域(lexical scoping),函数执行依赖的变量作用域是由函数定义的时候决定,而不是函数执行的时候决定.以下面的代码片段举例说明,通常来说(基于栈的实现,如 C 语言) foo 被调用之后函数内的本地变量 scope 会被释放,但是从词法上看 foo 的内嵌匿名函数中 scope 应该指的是 foo 的本地变量 scope ,并且实际上代码的运行结

  • 跟我学习javascript的执行上下文

    在这篇文章里,我将深入研究JavaScript中最基本的部分--执行上下文(execution context).读完本文后,你应该清楚了解释器做了什么,为什么函数和变量能在声明前使用以及他们的值是如何决定的. 1.EC-执行环境或者执行上下文 每当控制器到达ECMAScript可执行代码的时候,控制器就进入了一个执行上下文(好高大上的概念啊). javascript中,EC分为三种: 全局级别的代码 –– 这个是默认的代码运行环境,一旦代码被载入,引擎最先进入的就是这个环境. 函数级别的代码

  • 对于Javascript 执行上下文的全面了解

    在这篇文章中,将比较深入地阐述下执行上下文 – JavaScript中最基础也是最重要的一个概念.相信读完这篇文章后,你就会明白javascript引擎内部在执行代码以前到底做了些什么,为什么某些函数以及变量在没有被声明以前就可以被使用,以及它们的最终的值是怎样被定义的. 什么是执行上下文 Javascript中代码的运行环境分为以下三种: 全局级别的代码 – 这个是默认的代码运行环境,一旦代码被载入,引擎最先进入的就是这个环境. 函数级别的代码 – 当执行一个函数时,运行函数体中的代码. Ev

  • 深入探讨JavaScript的最基本部分之执行上下文

    在这篇文章中,我将深入探讨JavaScript的最基本部分之一,即Execution Context(执行上下文). 在本文结束时,你应该对解释器了解得更清楚:为什么在声明它们之前可以使用某些函数或变量?以及它们的值是如何确定的? 什么是执行上下文? JavaScript的执行环境非常重要,当JavaScript代码在行时,会被预处理为以下情况之一: Global code - 首次执行代码的默认环境. Function code - 每当执行流程进入函数体时. Eval code - 要在ev

  • JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析

    本文实例讲述了JavaScript ECMA执行上下文.分享给大家供大家参考,具体如下: 介绍 这篇文章我们主要探讨ECMAScript执行上下文和相关的ECMAScript可执行代码. 定义 每次当控制器转到ECMAScript可执行代码的时候,即会进入到一个执行上下文. 执行上下文(简称-EC)是一个抽象概念,ECMA-262标准用这个概念同可执行代码(executable code)概念进行区分. 标准规范没有从技术实现的角度准确定义EC的类型和结构;这应该是具体实现ECMAScript引

随机推荐