JS中控制好this关键字的指向
javascript中的 this 的指向不太好控制,理解不好的话很容易错误
下面几个示例可以加深对this指向的理解
(1)内联事件
<a href="#" onclick="alert(this.tagName)">
click me
</a>
这种情况可以正常弹出a
<a href="JavaScript:alert(this.tagName)">
click me2
</a>
这样就不行了,会弹出 "undefined"
因为使用 JavaScript: 相当于定义了一个全局函数,this则指向 window对象
如果定义一个全局变量,如
var tagName = 'tag name';
再点击’click me2‘时就会弹出 'tag name'
(2)setTimeout和setInterval
//全局变量
var name = "全局";
var duang = {
name: "局部",
hi: function() { alert("我是 " + this.name); }
};
duang.hi();
执行结果为“我是 局部”
setTimeout( duang.hi, 1000);
setInterval( duang.hi, 1000);
这两种情况都会弹出“我是 全局”
因为setTimeout和setInterval都会改变this的指向为window
(3)Dom节点.on×××
<button id="btn" name="button">
btn
</button>
var btn = document.getElementById("btn");
var duang = {
name: "duang",
hi: function() { alert("I'm " + this.name); }
};
btn.onclick = duang.hi;
点击按钮后,并没弹出duang的name属性值,而是弹出了button的name属性
说明这种方法会使this指向dom节点本身
如果想this指向duang对象,可以使用匿名函数解决
btn.onclick = function (){
duang.hi();
}
上面的setTimeout和setInterval情况也可以使用此方法处理
setTimeout( function (){ duang.hi();}, 1000);
setInterval( function (){ duang.hi();}, 1000);
可以看到,这种直接调用和通过匿名函数间接调用 对this的指向影响很大,开发时需要特别注意
(4)call和apply
接着上面的例子,改动一下调用方式
<button id="btn" name="button">
btn
</button>
var name = "全局";
var btn = document.getElementById("btn");
var duang = {
name: "duang",
hi: function() { alert("I'm " + this.name); }
};
btn.onclick = function (){
duang.hi.call();
}
这里使用了匿名函数,但是通过call方法调用了duang对象的hi函数
这时的点击结果为 "I'm 全局",说明this指向了window对象
注意,使用call和apply调用方法时,this的指向会被改为window
- [快学Python3]函数
- [快学Python3]循环控制
- [linux][kprobe]谁动了我的文件---使用kprobe找到目标进程
- [快学Python3]if条件控制
- codeforces 767A Snacktower(模拟)
- [快学Python3]Sets(集合)
- [nptl][rwlock]pthread rwlock原理分析
- [快学Python3]Dictionary(字典)
- [快学Python3]List(列表)
- [快学Python3]Tuple(元组)
- HDU 1248 寒冰王座(完全背包裸题)
- [快学Python3]String(字符串)
- [快学Python3]XML解析处理 - Element Tree
- Educational Codeforces Round 21(A.暴力,B.前缀和,C.贪心)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- android实现微信联合登录开发示例
- 详解Android WebView加载html片段
- Ubuntu 20.04最佳配置指南(新手必备)
- ScrollView与SeekBar绑定实现滑动时出现小滑块效果
- Android用StaticLayout实现文字转化为图片效果(类似长微博发送)
- Android中Dialog自定义上下文花式菜单
- Android ListView与getView调用卡顿问题解决办法
- Android四种数据存储的应用方式
- ViewDragHelper实现QQ侧滑效果
- Android实现双击TitleBar回顶部的功能示例代码
- windows10 更新Ubuntu20.04 LTS的方法步骤
- Android 中解决Viewpage调用notifyDataSetChanged()时界面无刷新的问题
- 基于自定义Toast全面解析
- Android中DialogFragment自定义背景与宽高的方法
- Android 常用log 关键字