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. 实例PK(Vue服务端渲染 VS Vue浏览器端渲染)

    Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...

  2. [微信小程序]初试——成绩分析小程序问题总结

    文件类型说明 第一次打开微信小程序的开发者工具,就是下面这个样子. 好多已经存在的默认文件 .js .json .wxml .wxss 首先当然要搞懂这些文件都是干什么的 app.js是小程序的脚本代 ...

  3. 微服务--webapi实现,脱离iis,脱离tomcat

    前言 微服务,顾名思义就是微小的单一的服务程序,单一流程,单一发布,开发和部署都可独立: 这是我的理解: 但基于web的服务,不管是webservice还是webapi等类似的服务都需要基于iis或者 ...

  4. 创建keystone的catalog时提示:‘Internal Server Error (HTTP 500)’

    在生成keystone的catalog时: [root@controller ~]# openstack service create --name keystone --description &q ...

  5. build.gradle代码

    Android Studio 这么强大的工具,就算我们不懂 gradle, groovy, 也照样能借助AS对 Android 项目进行编译.调试.运行.打包等操作.build.gradle 这个文件 ...

  6. 使用U盘安装ubuntu 12.04(使用大白菜u盘启动工具)

    家里有个u盘启动盘,用大白菜U盘工具做的. 1.把iso文件放到u盘里,把ISO文件中的casper目录下的vmlinuz和initrd拷贝到u盘根目录下: 2.修改启动顺序,选u盘启动: 3.启动时 ...

  7. ArcGIS API for JavaScript 4.2学习笔记[30] 点和线高程查询(第八章完结)

    终于到最后一篇了,可喜可贺. 本例先说明了如何进行单点的高程差分析,然后说明了道路的起伏分析.前者很直观地比较了两个年份的高程数据之间的差值,体现山区的高程变化(有啥用啊?)后者,一条路上的起点终点起 ...

  8. 前端开发框架简介:angular和react

    作者:vienwu react是facebook推出一个用来构建用户界面的js库.官方介绍的三大特性如下: just the ui 把react只当作一个ui组件就好,等同于传统mvc中的view. ...

  9. mui上拉加载

    最近在做移动端的项目,用到了mui的上拉加载,整理如下: 1.需要引入的css.js <link rel="stylesheet" href="common/mui ...

  10. appium+python做移动端自动化测试

      1 导言 1.1 编制目的 该文档为选用Appium作为移动设备原生(Native).混合(Hybrid).移动Web(Mobile Web)应用UI自动化测试的相关自动化测试人员.开发人员等提供 ...