前言

this用法说难不难，有时候函数调用时，往往会搞不清楚this指向谁？那么，关于this的用法，你知道多少呢？

下面我来给大家整理一下关于this的详细分析，希望对大家有所帮助！

this指向的规律

this指向的规律往往与函数调用的方式息息相关；this指向的情况，取决于函数调用的方法有哪些。

我们来看一下姜浩五大定律：

姜浩五大定律：

①通过函数名()直接调用：this指向window；
②通过对象.函数名()调用的：this指向这个对象；
③函数作为数组的一个元素，通过数组下标调用的：this指向这个数组；
④函数作为window内置函数的回调函数调用：this指向window，setTimeout，setInterval等……；
⑤函数作为构造函数，用new关键字调用时：this指向新new出的对象。

对于this指向谁，我们记住一句就行：谁最终调用函数，this就指向谁！

因为，

①this指向的永远只可能是对象！
②this指向谁，永远不取决于this写在哪！而是取决于函数在哪调用！！！
③this指向的对象，我们称之为函数的上下文context，也叫函数的调用者。

多说无益，理论不如实践，大家一起来看下面的代码：

HTML代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>JavaScript中的this详解</title>

     </head>

     <body>

         <div id="div">1111</div>

     </body>

 </html>

JS代码：

 function func(){

             console.log(this);

         }

         //①通过函数名()直接调用：this指向window

         func();

         //②通过对象.函数名()调用的：this指向这个对象

         //狭义对象

         var obj = {

             name:"obj",

             func1:func

         };

         obj.func1();//this--->obj

         //广义对象

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

             this.style.backgroundColor = "red";

         };//this--->div

         //③函数作为数组的一个元素，通过数组下标调用的：this指向这个数组

         var arr = [func,1,2,3];

         arr[0](); //this--->数组arr

         //④函数作为window内置函数的回调函数调用：this指向window

         setTimeout(func,1000);

         //setInterval(func,1000);

         //⑤函数作为构造函数，用new关键字调用时：this指向新new出的对象

         var obj = new func();//this--->new出的新obj

看过代码之后，对于this的指向及用法，你了解透彻了么？

下面我们来做个小练习巩固一下this指向的五大定律。

看代码↓↓↓：

HTML代码：

 1 <!DOCTYPE html>

 2 <html>

 3     <head>

 4         <meta charset="UTF-8">

 5         <title>JavaScript中的this详解</title>

 6     </head>

 7

 8     <body>

 9         <div id="div">1111</div>

10     </body>

11 </html>

JS代码：

 var obj1 = {

             name:'obj1',

             arr:[setTimeout(func,3000),1,2,3]

         }

         document.getElementById("div").onclick = obj1.arr[0];

         //函数最终调用者：setTimeout，符合规律⑤  this--->window

         var obj2 = {

             name:'obj1',

             arr:[func,1,2,3]

         }

         document.getElementById("div").onclick = obj2.arr[0]();

         //函数最终调用者：数组下标，符合规律③  this--->arr

         var obj3 = {

             name:'obj1',

             arr:[{name:'arrObj',fun:func},1,2,3]

         }

         document.getElementById("div").onclick = obj3.arr[0].fun();

         //函数最终调用者：{name:'arrObj',fun:func},符合规律②  this--->obj

this的用法，你掌握了么？

今天的内容就先分享到这里，希望可以帮到你~如有问题，欢迎留言评论，大家一起交流，一起进步！

作者：夕照希望
出处：http://www.cnblogs.com/hope666/ 

【JavaScript中的this详解】的更多相关文章

  1. JavaScript正则表达式详解（二）JavaScript中正则表达式函数详解

    二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...

  2. (转)javascript中event对象详解

    原文:http://jiajiale.iteye.com/blog/195906 javascript中event对象详解          博客分类: javaScript JavaScriptCS ...

  3. JavaScript中的this详解

    前言 this用法说难不难,有时候函数调用时,往往会搞不清楚this指向谁?那么,关于this的用法,你知道多少呢? 下面我来给大家整理一下关于this的详细分析,希望对大家有所帮助! this指向的 ...

  4. Javascript中prototype属性详解 （存）

    Javascript中prototype属性详解   在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不 ...

  5. JavaScript 中 this 的详解

    this 的指向 this 是 js 中定义的关键字,它自动定义于每一个函数域内,但是它的指向却让人很迷惑.在实际应用中,this 的指向大致可以分为以下四种情况. 原文作者:林鑫,作者博客:http ...

  6. JavaScript中的arguments详解

    1. arguments arguments不是真正的数组,它是一个实参对象,每个实参对象都包含以数字为索引的一组元素以及length属性. (function () { console.log(ar ...

  7. javascript中的操作符详解1

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

  8. Javascript中prototype属性详解

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...

  9. [No000069]Javascript中this关键字详解

    Quiz 请看下面的代码,最后alert出来的是什么呢?(chrome下按F12,选择Console直接复制粘贴运行) var name = "Bob"; var nameObj ...

随机推荐

  1. GDOI2014模拟pty爬山（mountain）

    pty爬山(mountain) 在Pty学校附近,有一座名之为岳之麓的高山.Pty很喜欢和(哔--)一起爬山.山的平面模型如下:山由一个顶点集:A1,A2-An给定,保证Ai的x单调递增.我们将Ai和 ...

  2. Java中类的继承，属性和方法的四种修饰符的作用范围，final关键字，java的三大特点中的2个：封装和多态，以及多态的一个设计模式，模板方法模式（template method）

    (一)Java中的继承: 关于继承,在Java中类的继承只能是单继承,不像C+++那样灵活,可以多继承,多继承的后果就是各种关系乱套,就相当于一个孩子有2个母亲一样,社会关系的复杂,不利于程序后期的开 ...

  3. 老李分享：Uber究竟是用什么开发语言？ 1

    老李分享:Uber究竟是用什么开发语言?   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:9 ...

  4. 2.熟悉Java基本类库系列——Java IO 类库

    Java中常用的IO操作基本上可以分为四大部分,分别是:File类操作.RandomAccessFile类操作.字节流操作.字符流操作.只要熟练掌握了本文中所列举的所有例子,基本上对于Java的IO流 ...

  5. selenium自动化过程中如何操作Flash动画

    最近在看python的爬虫框架(scrapy),一个词概括就是:"酸爽"!等把selenium自动化版块讲完后,打算写一写关于scrapy相关的知识,打算从源码角度解析下scrap ...

  6. AngularJS1.X学习笔记14-动画(解读文档)

    最近在看算法分析,那个大O啊,小o啊,分治法啊(目前就看到这里),真是搞死了.这回呢休息一下,学学AngularJS动画,上一篇文章根据自由男人的书简单谈到了动画的话题,发现反响很大(好吧,我说慌了, ...

  7. 关于下拉框列表不可选择相同值的设置一：当前DOM不可选

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  8. ios 添加工程依赖只能生成Generic Xcode Archive 文件原因

    问题说明:工程引用了外部类库, 默认生成的archive是 Generic Xcode Archive 格式的 无法发布和生成ipa文件. 解决处理: 1.将Build Settings->De ...

  9. 论.net平台的切身感触(惑)

    这篇博客只是作者客观看法,不喜勿喷,条条大路通罗马,路不同风景也不一样,接下来的路该怎么走? 简介:作者.net程序员一枚,工作已有四年,接触过.net平台winform,webform,mvc的开发 ...

  10. 使用Dubbox构架分布式服务

    第一部分:Dubbo的背景分析及工作原理 1. Dubbo是什么?Dubbo是一个来自阿里巴巴的开源分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案. 简单的说 ...