前言:高程这本书真是神奇,每复习一遍,都会有新的收获。话说我看书有个习惯,要是看得似懂非懂的地方就喜欢打个“?”。这次看到高程第七章“函数表达式”关于闭包与this对象的部分,发现已经积攒了2个问号了。之前过了两遍都没有完全弄明白!

  好在如今对this的指向、函数的理解已经今非昔比,这一次终于让我打通这条堵塞的经脉,让他融入我的知识体系了!!想想真是有些小激动呢~~

目的:一句话,本文就是解释为什么如下两篇代码中this.name的指向不同。

  1. var name = "The Window";
  2.   var object = {
  3.     name : "My Object",
  4.     getNameFunc : function(){
  5.       return function(){
  6.         return this.name;
  7.       };
  8.     }
  9.   };
  10. alert(object.getNameFunc()()); //The Window
  1. var name = "The Window";
  2.   var object = {
  3.     name : "My Object",
  4.     getNameFunc : function(){
  5.       var that = this;
  6.       return function(){
  7.         return that.name;
  8.       };
  9.     }
  10.   };
  11. alert(object.getNameFunc()()); //My Object

正文:首先,我们得知道当函数调用过程中发生了什么。

  当函数被调用时,会自动创建两个变量:this和arguments。这两个变量有个特点,他们的搜索范围仅限被调用函数的活动对象。什么意思呢?arguments对象大家一定很清楚,保存函数的传参的副本。看如下代码:

  1. function father (a) {
  2. var result=a;
  3. var result2=null;
  4. function son (a) {
  5. result2=a;
  6. }
  7. return result+" and "+result2;
  8. }
  9. father(123); //"123 and null"

  这里创建了两个函数,father和son,其中son作为father函数内部的函数。 他们都接受传参a。在这里我们传入传参123,返回father与son获得的传参结果。

  结果显示father的传参为123,而son的传参为null,这个结果是显而易见的。在这里贴这么弱智的代码的用意是想说明son在搜索a这个变量时只搜索自己的活动变量而不会通过作用域链向上到father中去搜索。同样的道理使用于this。

  1. var name = "The Window";
  2.   var object = {
  3.     name : "My Object",
  4.     getNameFunc : function(){
  5.       return function(){
  6.         return this.name;
  7.       };
  8.     }
  9.   };
  10. alert(object.getNameFunc()()); //The Window

  这里最内层匿名函数this为什么指向的是window而不是他的上层函数getNameFunc。之前已经说明了this作为特殊的变量他的搜索范围同arguments一样仅限于自身的活动对象。也就是说内层匿名函数的this就算在自己这儿搜不到结果也不会再去他的上层函数getNameFunc中搜索。这个问题可以等同于——最内层匿名函数的this为什么指向的是window?

  如果我们将最后的结果赋给一个变量来说明会简单汗多。

  1. var result=object.getNameFunc()();

  result变量是一个全局变量,他保存的指针指向getNameFunc最内层匿名函数的结果。访问这个变量其实调用的不是getNameFunc函数,而是getNameFunc内部的匿名函数。也就是说这个匿名函数是在全局作用域中调用的,那么匿名函数的this理所当然的指向window。

  有了前面的解释,第二段代码就很好解释了。

  1. var name = "The Window";
  2.   var object = {
  3.     name : "My Object",
  4.     getNameFunc : function(){
  5.       var that = this;
  6.       return function(){
  7.         return that.name;
  8.       };
  9.     }
  10.   };
  11. alert(object.getNameFunc()()); //My Object

  getNameFunc函数用that变量保存了他的this的指向,并在匿名函数中调用that变量。匿名函数在自己的活动对象中搜索到了that,并向上通过作用域链找到了that的出处。结果就显而易见了。

