【JavaScript中的this详解】
前言
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详解】的更多相关文章
- JavaScript正则表达式详解（二）JavaScript中正则表达式函数详解
二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...
- (转)javascript中event对象详解
原文:http://jiajiale.iteye.com/blog/195906 javascript中event对象详解 博客分类: javaScript JavaScriptCS ...
- JavaScript中的this详解
前言 this用法说难不难,有时候函数调用时,往往会搞不清楚this指向谁?那么,关于this的用法,你知道多少呢? 下面我来给大家整理一下关于this的详细分析,希望对大家有所帮助! this指向的 ...
- Javascript中prototype属性详解 （存）
Javascript中prototype属性详解 在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不 ...
- JavaScript 中 this 的详解
this 的指向 this 是 js 中定义的关键字,它自动定义于每一个函数域内,但是它的指向却让人很迷惑.在实际应用中,this 的指向大致可以分为以下四种情况. 原文作者:林鑫,作者博客:http ...
- JavaScript中的arguments详解
1. arguments arguments不是真正的数组,它是一个实参对象,每个实参对象都包含以数字为索引的一组元素以及length属性. (function () { console.log(ar ...
- javascript中的操作符详解1
好久没有写点什么了,根据博主的技术,仍然写一点javascript新手入门文章,接下来我们一起来探讨javascript的操作符. 一.前言 javascript中有许多操作符,但是许多初学者并不理解 ...
- Javascript中prototype属性详解
在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...
- [No000069]Javascript中this关键字详解
Quiz 请看下面的代码,最后alert出来的是什么呢?(chrome下按F12,选择Console直接复制粘贴运行) var name = "Bob"; var nameObj ...
随机推荐
- XJOI1657&Codevs1255搭积木【树状动规】
搭积木 一种积木搭建方式,高为H的积木,最底层有M个积木,每一层的积木数是他的低一层的积木数+1或-1.总共有N个积木.(且每行积木数不超过10)比如上图N=13 H=6 M=2. 输入格式: 第一行 ...
- 【Egret】使用VSCode 编译，断点调试Egret项目
经过我日积月累的摸索,还是一直模模糊糊的,搞不懂,今天经晨哥点拨两下,一下子就恍然大悟,搞定了怎么弄这个东西,现将经验分享如下. 一.效果目的 1.在VSCode里,直接F5打开Egret页面,并且可 ...
- 回答： 2017-03-19的关于css+div布局的疑问 2017-04-05
原问题为红色,回答为黑色 第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个 ...
- [Linux] PHP程序员玩转Linux系列-nginx初学者引导
1.PHP程序员玩转Linux系列-怎么安装使用CentOS 2.PHP程序员玩转Linux系列-lnmp环境的搭建 3.PHP程序员玩转Linux系列-搭建FTP代码开发环境 4.PHP程序员玩转L ...
- koa-中间件流程控制
koa中间件执行流程 koa中间件的的执行顺序是洋葱模型,外层逐步向内,执行到最中间再逐步向外扩展,实现这个顺序的模型需要依赖于generator函数,它可以暂停执行将控制权交出,等到执行next再得 ...
- 如何快速将本地项目托管到到github上？
1,打开你的本地项目文件夹,比如 test-demo: 2,打开github(没有github的要自己注册下), 点击new repository 3,填写项目信息,创建项目 4,复制新建的项目url ...
- linux C/C++ 日志打印函数
//宏定义日志文件名 #define PROCESSNAME "log_filename" //当日志文件大于5M时,会删除该文件,该接口使用方法 参照printfvoid Wr ...
- linux下安装node
经过一番的折腾终于在linux上安装了node,记录下来以免忘记 1.下载node 去官网下载最新的linux版本下对应node.js,node-v6.10.2-linux-x64.tar.gz 2. ...
- stm32之USART学习
首先,我是看着这位博主的文章受到的启发,进而加深了自己对USART的理解.下面是自己改装并实验过的程序. 原文:http://www.cnblogs.com/greatwgb/archive/2011 ...
- ASP.NET MVC 常用扩展点：过滤器、模型绑定等
一.过滤器(Filter) ASP.NET MVC中的每一个请求,都会分配给对应Controller(以下简称“控制器”)下的特定Action(以下简称“方法”)处理,正常情况下直接在方法里写代码就可 ...