【 js 基础 】关于this

标签：方式   一个   类型   es6   bind   win   两种方法   优雅   返回   

this 关键字是 Javascript 中很特别的一个关键字，被自动定义在所有函数的作用域中。this提供了一种更优雅的方式隐式“传递”一个对象的引用。今天就来说说 this 的指向问题。 

this 是在运行时，也就是说函数被调用时进行绑定，而不是在编写时进行绑定，它的上下文取决于函数调用时的各种条件。this 的绑定和函数声明的位置没有任何关系，只取决于函数在哪里被调用。

一、调用位置

所谓 调用位置 就是 函数被调用的位置。找到这个位置并不是很简单的事情，因为有的时候，真正的调用位置会被隐藏起来。

这里要做的就是分析调用栈，即为了到达执行位置所调用的所有函数，我们关心的调用位置就在当前正在执行的函数的前一个调用中。

举个例子：

 1 function test(){
 2     // 当前调用栈是 test 
 3     // 因此当前调用位置是 全局作用域
 4     
 5     console.log("test");
 6     
 7     bar(); // bar的调用位置
 8 }
 9 
10 function bar(){
11     // 当前的调用栈是 test -> bar
12     // 因此当前的调用位置在 test 中
13 
14     console.log("bar");
15     foo(); // foo的调用位置
16 }
17 
18 function foo(){
19     // 当前的调用栈 test -> bar -> foo
20     // 因此调用位置在 bar 中
21     
22     console.log("foo");
23 }
24 
25 test(); // test的调用位置

那么知道调用位置之后，我们来看看 它是如何决定 this 的绑定对象的。

二、绑定规则

1、默认绑定

首先要介绍的是最常用的函数调用类型：独立函数调用。可以把这条规则看作是无法应用其他规则的默认规则。

例子：

1 function test(){
2     console.log(this.a); 
3 }
4 var a = 2;
5 test(); // 2

声明在全局作用域中的变量（比如var a=2）就是全局对象的一个同名属性，即浏览器环境下的 window.a=2;

接下来，我们可以看到调用 test() 时，this.a 被解析成了全局变量 a，为什么呢？因为在这个例子中，test()是直接使用不带任何修饰的函数引用进行调用的，应用了默认规则，this 指向了全局对象。

这里要注意一个问题，如果使用了严格模式（strict mode），则不能将全局对象用于默认绑定，因此 this 会绑定到 undefined。

例子：

1 function test(){
2     "use strict";
3     console.log(this.a);
4 }
5 var a = 2;
6 test(); //TypeError:this is undefined

但是这里有一个非常重要的细节。虽然 this 的绑定规则完全取决于调用位置，但是只有 test() 运行在非 strict mode 下时，默认绑定才能绑定到全局对象；在严格模式下调用 test() 则不影响默认绑定。

例子：

1 function test(){
2     console.log(this.a)
3 }
4 var a =2;
5 (function(){
6     "use strict";
7     foo(); // 2
8 })()

比较一下上面的两个例子，发现不同 strict mode 中 this 应用默认绑定的差别。

2、隐式绑定

另一条需要考虑的规则是调用位置是否有上下文，或者说是否被某个对象拥有或者包含。

例子：

 1 function test(){
 2     console.log(this.a)
 3 }
 4 
 5 var obj = {
 6     a:2,
 7     test:test
 8 };
 9 
10 obj.test(); // 2

当 test() 被调用时，它的前面加上了对 obj 的引用。当函数引用上下文对象时，隐式绑定规则会把函数调用中的 this 绑定到这个上下文对象。在本例中， test() 调用时 this 被绑定到 obj，因此 this.a 即 obj.a。

在隐式绑定中需要注意两点：

a、对象属性引用链中只有上一层或者说最后一层在调用中起作用。

例子：

 1 function test(){
 2     console.log(this.a)
 3 }
 4 
 5 var obj = {
 6     a:2,
 7     test:test
 8 };
 9 
10 var obj_1 = {
11     a:4,
12     obj:obj 
13 }
14 
15 obj_1.obj.test(); // 2

b、隐式丢失。隐式绑定的函数丢失绑定对象，即应用默认绑定，从而把 this 绑定到全局对象上或者是 undefined（如果是严格模式）。

例子：

 1 function test(){
 2     console.log(this.a)
 3 }
 4 
 5 var obj = {
 6     a:2,
 7     test:test
 8 };
 9 
10 var foo = obj.test;
11 
12 var a = 4;
13 
14 foo(); // 4

这里的 foo 实际上 引用的是 test 函数本身，当在执行 var foo = obj.test; 时，就把 obj.test 对 test 的引用地址复制给了 foo，也就是说 foo 和 obj.test 指向同一个 引用地址。所以 调用 foo 其实是一个不带任何修饰的函数调用，应用了默认绑定。关于复制的引用这里要是还是不是很明白 可以看一下，http://www.cnblogs.com/lijiayi/p/jsdeeepcopy.html 中的第一部分基本类型 和 引用类型。

3、显示绑定

这里主要就是指通过 call() 、apply() 的函数调用，实现的绑定方式。

它们的第一个参数是一个对象，是给 this 准备的，接着在调用函数时将其绑定到 this。因为你可以直接指定 this 的绑定对象，所以就叫显示绑定。

例子： 

1 function test(){
2     console.log(this.a)
3 }
4 
5 var obj = {
6     a:2
7 };
8 
9 test.call(obj) // 2

通过 test.call() ，我们可以在调用 test 时强制把它的 this 绑定到 obj 上。

这里多说一点：如果你传入了一个原始值（字符串类型，布尔值型或者数字类型）来当作 this 的绑定对象，这个原始值会被转换成它的对象形式（也就是 new String() 、new Boolean() 或者 new Number() ）。这通常被称为 “装箱”。

在显示绑定中需要注意一点：

显示绑定中 call apply 或者 bind 中传入 null 或者 undefined ，这些值在调用时会被忽略，实际应用的是默认绑定。

例子：

1 function test(){
2     console.log(this.a)
3 }
4 var a = 2;
5 test.call(null); // 2

你或许会想，我怎么会传个 null ？

一种非常常见的做法是 使用 apply 来 “展开” 数组，并当作参数传入一个函数。

例子：

1 function test(a,b){
2     console.log("a:"+ a + ",b:" + b)
3 }
4 foo.apply(null,[2,3]); // a:2,b:3

另一种做法 用bind 可以对参数进行柯里化（预先设置一些参数）

例子:

1 function test(a,b){
2     console.log("a:"+ a + ",b:" + b)
3 }
4 
5 var bar = test.bind(null,2);
6 bar(3) // a:2,b:3

1 function test(a){
2    this.a = a
3 }
4 
5 var bar = new test(2);
6 console.log(bar.a); // 2

var bar = new test();

test.call(obj)

obj.test()

test()

 1 function test(){
 2     return (a)=>{
 3         console.log(this.a)
 4     }
 5 }
 6 
 7 var obj1 = {
 8     a:2
 9 }
10 
11 var obj2 = {
12     a:4
13 }
14 
15 var bar = test.call(obj1);
16 bar.call(obj2);  // 2，不是4！

【 js 基础 】关于this

标签：方式   一个   类型   es6   bind   win   两种方法   优雅   返回   

原文地址：http://www.cnblogs.com/lijiayi/p/this.html