在js里,每个函数都有一个执行的上下文,我们可以通过this来访问。

如:

全局函数

function test(){

var local = this;

}

我们发现local等于window(dom根对象),也就是说全局函数实际上是window的一个属性。

同理全局变量也是如此。

比如 var name = ‘phil’; 我们可以通过window[‘name’]或者window.name 来访问。

而当函数是某一个对象的属性的时候,该函数的上下文就是该对象。

var student = {};

student.age = 20;

student.getAge = function(){

return this.age;

}

当有函数嵌套的时候,事情就变得稍微复杂点了。

var seq = [1,2,3,4];

for(var i in seq){

var name = ‘phil’ + i;

window.setTimeout(function(){

$('p’).apend(name);

},i*1000)

}

有人可能认为输出是phil1phil2phil3phil4,实际上结果是phil4phil4phil4phil4

因为函数window.setTimeout(实际上我们常常会省略掉window)的上下文实际上是window,而函数体中的name实际上就是window.name

他的值就是最后一次循环后的值phil4。

那如果我们需要的结果是phil1phil2phil3phil4那该怎么写:

var seq = [1,2,3,4];

for(var i in seq){

var name = ‘phil’ + i;

var obj = {};

obj.name = name;

obj.setTimeout  = function(){

var local = this;                  // 该方法是对象obj的属性方法,所以this就是obj

window.setTimeout(function(){

$('p’).apend(local.name);        // 此处千万不可以用this,因为此处的this实际上是window。

},i*1000)

}

}

call和apply通常用来修改函数的上下文,函数中的this指针将被替换为call或者apply的第一个参数

//定义一个人,名字为jack
var jack = {
    name : "jack",
    age : 26
}
 
//定义另一个人,名字为abruzzi
var abruzzi = {
    name : "abruzzi",
    age : 26
}
 
//定义一个全局的函数对象
function printName(){
    return this.name;
}
 
//设置printName的上下文为jack, 此时的this为jack
print(printName.call(jack));
//设置printName的上下文为abruzzi,此时的this为abruzzi
print(printName.call(abruzzi));
 
print(printName.apply(jack));
print(printName.apply(abruzzi));

只有一个参数的时候call和apply的使用方式是一样的,如果有多个参数:

function setName(value){

this.name = value;

}

setName.apply(jack, ["Jack Sept."]);
print(printName.apply(jack));
 
setName.call(abruzzi, "John Abruzzi");
print(printName.call(abruzzi));

javascript 函数执行上下文的更多相关文章

  1. 通俗易懂的来讲讲js的函数执行上下文

    0.开场白 在平时编写JavaScript代码时,我们并不会和执行上下文直接接触,但是想要彻底搞懂JavaScript函数的话,执行上下文是我们绕不过去的一个知识点. 1.执行上下文栈 JavaScr ...

  2. 前端知识体系:JavaScript基础-原型和原型链-理解JavaScript的执行上下文栈,可以应用堆栈信息快速定位问题

    理解JavaScript的执行上下文栈,可以应用堆栈信息快速定位问题(原文文档) 1.什么是执行上下文: 简而言之,执行上下文就是当前JavaScript代码被解析和执行时所在环境的抽象概念,Java ...

  3. JavaScript的执行上下文,真没你想的那么难

    作者:小土豆 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/2436173500265335 前言 在正文开始前,先来看 ...

  4. 深入理解JavaScript系列+ 深入理解javascript之执行上下文

    http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html http://blog.csdn.net/hi_kevin/article/d ...

  5. 浅谈javascript函数执行过程

    javascript函数执行过程: 1. 为函数创建一个执行环境 2. 复制函数的 [[scopes]] 属性中的对象构建起执行环境的作用链域 3. 创建函数活动对象并推入执行环境作用链域的前端 4. ...

  6. 理解Javascript之执行上下文(Execution Context)

    1>什么是执行上下文 Javascript中代码的运行环境分为以下三种: 全局级别的代码 - 这个是默认的代码运行环境,一旦代码被载入,引擎最先进入的就是这个环境. 函数级别的代码 - 当执行一 ...

  7. JavaScript的执行上下文

    在JavaScript的运行过程中,经常会遇到一些"奇怪"的行为,不理解为什么JavaScript会这么工作. 这时候可能就需要了解一下JavaScript执行过程中的相关内容了. ...

  8. 了解JavaScript的执行上下文

    转自http://www.cnblogs.com/yanhaijing/p/3685310.html 什么是执行上下文? 当JavaScript代码运行,执行环境非常重要,有下面几种不同的情况: 全局 ...

  9. 【深入理解javascript】执行上下文

    参考原文:执行上下文 1.每一个执行上下文,工作分为三个阶段: 准备阶段–>执行阶段–>调用阶段 准备阶段:代码执行之前,设置数据,相当于初始化. 执行阶段:开始执行每一行代码. 调用阶段 ...

随机推荐

  1. Polymer.js

    Polymer 1.0 教程 安装 bower install --save Polymer/polymer

  2. cut - 小巧的文本截取工具

    简介 cut命令是Unix下的一个命令行程序.cut命令是以行为单位来处理的.cut命令处理的是标准输入,所以可以结合管道来进行文本的处理. 命令格式 cut option… [file]… cut命 ...

  3. Kubuntu 使用YaH3C进行中大校园网认证

    之前都是用路由器连网线上网,我也没注意到inode校园网客户端在linux上的问题.直到前两天把路由器给搞残废了,只能默默的找办法装inode.根据学校网络中心给的教程,在kubuntu上尝试安装in ...

  4. Array数组

    array_diff_key() 例子 , , 'purple' , , 'yellow' ); var_dump(array_diff_key($array1, $array2));?> 上例 ...

  5. 在笔记本电脑开通无线WIFI

    1.Windows + R启动运行,输入services.msc进入服务 2.在服务中将Security Center服务从自动启动转为禁止启动 3.在服务中将Windows Firewall的启动类 ...

  6. Git 常用命令整理

    初始化配置 #配置使用git仓库的人员姓名 git config --global user.name "Your Name Comes Here" #配置使用git仓库的人员em ...

  7. [zz]The Royal Treatment

    http://www.cgw.com/Publications/CGW/2012/Volume-35-Issue-4-June-July-2012/The-Royal-Treatment.aspx T ...

  8. Gson处理

    public class GsonTools { public GsonTools(){} public static <T> T getPerson(String jsonString, ...

  9. Asp.net MVC中 Controller 与 View之间的数据传递

    在ASP.NET MVC中,经常会在Controller与View之间传递数据 1.Controller向View中传递数据 (1)使用ViewData["user"] (2)使用 ...

  10. RealtekRTL8111内建网卡-黑苹果之路

    真是服了这神一样的黑苹果.好不容易配好显卡,登陆appstore却报“无法验证您的设备或电脑”,查了一圈,又说要配网卡为en0的,有说要在clover中配FIXLAN的,最准确的是网卡必须是内建(Bu ...