规律1:函数用圆括号调用,函数的上下文是window对象

比如小题目:

function fun(){

var a = 888;

alert(this.a); //实际上访问的是window.a

}

var a = 666;

fun(); //弹出666

函数function fun(){}的上下文是什么!不要看它怎么定义,要看它怎么调用!!此时是fun()函数名加上圆括号直接调用,此时上下文就是window对象!

而我们知道:所有的全局变量都是window对象的属性,(注意:函数里面的局部变量,不是window的属性,不是任何东西的属性,它就是一个变量!!) 程序弹出666.

规律2:函数如果作为一个对象的方法,对象打点调用,函数的上下文就是这个对象

比如下面的例子,我们把fun函数定义出来了,然后又把这个函数绑定给了obj对象的c属性:

function fun(){

alert(this.a); //相当于弹出obj.a

}

//对象

var obj = {

"a" : 10,

"b" : 20,

//给这个对象增加一个方法,值就是fun函数

"c" : fun

}

//我们要看清楚函数执行的时候,是怎么执行的!!

//现在不是圆括号直接执行!!而是一个对象打点调用这个函数执行,所以函数的上下文是obj对象!!!

obj.c(); //弹出10

调用的时候,是

对象.函数()

此时根据规律,函数里面的this是这个对象。所以能够弹出10。

规律3:函数是事件处理函数,函数的上下文就是触发这个事件的对象

下面我们定义了一个fun,然后把这个fun当做了3个DOM元素的事件处理函数:

//函数

function fun(){

this.style.background = "red";

}

var box1 = document.getElementById("box1");

var box2 = document.getElementById("box2");

var box3 = document.getElementById("box3");

// 把同一个函数绑定给不同的对象

// this就是点击谁就是谁

box1.onclick = fun;

box2.onclick = fun;

box3.onclick = fun;

函数不会执行,直到用户点击了某一个div标签。此时点击谁,this就是谁。

规律4:定时器调用函数,上下文是window对象

//函数

function fun(){

alert(this.a);

}

var a = 888;

setInterval(fun,1000);

函数fun被定时器调用,此时函数的上下文就是window对象。每秒钟能弹出888.

做一个小例子吧,点击一个盒子,2秒钟之后变红:

小明同学写的程序是错误的:

var box1 = document.getElementById("box1");

box1.onclick = function(){

setTimeout(function(){

this.style.background = "red";

},2000);

}

这是因为我标蓝色的函数的最终调用者是定时器!所以函数的上下文是window对象。window对象没有背景颜色属性。

怎么办?备份this!备份上下文!

在定时器外面的事件处理函数中,this就是box1这个元素,此时我们可以备份上下文。把this存为局部变量self,后面的程序就用self指代box1。还可以用_this、that等等,我们一律使用self。

var box1 = document.getElementById("box1");

box1.onclick = function(){

var self = this;

setTimeout(function(){

self.style.background = "red";

},2000);

}

规律5:数组中存放的函数,被数组索引之后加圆括号调用,this就是这个数组

比如:

function fun(){

alert(this === arr); //true

alert(this.length); //3,因为数组的长度是3

}

var arr = [fun,"东风","五条"];

arr[0]();

一定要敏感:

arr[0]();

此时这个函数是从数组中枚举出来然后加圆括号执行的,所以最终调用者可以认为是这个数组,上下文就是这个数组。

