1.作用域链

  作用域:浏览器给js一个生存环境(栈)内存

  作用域链:js中的关键字var function 都可以提前声明和定义,提前声明和定义,放在我们的内存地址(堆)内存中,然后js从上到下逐行执行,遇到变量就去内存地址查找是否存在这个变量有就直接使用,没有就继续向父级查找,直到window下结束,这种查找机制叫作用域链

  this的目的:js代码中存在大量的变量和函数,我们在只用他们的时候他们到底归属谁

  this               ( this是js的关键字,指定一个对象,然后去代替他)

  1.this分为函数内的this,函数外的this

  函数内的this,指向行为发生的主体(方法)

  函数外的this,都指向window   (没有意思)

  2.函数的this和函数在什么环境下定义的没有关系,而和自己的主体有关

  3.主体怎么找?    就看这个函数带没带"."  如果函数和方法执行带".",那么this指向"."前面的对象,如果不带点,this就指向window

  4.自执行函数里面的this都指向window

    小技巧:this个变量的面试题,先找到this的主体是谁,然后把它们换成那个主体就行了

  5.给元素中的某一个事件的绑定方法,

    当事件触发时,就执行绑定的方法,方法中的this指向当前元素;

  

  总结:怎样找到this的指函数内

  函数内的this跟函数在哪定义没有关系,只跟在执行时的主体有关,带点的主体就是"."前面的,不带"."就是window

  案例分析:

  1.

    var a={
    chifan:function(){
      console.log(this);
      }
    }
    a.chifan()             ( 这里面的this  a就是主体,因为他在"."前面)

  function chifan{

      console.log(this)

    }

  chifan()                                    (这个里面没带点,所以指向this指向window)

  2.var num=45;

  var obj={

    num=12,

    ff:(function(){

      console.log(this.num)

      })()                                            其结果为45;       (因为他是自调用,所以它的this指向window)

  var um=45;
  var obj={
    um:12,
    ff:function(){
      console.log(this.um)
      }
    }
  obj.ff()                                                  其结果为12;     ("." 因为有点,所以this指向它点前面就是他的对象) 

  3.  body中输入

  <div  id="div1"> hello world</div>

  function fn(){
    console.log(this)                             (其this指向的对象是div1    后面跟的语句为document.getElementById("div1").onclick=fn;        他的前面有".")
  } 
  document.getElementById("div1").onclick=function(){
    console.log(this);                           (其this指向的对象是div1    因为"."在他的前面)
  fn()                      (其this的指向的对象是window,因为没"."   )
  }
  document.getElementById("div1").onclick=fn;

  4.奇虎360的一道经典面试题

  

 1) var val=1;
  var obj={
    val:2,
    del:function(){
      console.log(this);                    this指的是对象obj
      this.val*=2
      console.log(val)                      (因为没有this,所以是一道作用域的题,内部没有声明val这个变量,所以去父级找,结果是1)
      console.log(this.val)    (有this,因为"." 所以他的对象是obj ,  obj中val的值为2,所以其结果是4)
    }
  }
  var ff=obj.del()

  

 2) var val=1;
  var obj={
    val:2,
    del:function(){
      console.log(this);              this指定的window;
      this.val*=5                         window的val被赋值为5*1(1是val全局的值)   最后的结果是val被赋值了5
      console.log(val)                (全局下的val)     所以结果是5
      console.log(this.val)          (全局下的val)    所以结果是5
     }
   }
  var fn=obj.del;

  fn()

  

  最后说一下var ff=obj.del()与var fn=obj.des;fn()的区别

  var ff=obj.del()     说的是声明一个变量 将obj为对象的del()函数赋值给ff;

  var fn=obj.del;fn()     说的是声明一个变量将obj为对象的del以匿名函数赋值给fn,   因为没"." 所以fn()是在window下的

