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. MyBatis Generator XML 配置

    使用反向生成器可以生成数据库表对应的实体类和mapper映射文件: 以下是具体介绍相应xml文件的配置: 附上一张配置的模板: <?xml version="1.0" enc ...

  2. js闭包之我见

    很久前的一个问题终于得以解决,内心是无比喜悦的,不多说,先上代码: function test(){ for(var i=0;i<5;i++){ window.onclick=function( ...

  3. gitlab改变服务器ip

    一./home/git/gitlab/config/unicorn.rb 其中的ip需要修改,否则unicorn无法启动. 二./home/git/gitlab-shell/config.yml 其中 ...

  4. iOS 关于布局问题的一些认识

    ///更新约束和布局 更新约束布局相关的API - (void)updateConstraintsIfNeeded  调用此方法,如果有标记为需要重新布局的约束,则立即进行重新布局,内部会调用upda ...

  5. php引用使用不恰当而产生问题的地方

    php变量的引用,如果使用的恰当,会带来效率的提升,相反,效率下降 $array = range(, ); $ref =& $array; var_dump(count($array)); / ...

  6. 【8】JMicro微服务-JMicro ZKUI

    ZKUI是一个开源项目,是一个查看,修改ZK数据非常方便的工具.JMicro基于ZK做服务治理,配置管理,因此使用ZKUI会提供非常大的方便. Github地址:https://github.com/ ...

  7. Yarn 和 Npm 命令行切换 摘录

    原文作者: @Gant Laborde原文地址: https://shift.infinite.red/np...中文翻译: @文蔺译文地址:http://www.wemlion.com/2016/n ...

  8. Label Propagation Algorithm LPA 标签传播算法解析及matlab代码实现

    转载请注明出处:http://www.cnblogs.com/bethansy/p/6953625.html LPA算法的思路: 首先每个节点有一个自己特有的标签,节点会选择自己邻居中出现次数最多的标 ...

  9. javascript数据结构与算法--二叉树遍历（先序）

    javascript数据结构与算法--二叉树遍历(先序) 先序遍历先访问根节点, 然后以同样方式访问左子树和右子树 代码如下: /* *二叉树中,相对较小的值保存在左节点上,较大的值保存在右节点中 * ...

  10. 《Mysql技术内幕，Innodb存储引擎》——锁

    lock与latch 在数据库中lock与latch分别指不同的所. latch:可分为互斥量(mutex)和读写锁(rwlock),目的在于保证数据库内部的结构中共享资源并发时能够正确操作,其对象主 ...