JS中简单的this学习
浏览数：13 /
时间：2015年06月09日
我在学习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://www.cnblogs.com/jkisjk/archive/2011/01/30/javascript_this.html
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