函数的上下文就是函数里面的this是谁的更多相关文章

  1. javascript 函数执行上下文

    在js里,每个函数都有一个执行的上下文,我们可以通过this来访问. 如: 全局函数 function test(){ var local = this; } 我们发现local等于window(do ...

  2. this泛指函数的上下文

    this泛指函数的上下文 当前函数运行的类型上下文.

  3. PHP---------PHP函数里面的static静态变量

    工作一年了,一年里很少用到static这个关键词,不管是类里面还是方法里面基本都没怎么用过.平时看到类里面有这个都没什么好奇的,今天在函数里面看到了这个,就去百度了一下. <?phpfuncti ...

  4. 学习hash_map从而了解如何写stl里面的hash函数和equal或者compare函数

    ---恢复内容开始--- 看到同事用unordered_map了所以找个帖子学习学习 http://blog.sina.com.cn/s/blog_4c98b9600100audq.html (一)为 ...

  5. ajax实现注册用户名时动态显示用户名是否已经被注册(1、ajax可以实现我们常见的注册用户名动态判断)(2、jquery里面的ajax也是类似我们这样封装了的函数)

    ajax实现注册用户名时动态显示用户名是否已经被注册(1.ajax可以实现我们常见的注册用户名动态判断)(2.jquery里面的ajax也是类似我们这样封装了的函数) 一.总结 1.ajax可以实现我 ...

  6. c里面的static inline函数

    一般来说加上static表示函数是文件作用域,有的时候单独使用inline编译器会优化,没有编译成内联函数,而是变成普通函数编译,所以必须在前面加上static,放在头文件中可以被外部文件访问.   ...

  7. 深入理解JavaScript执行上下文、函数堆栈、提升的概念

    本文内容主要转载自以下两位作者的文章,如有侵权请联系我删除: https://feclub.cn/post/content/ec_ecs_hosting http://blog.csdn.net/hi ...

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

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

  9. Java函数式编程:二、高阶函数,闭包,函数组合以及柯里化

    承接上文:Java函数式编程:一.函数式接口,lambda表达式和方法引用 这次来聊聊函数式编程中其他的几个比较重要的概念和技术,从而使得我们能更深刻的掌握Java中的函数式编程. 本篇博客主要聊聊以 ...

随机推荐

  1. CF219C hoosing Capital for Treeland

    D. Choosing Capital for Treeland time limit per test 3 seconds memory limit per test 256 megabytes i ...

  2. 基于binlog来分析mysql的行记录修改情况(python脚本分析)

          最近写完mysql flashback,突然发现还有有这种使用场景:有些情况下,可能会统计在某个时间段内,MySQL修改了多少数据量?发生了多少事务?主要是哪些表格发生变动?变动的数量是怎 ...

  3. 使用babel编译es6

    起因:开发中慢慢的学习使用es6,但是JavaScript需要浏览器来解析,而不是所有浏览器都支持es6,所以为了兼容es6,需要第三方工具进行编译es6. 工具:node,gulp,gulp-bab ...

  4. jmeter 环境部署、数据库设置、分布式设置、多网卡配置等随笔

    <!-- linux系统修改系统环境变量  系统语言-->[root@web-249 ~]# env|grep LANGLANG=zh_CN.UTF-8[root@web-249 ~]# ...

  5. IPad分屏,当电脑第二显示屏

    最在在网上看到使用IPad可以做为电脑的第二个显示屏,对于我这样一个程序猿来说,这真是我的福音呀!因此在网上搜了许多关于Ipad投屏的信息,下面简单说明一下,包括怎么使用! 1.根据在网上搜索的结果, ...

  6. firstChild,lastChild,nextSibling,previousSibling & 兼容性写法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 一位菜鸟的java 最基础笔记

    java的特性 简单性(Simple). 结构体系中立(Architecture Neutral). 面向对象(Object Oriented). 易于移植(Portable). 分布式(Distri ...

  8. 搭建rtmp直播流服务之4:videojs和ckPlayer开源播放器二次开发(播放rtmp、hls直播流及普通视频)

    前面几章讲解了使用 nginx-rtmp搭建直播流媒体服务器; ffmpeg推流到nginx-rtmp服务器; java通过命令行调用ffmpeg实现推流服务; 从数据源获取,到使用ffmpeg推流, ...

  9. oracle表的简单操作

    版权声明:本文为博主原创文章,转载时请注明原文链接. 1.创建表 ) ) not null,primary key(num)); 创建了一个两个字段的表,num和name,都设置为非空,num设为主键 ...

  10. cms基本概念(dedecms,phpcms)

    1.什么是cms? cms是"Content Management System"的缩写,意为"内容管理系统". 内容管理系统是企业信息化建设和电子政务的新宠, ...