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

理解JavaScript 中的 this

浏览:1490次  出处信息

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

this的工作原理

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

  1. var parent ={

  2.    method:function(){

  3.        console.log(this);

  4. }

  5. };

  6. parent.method();

  7. //< - parent

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

  1. var parentless = parent.method;

  2. parentless();

  3. //< - Window

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

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

  1. functionThisClownCar(){

  2.  console.log(this);

  3. }

  4. newThisClownCar();

  5. //< - 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);

  3. // effectively the same as arr.push(3)

  4. add();

  5. // effectively the same as arr.push(3, 4)

  6. add(4);

  7. console.log(arr);

  8. //< - [1, 2, 3, 3, 4]

作用域链中的this

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

  1. function scoping (){

  2.  console.log(this);

  3. returnfunction(){

  4.    console.log(this);

  5. };

  6. }

  7. scoping()();

  8. //< - Window

  9. //<- Window

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

  1. function retaining (){

  2. var self =this;

  3. returnfunction(){

  4.    console.log(self);

  5. };

  6. <

    建议继续学习:

    1. 揭秘JavaScript中谜一样的this    (阅读:3630)
    2. jQuery之不要滥用$(this)    (阅读:2496)
    3. JavaScript中的this关键字    (阅读:2390)
    4. 深入理解Javascript之this关键字    (阅读:2196)
    5. Javascript中的this    (阅读:2214)
    6. 正确理解javascript的this关键字    (阅读:1923)
    7. 匿名类型的硬伤:围绕this的成员捕获策略    (阅读:1822)
    8. 匿名类型的硬伤:围绕this的成员捕获策略    (阅读:1674)
    9. Javascript的this用法    (阅读:1620)
    10. 关于回调函数和this指针探讨    (阅读:1427)
    QQ技术交流群:445447336,欢迎加入!
    扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1