this到底指向谁，估计很多人在使用javascript的过程中都遇到过，这个关键字如果没搞懂，在一些高级功能中都会困难重重，搜了下相关文章，介绍的都挺多的，也有很深入的，比如汤姆大叔的《深入理解javascript系列》文章。看到很多文章中提到一句话："this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象"。

《javascript设计模式与实践》中是这样说的：javascript的this总是指向一个对象，而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的，而非函数被声明时的环境。

除去不常用的with和eval，实际应用中，this的指向大致分为下面4种情况：

1、作为对象的方法调用。

2、作为普通函数调用。

3、构造器函数调用。

4、call和apply调用。

情况1：作为对象的方法调用

当函数作为对象的方法调用时，this指向该对象。这是最常见的，比如：

var obj={

  a:1,

  fun:function(){

    console.log(this.a);//输出：1

  }

};

obj.fun();

情况2：作为普通函数调用

当函数不作为对象的属性调用时，即作为普通函数调用，this总是指向全局对象。

var a=1;

function fun(){

  var a=2;

  console.log(this.a);//输出：1
　console.log(a);//输出:2

}

fun();

再看一种情况：

var name="张三";

var obj={

  name:"李四",

  getName:function(){

    console.log(this.name);

  }

}

obj.getName();//输出：李四

var getName=obj.getName;

getName();//输出：张三

　直接调用obj.getName（），这里的this是作为对象的方法调用，所以它指向obj，this.name就是李四；

obj.getName赋值给getName后，getName就变成了普通函数，所以指向的是全局的window.name，结果是张三；

举个在实际开发过程中遇到的会让人困惑的例子：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

</head>

<body>

  <button id="btn">点我</button>

  <script type="text/javascript">

    var id="window";

    document.getElementById("btn").onclick=function(){

      alert(this.id);//输出:btn

      var callback=function(){

        alert(this.id);//输出:window

      }

      callback();

    }

  </script>

</body>

</html>

　　点击按钮的时候this指向的是按钮，但是callback是作为普通函数调用的，里面的this指向的是全局对象window，所以结果是window。

此时我们可以临时用一个变量保存对当前对象的引用：

var id="window";

    document.getElementById("btn").onclick=function(){

      var self=this;

      var callback=function(){

        alert(self.id);//输出:btn

      }

      callback();

   }

情况3：构造器中调用

function myClass(){

  this.name="张三";

}

var child=new myClass();

console.log(child.name);//输出：张三

大部分的javascript函数都可以当做构造函数来使用，构造器函数外表跟普通函数一模一样，区别在于调用的方式。当使用new运算符调用函数时，该函数总会返回一个对象，就是我们常说的实例对象。通常情况下，通过new运算符后，构造器函数中的this就指向的实例对象。

注意：如果构造器函数显式的返回了一个object类型的休息，那么运算结果最终会返回这个对象，而不是上面所期望的。例如：

function myClass(){

  this.name="张三";

  return {

    name:"李四"

  }

}

var child=new myClass();

console.log(child.name);//输出："李四"

console.log(child);//输出：[object Object] {name: "李四"}

　　

　这个例子与上面的例子差别就在于构造器函数最后返回了一个对象。如果构造器函数不显式的返回任何数据，或者返回一个非对象类型的数据，就不会出现这种情况，例如:

function myClass(){

  this.name="张三";

  return "李四"

}

var child=new myClass();

console.log(child.name);//输出：张三

console.log(child);//输出：[object Object] {name: "张三"}

情况4：call和apply

call和apply能够动态的修改传入函数的this：

var obj1={

  name:"张三",

  getName:function(){

    console.log(this.name);

  }

};

var obj2={

  name:"李四"

};

obj1.getName();//输出："张三"

obj1.getName.call(obj2);//输出："李四"

obj1.getName.apply(obj2);//输出："李四"

　　

call和apply的作用这里就不详细说了。

javascript中让你捉摸不定的this的更多相关文章

  1. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  2. javascript中的this与函数讲解

    前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码, ...

  3. JavaScript 中的数据类型

    Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...

  4. javascript中的操作符详解1

    好久没有写点什么了,根据博主的技术,仍然写一点javascript新手入门文章,接下来我们一起来探讨javascript的操作符. 一.前言 javascript中有许多操作符,但是许多初学者并不理解 ...

  5. 掌握javascript中的最基础数据结构-----数组

    这是一篇<数据结构与算法javascript描述>的读书笔记.主要梳理了关于数组的知识.部分内容及源码来自原作. 书中第一章介绍了如何配置javascript运行环境:javascript ...

  6. javascript中变量提升的理解

    网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...

  7. 前端开发：面向对象与javascript中的面向对象实现（二）构造函数与原型

    前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...

  8. 简单分析JavaScript中的面向对象

    初学JavaScript的时候有人会认为JavaScript不是一门面向对象的语言,因为JS是没有类的概念的,但是这并不代表JavaScript没有对象的存在,而且JavaScript也提供了其它的方 ...

  9. Javascript中的valueOf与toString

    基本上,javascript中所有数据类型都拥有valueOf和toString这两个方法,null除外.它们俩解决javascript值运算与显示的问题,本文将详细介绍,有需要的朋友可以参考下. t ...

随机推荐

  1. 浅析js中取绝对值的2种方法

    1.abs()   var aaa=-20;   var bbb=Math.abs(aaa); 2.加减法   var aaa=-20;   var bbb=-aaa

  2. wildfly8+jpa EntityBean 简单入门

    1)首先配置wildfly的数据源,我使用的是mysql数据库 1.jboss7开始,jboss使用模块化设计所以数据源的配置也是遵循模块化. 打开wildfly的安装目录进入modules\syst ...

  3. Postman—构建工作流

    前言 在使用“Collection Runner”的时候,集合中的请求执行顺序就是请求在Collection中的显示排列顺序.但是,有的时候我们不希望请求按照这样的方式去执行,可能是执行完第一个请求, ...

  4. 图解安卓-c++开发-通过java 调用c++ jni的使用

    接着上一节 ,很多事情用java做,效率要差一点(尤其是游戏),所以要用c++来实现,那么java如何调用c++ 首先建议一个工程 HelloJni如下图: 按照默认的配置下一步,直到完成 . 如下图 ...

  5. linux-统计文本中符合条件的内容

    1, 单个条件匹配, cat results.log | grep 'status=402' 2, 多个条件匹配 1), 2个条件都要满足 cat results.log | grep "s ...

  6. maven 中 jar管理

    慢慢补充 将本地jar添加到maven的仓库中 mvn install:install-file -DgroupId=org.geotools -DartifactId=gt-swing -Dvers ...

  7. Ceph 块设备 - 命令，快照，镜像

    目录 一.Ceph 块设备 二.块设备 rbd 命令 三.操作内核模块 四.快照基础 rbd snap 五.分层快照 六.镜像 rbd mirror 七.QEMU 八.libvirt 九.Openst ...

  8. 打包命令tar

    tar是linux下最常用的打包命令,使用tar打出来的包我们常称为tar包,tar包文件的命令通常都是以.tar结尾的,也有.gz或.bz2结尾的. 1 常用参数 -c,--create # 新建打 ...

  9. CentOS Maven 删除 *.lastUpdated文件

    find . -name "*.lastUpdated" -exec rm -rf {} \;

  10. jQuery 1.9/2.0/2.1及其以上 on 无效的解决办法

    jQuery 1.9/2.0/2.1及其以上版本无法使用live函数了,然而jQuery 1.9及其以上版本提供了on函数来代替.本文讲解了jQuery on函数的使用方法,以及在使用jQuery函数 ...