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. 对一致性hash原理的理解

    一致性hash算法解决的核心问题是,当solt数发生变化的时候能够尽量少的移动数据.该算法最早在<Consistent Hashing and Random Trees:Distributed ...

  2. shell while-ssh

    Linux shell脚本使用while循环执行ssh的注意事项 浏览:86次 出处信息 如果要使用ssh批量登录到其它系统上操作时,我们会采用循环的方式去处理,那么这里存在一个巨大坑,你必须要小心了 ...

  3. 数据结构---散列表查找(哈希表)概述和简单实现(Java)

    散列表查找定义 散列技术是在记录的存储位置和它的关键字之间建立一个确定的对应关系f,是的每个关键字key对应一个存储位置f(key).查找时,根据这个确定的对应关系找到给定值的key的对应f(key) ...

  4. 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式

    微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...

  5. (转)Python 字符串

    原文:http://www.runoob.com/python/python-strings.html

  6. 对称（DES/AES）与非对称（RSA/SSL/数字证书）加密介绍及实际应用

    本文不对具体的算法做深入研究,只是讲解各种安全算法的原理和使用场景. 一.数据校验算法 数据校验,是为保护数据的完整性,用一种指定的算法对原始数据计算出的一个校验值.当接收方用同样的算法再算一次校验值 ...

  7. Git 代码管理命令

    1) 远程仓库相关命令检出仓库:$ git clone git://github.com/jquery/jquery.git查看远程仓库:$ git remote -v添加远程仓库:$ git rem ...

  8. 面试题42：计算逆波兰表达式（RPN）

    这是一个比较简单的题目,借助栈可以轻松实现逆波兰表达式. 题目描述: Evaluate the value of an arithmetic expression in Reverse Polish ...

  9. C++11中右值引用和移动语义

    目录 左值.右值.左值引用.右值引用 右值引用和统一引用 使用右值引用,避免深拷贝,优化程序性能 std::move()移动语义 std::forward()完美转发 容器中的emplace_back ...

  10. ANTLR4权威指南 - 第7章 通过特定应用程序代码解耦语法

    第7章 通过特定应用程序代码解耦语法 到目前为止,我们已经知道了怎么用ANTLR的语法来定义语言了,接下来我们要给我们的语法注入一些新的元素了.就语法本身而言,其用处并不大,因为它只能告诉我们一个用户 ...