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

理解JavaScript 中的 this

浏览:1488次  出处信息

本文解释JavaScript中的this，希望有助你理解this的工作机制。作为JavaScript程序员，学习this对于你的发展有很大帮助，可以说利大于弊。

this的工作原理

如果一个函数被作为一个对象的方法调用，那么this将被指派为这个对象。

  1. var parent ={
  2.     method:function(){
  3.         console.log(this);
  4. }
  5. };
  7. parent.method();
  8. //< - parent

注意这种行为非常“脆弱”，如果你获取一个方法的引用并且调用，那么this的值不会是parent了，而是window全局对象。这让大多数开发者迷惑。

  1. var parentless = parent.method;
  3. parentless();
  4. //< - Window

底线是你应该查看调用链，以理解被调用函数是一个对象的属性还是它自己。如果它被作为属性调用，那么this的值将变成该属性的对象，否则this的值将被指派为全局对象或window。如果在严格模式下，this的值将是undefined。

在被当作构造函数的情况下，当使用new关键字时，this将被指派为被创建的实例对象。

  1. functionThisClownCar(){
  2.   console.log(this);
  3. }
  5. newThisClownCar();
  6. //< - ThisClownCar {}

注意，在这种情况下没有办法识别出一个函数是否应该被用作构造函数，因此省略new关键字导致this的结果将是全局对象，就像我们上面看到的没有用parent调用的例子。

  1. ThisClownCar();
  2. //< - Window

改动this

.call、 .apply 和.bind 方法用来操作调用函数的方式，帮我们定义this的值和传递给函数的参数值。

Function.prototype.call 可以有任意数量的参数，第一个参数被分配给this，剩下的被传递给调用函数。

  1. Array.prototype.slice.call([1,2,3],1,2)
  2. //< - [2]

Function.prototype.apply 的行为和.call类似，但它传递给函数的参数是一个数组，而不是任意参数。

  1. String.prototype.split.apply('13.12.02',['.'])
  2. //< - ['13', '12', '02']

Function.prototype.bind 创建一个特殊的函数，该函数将永远使用传递给.bind的参数作为this的值，以及能够分配部分参数，创建原函数的珂里化（curride）版本。

  1. var arr =[1,2];
  2. var add =Array.prototype.push.bind(arr,3);
  4. // effectively the same as arr.push(3)
  5. add();
  7. // effectively the same as arr.push(3, 4)
  8. add(4);
  10. console.log(arr);
  11. //< - [1, 2, 3, 3, 4]

作用域链中的this

在下面的例子，this将无法在作用域链中保持不变。这是规则的缺陷，并且常常会给业余开发者带来困惑。

  1. function scoping (){
  2.   console.log(this);
  4. returnfunction(){
  5.     console.log(this);
  6. };
  7. }
  9. scoping()();
  10. //< - Window
  11. //<- Window

有一个常见的方法，创建一个局部变量保持对this的引用，并且在子作用域中不能有同命变量。子作用域中的同名变量将覆盖父作用域中对this的引用。

  1. function retaining (){
  2. var self =this;
  4. returnfunction(){
  5.     console.log(self);
  6. };
  7. <
						
										
    
						
						
						
					
    
										

					
										
    建议继续学习：
    
					
      
													
    1. 揭秘JavaScript中谜一样的this    (阅读：3630)
      2. 
													
    2. jQuery之不要滥用$(this)    (阅读：2495)
      3. 
													
    3. JavaScript中的this关键字    (阅读：2387)
      4. 
													
    4. 深入理解Javascript之this关键字    (阅读：2195)
      5. 
													
    5. Javascript中的this    (阅读：2211)
      6. 
													
    6. 正确理解javascript的this关键字    (阅读：1922)
      7. 
													
    7. 匿名类型的硬伤：围绕this的成员捕获策略    (阅读：1821)
      8. 
													
    8. 匿名类型的硬伤：围绕this的成员捕获策略    (阅读：1673)
      9. 
													
    9. Javascript的this用法    (阅读：1618)
      10. 
													
    10. 关于回调函数和this指针探讨    (阅读：1427)
      11. 
												
					
    
										
					
					
					
					
    
						QQ技术交流群：445447336，欢迎加入！
    
						扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：javascript DOM操作中的insertAdjacentHTML方法
后一篇：cookie窃取和session劫持 >>
文章信息
© 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1