口水话 闭包中this的指向
前言:高程这本书真是神奇,每复习一遍,都会有新的收获。话说我看书有个习惯,要是看得似懂非懂的地方就喜欢打个“?”。这次看到高程第七章“函数表达式”关于闭包与this对象的部分,发现已经积攒了2个问号了。之前过了两遍都没有完全弄明白!
好在如今对this的指向、函数的理解已经今非昔比,这一次终于让我打通这条堵塞的经脉,让他融入我的知识体系了!!想想真是有些小激动呢~~
目的:一句话,本文就是解释为什么如下两篇代码中this.name的指向不同。
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFunc()()); //The Window
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
};
alert(object.getNameFunc()()); //My Object
正文:首先,我们得知道当函数调用过程中发生了什么。
当函数被调用时,会自动创建两个变量:this和arguments。这两个变量有个特点,他们的搜索范围仅限被调用函数的活动对象。什么意思呢?arguments对象大家一定很清楚,保存函数的传参的副本。看如下代码:
function father (a) {
var result=a;
var result2=null;
function son (a) {
result2=a;
}
return result+" and "+result2;
}
father(123); //"123 and null"
这里创建了两个函数,father和son,其中son作为father函数内部的函数。 他们都接受传参a。在这里我们传入传参123,返回father与son获得的传参结果。
结果显示father的传参为123,而son的传参为null,这个结果是显而易见的。在这里贴这么弱智的代码的用意是想说明son在搜索a这个变量时只搜索自己的活动变量而不会通过作用域链向上到father中去搜索。同样的道理使用于this。
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFunc()()); //The Window
这里最内层匿名函数this为什么指向的是window而不是他的上层函数getNameFunc。之前已经说明了this作为特殊的变量他的搜索范围同arguments一样仅限于自身的活动对象。也就是说内层匿名函数的this就算在自己这儿搜不到结果也不会再去他的上层函数getNameFunc中搜索。这个问题可以等同于——最内层匿名函数的this为什么指向的是window?
如果我们将最后的结果赋给一个变量来说明会简单汗多。
var result=object.getNameFunc()();
result变量是一个全局变量,他保存的指针指向getNameFunc最内层匿名函数的结果。访问这个变量其实调用的不是getNameFunc函数,而是getNameFunc内部的匿名函数。也就是说这个匿名函数是在全局作用域中调用的,那么匿名函数的this理所当然的指向window。
有了前面的解释,第二段代码就很好解释了。
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
};
alert(object.getNameFunc()()); //My Object
getNameFunc函数用that变量保存了他的this的指向,并在匿名函数中调用that变量。匿名函数在自己的活动对象中搜索到了that,并向上通过作用域链找到了that的出处。结果就显而易见了。
口水话 闭包中this的指向的更多相关文章
- JS中关于闭包和this的指向
闭包个人理解 函数内部还有一个函数,其作用就是可以访问上一层函数中的变量 下面的案例中函数内部有函数,this的指向就变为window了 结果闭包中this指向的两种方法 1.call对象冒充可以 ...
- js闭包中的this(匿名函数中的this指向的是windows)
js闭包中的this(匿名函数中的this指向的是windows) 一.总结 1.普通函数中的this指向的是对象,匿名函数中的this指向的是windows,和全局变量一样 2.让匿名函数中的thi ...
- 箭头函数,闭包函数中的this指向
在javscript中,this 是在函数运行时自动生成的一个内部指针,它指向函数的调用者. 箭头函数有些不同,它的this是继承而来, 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象. ...
- 关于javascript闭包中的this对象
我们知道, this对象是运行时基于函数的执行环境绑定的:在全局函数中,this等于window,而当函数被作为某个对象的方法调用时,this等于那个对象.<Javascript高级程序设计&g ...
- JavaScript 中的this指向问题
全局执行 首先,我们在全局环境中看看它的 this 是什么: 浏览器: console.log(this); // Window {speechSynthesis: S ...
- 理解js中this的指向
学习自原文 http://www.cnblogs.com/pssp/p/5216085.html后的一点小结(原文作者总结的很棒^_^)! 关于js中this的指向,在函数定义的时候还无法 ...
- javascript中的this指向问题
在深入学习JavaScript之后,我们越来越多的会遇到函数或者在对象内部中,对于this的指向问题的疑惑,其实基本上每一个编程语言中都有一个this,这个this的指向都是大同小异,你也可以汉化它的 ...
- 关于setInterval和setTImeout中的this指向问题
前些天在练习写一个小例子的时候用到了定时器,发现在setInterval和setTimeout中传入函数时,函数中的this会指向window对象,如下例: var num = 0; function ...
- 闭包中的 this 对象
关于this对象 在闭包中使用this对象也可能会导致一些问题.this对象是在运行时基于函数的执行环境绑定的:在全局函数中,this等于window, function createFunction ...
随机推荐
- flask文件的上传和下载
from werkzeug.utils import secure_filename from flask import Flask,render_template,jsonify,request i ...
- asp.net mvc表单异步提交
html代码: @using (Html.BeginForm("xx", "xx", FormMethod.Post, new { enctype = &quo ...
- ajax的表单提交,与传送数据
ajax的表单提交 $.ajax ({ url: "<%=basePath%>resource/addPortDetectOne.action", dataType: ...
- Python 9X9乘法口诀表
#乘法口诀 for i in range(1,10): for j in range(1,i+1): print ( j,'*',i,'=',j*i,'',' ',end='') print(end= ...
- 发布以NLog作为日记工具的ASP.NET站点到IIS注意事项
一.可以通过在Web.Config文件中添加节点来配置,或是直接将NLog.config放在Web.config所在目录 二.通过节点的fileName属性指定日志文件规则时,可以使用${basedi ...
- 开启 mysql 远程访问
如何开启MySQL的远程帐号-1)首先以 root 帐户登陆 MySQL 在 Windows 主机中点击开始菜单,运行,输入“cmd”,进入控制台,然后cd 进入MySQL 的 bin 目录下,然后输 ...
- 使用afinal下载文件并且在状态栏中显示下载的进度
2013年10月23日,今天是在“我在找你信息服务有限公司”第一天上班,公司给提出了这样一个要求:下载本公司的app,并且在下载的过程中要在状态栏中显示下载的进度,并且,可以暂停和继续下载. 下面是我 ...
- android杂记
1.ArrayAdapter requires the resource ID to be a TextView问题 listView.setAdapter(new ArrayAdapter<S ...
- 完美解决全面屏蔽Google教程(终结者)
最近谷歌的IP被大范围的禁用了.身处一个连谷歌都用不了的过度的程序员,深感命运多舛.幸好,魔高一尺,道高一丈.下面是几种可以使用谷歌的方法. 方法一 1)在chrome浏览器中输入:chrome:// ...
- 大前端学习笔记整理【六】this关键字详解
前言 在上一篇博客里我总结了下辨认this指向的四种方式,但是有师兄抛出一个问题来,我发现那些this的指向并不能说明更复杂的情况,先看下这段代码 var a = { name: 'a', getNa ...