首页 > 代码库 > JS中简单的this学习

JS中简单的this学习

2024-07-06 16:14:34   226人阅读

    我在学习JS初期，在使用this的时候经常出现问题，当然就是在现在，也有一些场景不能很好的明白this到底指代的是什么？看下面一个例子：
 　
?
1
2
3
4
5
6
7
8
9
10
var x = 10;
   var foo = {
       x: 20,
       bar: function() {
           alert(this.x);
       }
   }
   var bar = foo.bar;
   foo.bar();    //20
   bar();    //10

　　

    其实最开始我想的结果都应该是20的，因为都是foo对象的方法，该方法调用的时候，this当然指的就是foo本身吗？其实这个观点是错误的，直到今天我才稍稍的明白了，this到底指的是什么？怎么才能找到正确的this。
 
    有一种说法是：this是在函数定义的时候就确定好的，其实这种说法是有问题。事实上this是在代码执行的过程中才被定义，并且不能通过赋值的方法进行改变。下面举一个简单的例子：
    
?
1
2
3
4
5
6
function bar() {
        console.log(this);
    }
     bar(); //window 其实是global对象
    console.log(bar === bar.prototype.constructor); //true
    bar.prototype.constructor();    //bar.prototype
 
    如果按照上面的说法，上面this永远都是window，不会变成bar.prototype。其实我并没有改变什么，只是改变了调用方式，所以在不同的执行上下文中，this的值是不相同，那么到底是根据什么来确定this呢？
 
    在讲解之前，熟悉一个概念：引用类型。什么是引用类型呢？在ECMAScript里头，引用类型就是用来保存数据和方法的，别的语言称之为"类"(Class)。虽说ECMAScript是面向对象的语言，但在ECMAScript里，缺少面向对象的概念——类和接口。所以，ECMAScript里不能称为类，我们称为：对象定义。引用类型的值就是一个实例化的对象，我们会通过构造函数来实例化对象进行操作。
 
    this值的存在，必然是伴随这函数的执行。如果这个函数是引用类型，那么this就是该引用类型；如果不是引用类型，this就是null，此时会被隐式的转换成全局对象global（表现为window）对象。更详细的解释是：
 　
?
1
2
3
4
5
6
The value of this in a function context is provided by the caller and determined by the current form of a call expression (how the function call is written syntactically).
  
If on the left hand side from the call parentheses ( ... ), there is a value of Reference type then this value is set to the base object of this value of Reference type.
 
 
In all other cases (i.e. with any other value type which is distinct from the Reference type), thisvalue is always set to null. But since there is no any sense in null for this value, it is implicitlyconverted to global object.

　　

    那么来看一个经典的例子：
    
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var foo = {
          bar: function () {
 
              console.log(this);
 
          }
 
      };
    foo.bar(); // Reference, OK => foo
 
    (foo.bar)(); // Reference, OK => foo
 
    (foo.bar = foo.bar)(); // global
 
    (false || foo.bar)(); // global
 
 (foo.bar, foo.bar)(); // global

　　

    首先需要了解的是()操作符，组操作符只是分组，不会改变数据的类型；并且在运算的时候，会改变优先级；其次就是函数执行的时候会使用()。
    第一个和第二个很明显左边的都是引用类型
    之所以，后三个改变了this，是因为=、||、,等运算符会改变引用类型为普通的函数对象，此时this都为null，都会被隐式的转化成global对象。
 
    说了这么多，可能对this，有了进一步的了解。之前说了，不能通过赋值的方法改变this的值，那可以通过什么途径改变呢？唯一的途径就是改变它的执行上下文（调用函数的方式），那有哪些方法可以改变执行上下文呢？
 
    定义一个构造函数
 　
?
1
2
3
4
function person() {
        console.log(this);
   }
   person();    //window（global）

　　

    1.通过new方法，可以将this改编成该实例化对象
    2.通过call或者apply可以改变成新的对象
    
    最后一点，在执行上下文中，this永运不会为null或者undefined(可能这种表达方式有点儿为问题，这里指的是最终表现)，要么是引用类型的值，要么是global对象（一方面本身就是global对象，另一方面会将null隐式转换成global对象）。
    
    本身也是学习阶段，可能会有理解不清楚的地方，希望给位不吝赐教。
 
    参考文献：
    http://dmitrysoshnikov.com/ecmascript/chapter-3-this/
    http://www.cnblogs.com/rexmzk/archive/2012/07/13/2590269.html
    http://www.cnblogs.com/jkisjk/archive/2011/01/30/javascript_this.html
    
    
 
 


联系
我们