[关闭]
@GivenCui 2016-05-25T11:14:26.000000Z 字数 2229 阅读 821

重新认识this关键字

js高级

目录

JS课程合集跳转链接

一.概念

在JS中,所有函数都运行在某个运行环境中,对于JS而言,一切皆对象,运行环境也是对象,所以函数中的this关键字的指向,也是根据当前对象(运行环境)而定的.

  1. // this关键字的举例
  3. // 在构造函数中,this指向的就是该构造函数所创建的实例对象.
  4. function Person () {
  5.     this.name = "abc";
  6. }
  8. var person1 = new Person();
  9. person1.name = "bcd";
  10. console.log(person1.name);      // bcd
  12. var person2 = new Person();
  13. console.log(person2.name);      // abc
  15. // this自动找到实例对象的指针,可以理解为已经关联好了
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>强大的this</title>
  6.     <script type = "text/javascript">
  8.         // this在这种运行环境中,就代表当前点击的按钮对象
  9.         function btnClick (ele){
  10.             alert(ele.value);  // 谁点就指向谁
  12.         }
  13.     </script>
  14. </head>
  15. <body>
  17. <input type = "button" value = "这是一个按钮" onclick="btnClick(this);" />
  19. <input type = "button" value = "这是另一个按钮" onclick="btnClick(this);" />
  20. </body>
  21. </html>

二 . 进阶

在JS中,因为JS是动态脚本语言,运行环境是动态切换的,即this关键字的指向也是跟着动态切换的.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>this随环境动态切换</title>
  7. </head>
  8. <body>
  9. <script type = "text/javascript">
  10.     function fn () {
  11.         console.log(this.name)
  12.     }
  14.     // 创建一个字面量对象 ( JSON )
  16.     var a = {
  17.         name : "a",
  18.         aFn : fn   // 是个对象
  19.     }
  21.     // 再创建一个字面量函数
  23.     var b = {
  24.         name : "b";
  25.         bFn : fn   // 是个对象,也指向fn
  26.     }
  28.     // 提现了根据环境动态切换
  29.     a.aFn();    //  a
  30.     b.bFn();    //  b  
  32. </script>   
  33. </body>
  34. </html>

this关键字的使用场景

1.全局环境中

全局环境中this指向的是最顶端的window对象

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script type = "text/javascript">
  7.         // 1. this的全局环境指向window
  8.         console.log(this === window);   // true
  9.     </script>
  10. </head>
  11. <body>
  13. </body>
  14. </html>

2.构造函数中

构造函数中this指向的是该构造函数所创建的实例对象

  1. // this在构造函数中
  2. function(){
  3.     this.name = "张飞";
  4. }
  6. Person.prototype.say = function () {
  7.     console.log (this.name);
  8. }
  10. // 创建一个实例
  11. var person = new Person();
  12. person.say();   //  张飞

3.对象方法中

如果某个对象的方法指向了另外一个对象的某个方法,那么方法内部的this指向也会发生变化.

  1.     // 对象方法中
  2.     // 用字面量方式创建的对象
  3.     // a有name属性和aFn方法
  5.     var a = {
  6.         name : "a",
  7.         aFn : function () {
  8.             alert(this.name)
  9.            //  alert(a.name)   // 字面量可以这么写
  10.         }
  11.     }
  13.     var b = {
  14.         name : "b",
  16.         // 为什么是b呢????
  17.         // bFn : a.aFn 是取了地址指向了b所以b调用
  18.         // 如何改成 bFn : a.aFn()  
  19.         // 是指把a.aFn()的返回值给了bFn;
  20.         // 有函数()就是调用的函数 
  22.         /*
  23.         bFn : a.aFn  // b
  24.         */
  26.         /*
  27.         bFn : function () {
  28.             a.aFn()     // a
  29.         }
  30.         */
  31.     }

4. 常见问题

如果某个对象的层次机构很深,我们想把某个方法提取出来,不要直接去提取方法,而是提取方法所在的对象.

  2. // json的多层嵌套
  4. // c对象中有d对象
  6. var c = {
  7.     d : {
  8.         name : "刘a",
  9.         fn :　function () {
  10.             console.log(this.name);
  11.             console.log(this === window);
  12.         }
  13.     }
  14. }
  16. // 提取fn函数,目的为了简化开发
  18. /*
  19. // 提取出来了(这么提取不对)
  20. var myfn = c.d.fn;          // myfn是个全局变量,存的只是地址
  22. // 这么提取的话,函数内部的this指向变成了window对象
  23. // 因为myfn是一个全局变量
  24. myfn();     //  undefined  true
  25. */
  27. // 正确的提取方法
  28. // 如果想把fn函数提取出来,而且this指针不改变的话,那么就提取fn函数所在的对象
  30. var myObj = c.d;        // myObj是个对象
  31. myObj.fn1();            //  刘
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注