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. [Swift实际操作]七、常见概念-(6)日期Date和DateFormatter日期的格式化

    本文将为你演示日期类型的使用,以及如何对日期进行格式化. 首先引入需要使用到的界面框架 import UIKit 初始化一个日期对象,它的值和当前电脑中的日期相同 var date = Date() ...

  2. 【wireshark】总体结构

    1. 总体结构 wireshark的总体结构如下图所示. 2. 功能模块 模块名 功能 源码子目录 GTK/Qt 处理所有的用户输入/输出(所有的窗口,对话框等等) /ui GTK: /ui/gtk ...

  3. 【转】JMeter学习参数化User Defined Variables与User Parameters

    偶然发现JMeter中有两个元件(User Defined Variables与User Parameters)很相近,刚开始时我也没注意,两者有什么不同.使用时却发现两者使用场景有些不同,现在小结一 ...

  4. 如何查看linux服务器的版本和配置信息

    linux下看配置,可没有windows那么直观.你只能一个一个查看. 一:cpu[root@srv /]# more /proc/cpuinfo | grep "modelname&quo ...

  5. （转）AIX下镜像制作与取消，更换硬盘问题

    AIX下镜像制作与取消,更换硬盘问题 ROOTVG做镜像问题: 下面命令全部在AIX5.4上运行通过 # lspv hdisk0      000a1ddc7f36a2f0      rootvg   ...

  6. getCurrentSession 与 openSession() 的区别

    1 getCurrentSession创建的session会和绑定到当前线程,而openSession不会. 2 getCurrentSession创建的线程会在事务回滚或事物提交后自动关闭,而ope ...

  7. 9.png图片制作详细教程

    1.背景自适应且不失真问题的存在      制作自适应背景图片是UI开发的一个广泛问题,也是界面设计师渴望解决的问题,我相信我们彼此都深有体会.      比如,列表的背景图一定,但是列表的高度随着列 ...

  8. AndroidStudio生成自己的Compile依赖

    在AndroidStudio中经常使用compile的方式来导入第三方代码,如图所示: 想要拥有自己的依赖,可参考本篇的方法 在github上托管一个带有Android Libray的项目,我们要co ...

  9. HtmlUnit: A Simple Example: Check Yahoo Email---转载

    1. src http://www.muneebahmad.com/index.php/archives/81 package com.examples.htmlunit; import java.i ...

  10. 通过spark-sql快速读取hive中的数据

    1 配置并启动 1.1 创建并配置hive-site.xml 在运行Spark SQL CLI中需要使用到Hive Metastore,故需要在Spark中添加其uris.具体方法是将HIVE_CON ...