技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置：首页 --> JavaScript --> Javascript中的this

Javascript中的this

浏览:2211次  出处信息

Javascript是一个伟大语言，在前些年对于他有些误解，但是开发人员又重新发现了他的美丽与优雅。如果你不喜欢javascript大概是因为：

  • 对于浏览器的兼容性问题很头疼―其实这不是javascript的错
  • 你把javascript和基于类的语言相比，比如c++ c# java等―javascript的表现并不如你所预期

这其中，最让人困惑的就是’this’关键字。在大多数的语言中，’this’都是指代当前类。而在javascript中，’this’是指拥有这个方法的对象，这取决于函数被谁调用。

全局作用域

如果没有当前对象，’this’通常指代全局对象，在浏览器中就是’window’，代表document,location,history和其他有用的属性和方法的顶级变量。

1
2
3
4

window.WhoAmI = "I'm the window object";
alert(window.WhoAmI);
alert(this.WhoAmI); // I'm the window object
alert(window === this); // true

调用一个函数

如果你调用一个函数，那么’this’还是指代全局对象：

1
2
3
4
5
6

window.WhoAmI = "I'm the window object";
function TestThis() {
     alert(this.WhoAmI); // I'm the window object
     alert(window === this); // true
}
TestThis();

调用对象的方法

当你调用一个对象的构造函数或者他的方法，’this’就指代这个对象本身，跟大多数的机遇类的语言一样：

1
2
3
4
5
6
7
8
9
10
11
12
13

window.WhoAmI = "I'm the window object";
function Test() {
     this.WhoAmI = "I'm the Test object";
     this.Check1 = function() {
          alert(this.WhoAmI); // I'm the Test object
     };
}
Test.prototype.Check2 = function() {
     alert(this.WhoAmI); // I'm the Test object
};
var t = new Test();
t.Check1();
t.Check2();

使用call或者apply

从本质上来说，call或者apply一个javascript的方法，就是调用另一个对象的方法，我们通过一个例子来说明：

1
2
3
4
5
6
7
8
9

function SetType(type) {
     this.WhoAmI = "I'm the "+type+" object";
}
var newObject = {};
SetType.call(newObject, "newObject");
alert(newObject.WhoAmI); // I'm the newObject object
var new2 = {};
SetType.apply(new2, ["new2"]);
alert(new2.WhoAmI); // I'm the new2 object

call和apply唯一的区别在于，call的参数需要一一传入，apply的参数是通过一个数组传入的。

这就是’this’，总之，可能还有一些其他的陷阱让你遇到，我们后面再讨论。

建议继续学习：

  1. 揭秘JavaScript中谜一样的this    (阅读：3629)
  2. jQuery之不要滥用$(this)    (阅读：2495)
  3. JavaScript中的this关键字    (阅读：2387)
  4. 深入理解Javascript之this关键字    (阅读：2195)
  5. 正确理解javascript的this关键字    (阅读：1922)
  6. 匿名类型的硬伤：围绕this的成员捕获策略    (阅读：1820)
  7. 匿名类型的硬伤：围绕this的成员捕获策略    (阅读：1673)
  8. Javascript的this用法    (阅读：1617)
  9. 理解JavaScript 中的 this    (阅读：1487)
  10. 关于回调函数和this指针探讨    (阅读：1427)
QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：如何编写高质量的Javascript代码
后一篇：Javascript诞生记 >>
文章信息
© 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1