this详解

作者的话

　

　　　　在JavaScriptOPPt面向对象编程中，this这位老大哥，相信大家不会陌生。大家在遇到this时，很多朋友难免会有个疑问：“这个this是什么，它到底指向谁？”

今天，博主针对this的指向问题，进行了整理。本篇博客，博主给大家详尽介绍了不同情况下，this的指向！！以下奉上博主总结的关于this的指向详解，希望对各位开发者朋友有所帮助：

1、谁最终调用函数，this指向谁。

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

2、*****this指向的规律(与函数调用的方式息息相关)

this指向的情况，取决于函数调用的方式有哪些：
①通过函数名()直接调用的：this指向window
②通过对象.函数名()调用的：this指向这个对象；
③函数作为数组的一个元素，通过数组下标调用的：this指向这个数组
④函数作为window内置函数的回调函数调用时：this指向window
setTimeout(func,1000);setInterval等
⑤函数作为构造函数，用new关键字调用时：this指向的是new出的新对象

实例演示：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>this详解</title>

</head>

<body>

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

</body>

<script type="text/javascript">

function func (name) {

console.log(this);

}

func();//window

//狭义对象

var obj={

name:"obj",

func1:func

};

obj.func1();//obj

//广义对象

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

this.style.backgroundColor="red";

};//this指向div    

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

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

arr[0]();

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

setTimeout(func,1000);

//setInterval等

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

var obj=new func;//this指向的是new出的新obj

/*

* 综合小练习

*/

var obj1={

name:"obj1",

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

}

document.getElementById("div").onclick=obj1.arr[0]();//函数最终调用者：setTimeout；符合规律⑤，this指向window

var obj1={

name:"obj1",

arr:[func,1,2,3]

}

document.getElementById("div").onclick=obj1.arr[0]();//函数最终调用者：arr数组下标；符合规律③，this指向arr

var obj1={

name:"obj1",

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

}

document.getElementById("div").onclick=obj1.arr[0].fun();//函数最终调用者：对象；符合规律②，this指向{name:'arrObj',fun:func}这个对象

</script>

</html>

　　　　以上为本期分享内容，希望本篇博客可以对广大开发者朋友有所帮助！如果有需要补充的部分，可在下方评论区予以补充。

如果本篇内容对你有所帮助，欢迎收藏，原创内容，欢迎大家积极评论转载和推荐！

JavaScript面向对象编程—this详解的更多相关文章

  1. JavaScript中的面向对象编程，详解原型对象及prototype，constructor，proto，内含面向对象编程详细案例（烟花案例）

    面向对象编程:   面向:以什么为主,基于什么模式 对象:由键值对组成,可以用来描述事物,存储数据的一种数据格式 编程:使用代码解决需求   面向过程编程:         按照我们分析好的步骤,按步 ...

  2. 【JavaScript脚本编程技术详解-----（一）】

    首先说明,本系列教程是写给有一定的JavaScript编程基础的同学看的,最好还有其它的编程语言经验,因为里面可能涉及一些其它的程序设计语言写的源代码,这都是我自己总结的经验,我喜欢在学习一门新的编程 ...

  3. javascript 特殊的面向对象以及继承详解(入门篇)

    学习Javascript人,大多听说一句话叫js里面一切都是对象.我刚开始接触javascript面向对象编程时候,挺乱的,我当时习惯性的把PHP的面像对象思想套用在js上面,其实js的面向对象与传统 ...

  4. JavaScript面向对象编程学习笔记

    1  Javascript 面向对象编程 所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量.对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例 ...

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

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

  6. Javascript常用的设计模式详解

    Javascript常用的设计模式详解 阅读目录 一:理解工厂模式 二:理解单体模式 三:理解模块模式 四:理解代理模式 五:理解职责链模式 六:命令模式的理解: 七:模板方法模式 八:理解javas ...

  7. JavaScript面向对象编程（2）-- 类的定义

    最近这一段时间事情太多了,没有时间再继续写,幸好这两天有点小闲,先小写一下JavaScript中面向对象一中推荐的方法.本文承接上一篇JavaScript面向对象编程(1) -- 基础. 上篇说过,J ...

  8. JavaScript进阶内容——DOM详解

    JavaScript进阶内容--DOM详解 当我们已经熟练掌握JavaScript的语法之后,我们就该进入更深层次的学习了 首先我们思考一下:JavaScript是用来做什么的? JavaScript ...

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

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

随机推荐

  1. iOS开发之Quartz2D

    1.         Quartz2D概述及作用 Quartz2D的API是纯C语言的,Quartz2D的API来自于Core Graphics框架. 数据类型和函数基本都以CG作为前缀,比如: CG ...

  2. 从PRINCE2引起项目失败的共性原因？

    一.项目与组织的关键战略优先排序之间缺乏明确的联系 项目必须体现和贯彻发起者的目标.每个项目是怎样支持这些目标的,怎样对项目进行优先排序能提供最大的回报,这些都应该能明确地表述出来. PRINCE2持 ...

  3. Java并发编程：JDK中的阻塞队列

    上次我们讲了一些常用的4个阻塞队列,但是在JDK中还提供了其他的一些阻塞队列.这篇文章将全面介绍一下JDK中的所有阻塞队列,并比较他们的区别. JDK7提供了7个阻塞队列.分别是 ArrayBlock ...

  4. Python：generator的send()方法流程分析

    先来一个简单地例子: def foo(): print('starting') while True: r = yield 2 print(r) f = foo() print(f.send(None ...

  5. 少走弯路——Android对话框AlertDialog.Builder使用方法简述

    android的自定义对话框,不需要通过继承的方式来实现,因为android已提供了相应的接口Dialog Builder ,下面就是 样例: new AlertDialog.Builder(this ...

  6. 跨web浏览器的IC卡读卡器解决方案

    BS结构的程序,如果要与IC卡读卡器通信本身就是件不容易解决的事情.微软的activex ocx技术将这种应用限制在IE浏览器上了,不兼容其它的浏览器.而Chrome使用插件也不兼容IE和其他的浏览器 ...

  7. NodeJs之http

    创建新的服务器 创建一个简单的服务 var http = require("http"); var server = http.createServer(); server.lis ...

  8. JavaWeb项目实现文件上传动态显示进度

    很久没有更新博客了,这段时间实在的忙的不可开交,项目马上就要上线了,要修补的东西太多了.当我在学习JavaWeb文件上传的时候,我就一直有一个疑问,网站上那些博客的图片是怎么上传的,因为当提交了表单之 ...

  9. 为什么不能将客户端的连接请求跳转或转发到本机lo回环接口上？

    一.为什么不能将本机的请求跳转/转发到回环接口上? 如上图一样,服务器对外只开放了一个80端口,但是web服务监听在了lo 接口上8080端口上,现在要实现外网通过访问服务器的80端口,来提供web服 ...

  10. 使用Maven整合SSM总结

    项目环境: spring-4.3.7 + mybatis-3.3.0 + maven-3.3.9 + oracle11g 1. 首先使用maven引入相关依赖: pom.xml: <projec ...