口水话 闭包中this的指向的更多相关文章

  1. JS中关于闭包和this的指向

    闭包个人理解   函数内部还有一个函数,其作用就是可以访问上一层函数中的变量 下面的案例中函数内部有函数,this的指向就变为window了 结果闭包中this指向的两种方法 1.call对象冒充可以 ...

  2. js闭包中的this(匿名函数中的this指向的是windows)

    js闭包中的this(匿名函数中的this指向的是windows) 一.总结 1.普通函数中的this指向的是对象,匿名函数中的this指向的是windows,和全局变量一样 2.让匿名函数中的thi ...

  3. 箭头函数,闭包函数中的this指向

    在javscript中,this 是在函数运行时自动生成的一个内部指针,它指向函数的调用者. 箭头函数有些不同,它的this是继承而来, 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象. ...

  4. 关于javascript闭包中的this对象

    我们知道, this对象是运行时基于函数的执行环境绑定的:在全局函数中,this等于window,而当函数被作为某个对象的方法调用时,this等于那个对象.<Javascript高级程序设计&g ...

  5. JavaScript 中的this指向问题

    全局执行     首先,我们在全局环境中看看它的 this 是什么:     浏览器:     console.log(this);     // Window {speechSynthesis: S ...

  6. 理解js中this的指向

         学习自原文  http://www.cnblogs.com/pssp/p/5216085.html后的一点小结(原文作者总结的很棒^_^)! 关于js中this的指向,在函数定义的时候还无法 ...

  7. javascript中的this指向问题

    在深入学习JavaScript之后,我们越来越多的会遇到函数或者在对象内部中,对于this的指向问题的疑惑,其实基本上每一个编程语言中都有一个this,这个this的指向都是大同小异,你也可以汉化它的 ...

  8. 关于setInterval和setTImeout中的this指向问题

    前些天在练习写一个小例子的时候用到了定时器,发现在setInterval和setTimeout中传入函数时,函数中的this会指向window对象,如下例: var num = 0; function ...

  9. 闭包中的 this 对象

    关于this对象 在闭包中使用this对象也可能会导致一些问题.this对象是在运行时基于函数的执行环境绑定的:在全局函数中,this等于window, function createFunction ...

随机推荐

  1. System.StackOverflowException的一个例子(转)

    今天按着书上的例子写呀写,写了一下午终于做出了一个三层模式的通讯录(当然很简单),但是,弄了最后却碰到个运行时的 异常,弄得我这个asp.net菜鸟郁闷了再郁闷.异常如下:发生类型为 System.S ...

  2. Eclipse:Dubug快捷键

    Debug快捷键 F5单步调试进入函数内部.   F6单步调试不进入函数内部,如果装了金山词霸2006则要把"取词开关"的快捷键改成其他的.   F7由函数内部返回到调用处.   ...

  3. nginx下开启pathinfo模式

    第一种方式是通过重写url来实现pathinfo模式: location / { if (!-e $request_filename){ rewrite ^/(.*)$ /index.php?s=/$ ...

  4. OC中类别、扩展、协议与委托

    一.类别(category) 类别(category)——通过使用类别,我们可以动态地为现有的类添加新方法,而且可以将类定义模块化地分不到多个相关文件中.通常只在类别中定义方法.(类别,接口部分的定义 ...

  5. AFN框架内部结构

    AFN结构体 - NSURLConnection + AFURLConnectionOperation + AFHTTPRequestOperation + AFHTTPRequestOperatio ...

  6. Django模板系统——过滤器

    转自:https://www.douban.com/note/145065606/  <省得每次都得去翻麻烦> 过滤器,变量的显示形式的改变一.形式:小写{{ name | lower } ...

  7. 推荐一个winform 界面交互类库转

    // Copyright (c) 2008 CodeToast.com and Nicholas Brookins //This code is free to use in any applicat ...

  8. 默认构造方法并非总是public的

    以前印象中一直有一个概念,说"如果没有提供构造方法,java将自动添加一个空的public的构造方法".现在看来,有2个问题,一,默认构造方法未必是public的,二,默认构造方法 ...

  9. Spark中常用工具类Utils的简明介绍

    <深入理解Spark:核心思想与源码分析>一书前言的内容请看链接<深入理解SPARK:核心思想与源码分析>一书正式出版上市 <深入理解Spark:核心思想与源码分析> ...

  10. IOS 6和 IOS7适配的一些问题

    由于在做一个ios的通用设计平台,那么客户端解析的时候就涉及到一些ios不同版本,不同分辨率的适配问题 首先碰到的就是navigation bar中的item的背景色的问题 在ios7中设置setti ...