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. 在Windows的DOS中运行java编程中的问题

    1.苦恼着我的就是找不到或无法加载主类!

  2. Tomcat 优化和性能监测

    1. JVM 优化(Tomcat 启动行参数) Linux 修改 catalin.sh Windows 修改 catalin.bat   Linux系统中tomcat的启动参数 export JAVA ...

  3. Vue.js 2.2 卡片api

    给vue开发者和爱好者发送点福利! 卡片上一共117个api,方便查阅 网址: https://vuejs-tips.github.io/cheatsheet Github: https://gith ...

  4. z-index失效的原因

    在做的过程中,发现了一个很简单却又很多人应该碰到的问题,设置Z-INDEX属性无效.在CSS中,只能通过代码改变层级,这个属性就是z-index,要让z-index起作用有个小小前提,就是元素的pos ...

  5. IOS简单画板实现

    先上效果图 设计要求 1.画笔能设置大小.颜色 2.有清屏.撤销.橡皮擦.导入照片功能 3.能将绘好的画面保存到相册 实现思路 1.画笔的实现,我们可以通过监听用户的 平移手势 中创建 UIBezie ...

  6. dubbo的简单实现

    一 是什么 一般网站架构随着业务的发展,逻辑越来越复杂,数据量越来越大,交互越来越多,dubbo使前后端分离,完成负载均衡. dubbo架构图 节点角色说明: Provider: 暴露服务的服务提供方 ...

  7. Intellj IDEA 简易教程

    Intellj IDEA 简易教程 目录 JDK 安装测试 IDEA 安装测试 调试 单元测试 重构 Git Android 其他 参考资料 Java开发IDE(Integrated Developm ...

  8. Ubuntu上手动安装Kubernetes

    背景 两台Ubuntu16.04服务器:ip分别为192.168.56.160和192.168.56.161.. Kubernetes版本:1.5.5 Docker版本:1.12.6 etcd版本:2 ...

  9. 设计模式的征途—2.简单工厂（Simple Factory）模式

    工厂模式是最常用的一种创建型模式,通常所说的工厂模式一般是指工厂方法模式.本篇是是工厂方法模式的“小弟”,我们可以将其理解为工厂方法模式的预备知识,它不属于GoF 23种设计模式,但在软件开发中却也应 ...

  10. WebGL 高级技术

    1.如何实现雾化 实现雾化的方式由多种,这里使用最简单的一种:线性雾化(linear fog).在线性雾化中,某一点的雾化程度取决于它与视点之间的距离,距离越远雾化程度越高.线性雾化有起点和终点,起点 ...