在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. Java和C/C++进行DES/AES密文传输(借鉴)

    Java和C/C++进行DES/AES密文传输 声明:对于新手来说很难解决的一个问题,终于在非常煎熬之后找到这篇文章,所以借鉴过来.原文地址http://blog.sina.com.cn/s/blog ...

  2. read.csv 把 "T" 读成 "TRUE" 的问题

    read.csv(text="A,B,T,T", header=FALSE) ## V1 V2 V3 V4 ## 1 A B TRUE TRUE RT, 有的时候R读取数据的时候容 ...

  3. VB6的函数指针传递

    Option Explicit Private Declare Function CallWindowProc Lib "user32" Alias "CallWindo ...

  4. 20151216Repeater

    Repeater 用法:.绑定数据源 Repeater1.DataSource = context.Info; Repeater1.DataBind(); .造项模版: 头模版:HeaderTempl ...

  5. mac10.9下eclipse的storm开发环境搭建

    --------------------------------------- 博文作者:迦壹 博客地址:http://idoall.org/home.php?mod=space&uid=1& ...

  6. SpringMVC访问静态资源

    SpringMVC访问静态资源 在SpringMVC中常用的就是Controller与View.但是我们常常会需要访问静态资源,如html,js,css,image等. 默认的访问的URL都会被Dis ...

  7. Linux重定向相关(转载帖,供自己cookbook)

    Linux重定向是指修改原来默认的一些东西,对原来系统命令的默认执行方式进行改变,比如说简单的我不想看到在显示器的输出而是希望输出到某一文件中就可以通过Linux重定向来进行这项工作.  Linux默 ...

  8. 一、Spring——IoC

    IOC概述 Spring中IOC的概念,控制反转概念其实包含两个层面的意思,"控制"是接口实现类的选择控制权:而"反转"是指这种选择控制权从调用者转移到外部第三 ...

  9. flash 自定义右键功能

    使用过程可能遇到的问题: MouseEvent.RIGHT_CLICK TypeError: Error #2007: 参数 type 不能为空. 首先在项目中设置编译参数. 如果是as项目,则在项目 ...

  10. BeanFactory 和ApplicationContext(Bean工厂和应用上下文)

    Bean工厂(BeanFactory接口),提供了基础的依赖注入支持. 应用上下文(ApplicationContext接口),建立在Bean工厂基础之上,提供了系统架构服务. Application ...