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
- 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 数组属性和方法