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 ...
随机推荐
- IDEA启动项目内存溢出
一.java.lang.OutOfMemoryError: Java heap space 1.在tomcat设置界面 VM options添加参数 -server -XX:PermSize=512 ...
- 重写用户模型时报错AttributeError: type object ‘自定义类’ has no attribute ‘USERNAME_FIELD’
view中导入:from django.contrib.auth.models import AbstractBaseUser settings.py中设置了:AUTH_USER_MODEL='app ...
- varnish 测试
安装 通过epel 源 yum 安装 [root@localhost varnish]# rpm -ql varnish /etc/logrotate.d/varnish /etc/varnish / ...
- Linux命令-cut篇
Cut 命令是常用的 Linux 命令,在这里总结一下平时常用的参数和用法,方便查证. 常用参数: -b:以字节为单位进行分割: -c:以字符为单位进行分割: -d:自定义分割符进行分割,默认为制表符 ...
- [darknet]查看错误结果 sight of wrong
import os import numpy import cv2 bad_label_file = open("bad_valid.list",'r') names = [] f ...
- word模板导出的几种方式:第一种:占位符替换模板导出(只适用于word中含有表格形式的)
1.占位符替换模板导出(只适用于word中含有表格形式的): /// <summary> /// 使用替换模板进行到处word文件 /// </summary> public ...
- 复旦高等代数II(18级)每周一题
本学期将继续进行高等代数每周一题的活动.计划从第一教学周开始,到第十五教学周结束,每周的周末公布一道思考题(预计15道),供大家思考和解答.每周一题将通过“高等代数官方博客”(以博文的形式)和“高等代 ...
- idea工具和激活码获取
1.下载最新的idea https://blog.csdn.net/mashuai720/article/details/79389314 2.获取激活码 最后一个有效,亲测 https://blog ...
- DRF认证组件流程分析
视图函数中加上认证功能,流程见下图 import hashlib import time def get_random(name): md = hashlib.md5() md.update(byte ...
- mac 使用iTerm2快捷登录远程服务器
mac 使用iTerm2快捷登录远程服务器 正常使用ssh登录服务器: ssh -p port user@host user@host's password: 输入端口,用户名,服务器ip地址后,还需 ...