javascript中有关this的解析题的更多相关文章

  1. JavaScript中依赖注入详细解析

    计算机编程的世界其实就是一个将简单的部分不断抽象,并将这些抽象组织起来的过程.JavaScript也不例外,在我们使用JavaScript编写应用时,我们是不是都会使用到别人编写的代码,例如一些著名的 ...

  2. javascript中 json数据的解析与序列化

    首先明确一下概念: json格式数据本质上就是字符串: js对象:JavaScript 中的几乎所有事务都是对象:字符串.数字.数组.日期.函数,等等. json数据的解析: 就是把后端传来的json ...

  3. javaScript中的this关键字解析

    this是JavaScript中的关键字之一,在编写程序的时候经常会用到,正确的理解和使用关键字this尤为重要.接下来,笔者就从作用域的角度粗谈下自己对this关键字的理解,希望能给到大家一些启示, ...

  4. JavaScript中的 this全面解析

    上一章我们排除了一些对this的错误认识和知道了this是在调用函数时被绑定的,完全取决于函数的调用位置.先介绍两个概念:调用位置和调用栈. 调用栈:就是为了到达当前执行位置所调用的所有函数. 调用位 ...

  5. JavaScript中使用eval()方法解析json串

    最近在js用到了eval()方法,在这里做个笔记 当时是这么用的:data = eval("("+data+")"); data为后台向前台传送的一个json串 ...

  6. 前端开发:Javascript中的数组,常用方法解析

    前端开发:Javascript中的数组,常用方法解析 前言 Array是Javascript构成的一个重要的部分,它可以用来存储字符串.对象.函数.Number,它是非常强大的.因此深入了解Array ...

  7. 深入解析Javascript中this关键字的使用

    深入解析Javascript中面向对象编程中的this关键字 在Javascript中this关键字代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.比如: function TestFun ...

  8. [JavaScript] JS中对Base64的解析

    JS中对Base64的解析 <script type="text/javascript"> /** * UTF16和UTF8转换对照表 * U+00000000 – U ...

  9. 解析JavaScript中apply和call以及bind

    函数调用方法 在谈论JavaScript中apply.call和bind这三兄弟之前,我想先说下,函数的调用方式有哪些: 作为函数 作为方法 作为构造函数 通过它们的call()和apply()方法间 ...

随机推荐

  1. memcache原理及环境搭建、测试

    一.原理       Memcache是一个高性能的分布式的内存对象缓存系统,通过在内存里维护一个统一的巨大的hash表,它能够用来存储各种格式的数据,包括图像.视频.文件以及数据库检索的结果等.简单 ...

  2. webpack 性能优化 -- 待续

    文章 这篇文章挺不错的, 各方面优化都提到了, 有空研究下 文章 这个文章提出 , 增量打包用 webpack-watch 会让你打包速度飞快,  react不参与打包, 不require, 而是放在 ...

  3. 在 windows 开发 reactNative 的环境 搭建过程 react-native-android

    安装的东西挺多的, 从 jdk 到c++环境 到node , python, 各种模拟器 http://bbs.reactnative.cn/topic/10/%E5%9C%A8windows%E4% ...

  4. ios数据持久化(转)

    文件系统 归档和序列化 数据库 1.文件系统 不管是Mac OS X 还是iOS的文件系统都是建立在UNIX文件系统基础之上的. 1.1 沙盒模型 在iOS中,一个App的读写权限只局限于自己的沙盒目 ...

  5. 一款经典的 jQuery Lightbox 灯箱效果

    一个灯箱效果的图片展示插件. 版本: jQuery v1.2.3+ jQuery Lightbox v2.7.1 github 实例预览 使用方法 载入 CSS 文件 <link rel=&qu ...

  6. Ubuntu16.04 和 hadoop2.7.3环境下 hive2.1.1安装部署

    参考文献: http://blog.csdn.NET/reesun/article/details/8556078 http://blog.csdn.Net/zhongguozhichuang/art ...

  7. TJU Problem 2857 Digit Sorting

    原题: 2857.   Digit Sorting Time Limit: 1.0 Seconds   Memory Limit: 65536KTotal Runs: 3234   Accepted ...

  8. 字符串匹配--扩展KMP模板

    对于一个字符串 s 以及子串 t ,扩展KMP可以用来求 t 与 s 的每个子串的最长公共前缀 ext [ i ],当然,如果有某个 ext 值等于 t 串的长度 lent ,那么就说明从其对应的 i ...

  9. com.fasterxml.jackson.databind.ObjectMapper. .readValue .convertValue

    String str="{\"student\":[{\"name\":\"leilei\",\"age\": ...

  10. 转oracle 学习- 数据类型

    oracle数据类型 有道是,磨刀不误砍柴工.多了解一些底层的东西,对于Oracle开发.维护大有裨益.个人总结了一些Oracle数据类型集解,相信读者阅读了本文以后,Oracle数据库开发起来会事半 ...