关于前端:javaScript基础之-this机制知多少

本文是我学习《你所不晓得的 javaScript 上卷》的读书笔记的整顿。

更多具体内容，请 微信搜寻“前端爱好者“，关注查看。

1. this

this 关键字是 JavaScript 中最简单的机制之一。它是一个很特地的关键字，被 主动定义 在所有函数的作用域中。

然而即便是十分有教训的 JavaScript 开发者也很难说清它到底指向什么。

1.1 this 误区

1.1.1 this 指向本身 — 谬误的

 function foo(num) {console.log( "foo:" + num);  
   // 记录 foo 被调用的次数  
   this.count++;  
 }  
  foo.count = 0;  
  var i;  
  for (i=0; i<10; i++) {if (i > 5) {foo( i);  
    }  
 }  
// foo: 6  
// foo: 7  
// foo: 8  
// foo: 9  
// foo 被调用了多少次？console.log(foo.count); // 0 -- WTF?

console.log 语句产生了 4 条输入，证实 foo(..)的确被调用了 4 次，然而 foo.count 依然是 0。显然从字面意思来了解 this 是谬误的。

执行 foo.count = 0 时，确实向函数对象 foo 增加了一个属性 count。

然而函数外部代码 this.count 中的 this 并不是指向那个函数对象，而是指向了 window。
所以尽管属性名雷同，根对象却并不相同。

实际上，如果深刻摸索的话，就会发现这段代码在无心中创立了一个全局变量 count，它的值为 NaN(undefined ++ 后果为 NAN)。

修改：
强制 this 指向 foo 函数对象

 function foo(num) {console.log( "foo:" + num);  
     // 记录 foo 被调用的次数  
     // 留神，在以后的调用形式下（参见下方代码），this 的确指向 foo   
     this.count++;  
   }    
 foo.count = 0;    
 var i;    
 for (i=0; i<10; i++) {if (i > 5) {// 应用 call(..)能够确保 this 指向函数对象 foo 自身  
      foo.call(foo, i);       
    }  
}  
// foo: 6  
// foo: 7  
// foo: 8  
// foo: 9  
// foo 被调用了多少次？console.log(foo.count); // 4

1.1.2 this 作用域

this 指向函数的作用域 – 亦对亦错，须要看状况辨别。

this 在任何状况下都不指向函数的词法作用域

作用域确 VS 对象

• 同：可见的标识符都是它的属性
• 异：作用域“对象”无奈通过 JavaScript 代码拜访，它存在于 JavaScript 引擎外部。

  function foo() {       
    var a = 2;       
    this.bar();}  
   function bar() {console.log( this.a);  
  }  
  foo(); // ReferenceError: a is not defined      

首先，这段代码试图通过 this.bar()来援用 bar()函数, 这是相对不可能胜利的。

此外，编写这段代码的开发者还试图应用 this 联通 foo()和 bar()的词法作用域，从而让 bar()能够拜访 foo()作用域里的变量 a。这是不可能实现的:

不能应用 this 来援用一个词法作用域外部的货色。

每当你想要把 this 和词法作用域的查找混合应用时，肯定要揭示本人，这是无奈实现的。

1.2 this 机制

• this 既不指向函数本身也不指向函数的词法作用域
• this 是在 运行时 进行绑定的，并不是在编写时绑定，它的上下文取决于 函数调用时 的各种条件。
• this 的 绑定和函数申明的地位 没有任何关系，只取决于函数的 调用 形式。

1.3 this 调用地位

调用地位就是函数在代码中被调用的地位。

留神和申明的地位辨别

调用栈

为了达到以后执行地位所调用的所有函数

exam: 调用栈和调用地位

 function baz() {  
   // 以后调用栈是：baz  
   // 因而，以后调用地位是全局作用域  
   console.log("baz");  
   bar(); // <-- bar 的调用地位}  
 
 function bar() {  
   // 以后调用栈是 baz -> bar  
   // 因而，以后调用地位在 baz 中  
  console.log("bar");  
  foo(); // <-- foo 的调用地位}  

function foo() {  
// 以后调用栈是 baz -> bar -> foo  
// 因而，以后调用地位在 bar 中  
console.log("foo");  
}  
baz(); // <-- baz 的调用地位

能够把调用栈设想成一个函数调用链。

1.4 this 绑定规定

1.4.1 默认绑定 – 独立函数调用

最罕用，无奈利用其余规定时的默认规定。

exam: 独立函数调用

function foo() {console.log( this.a);  
}  

var a = 2;  
foo(); // 2  
 

当调用 foo() 时，this.a 被解析成了全局变量 a。

foo() 是间接应用不带任何润饰的函数援用进行调用的，因而只能应用默认绑定，无奈利用其余规定，this 指向全局对象。

应用严格模式（strict mode），全局对象将无奈应用默认绑定

function foo() {  
 "use strict";  
  console.log(this.a);  
}  
var a = 2;  
foo(); // TypeError: this is undefined  
 

尽管 this 的绑定规定齐全取决于调用地位，然而只有 函数运行在非 strict mode 下时，默认绑定能力绑定到全局对象；

严格模式下与 函数 的调用地位无关：

function foo() {console.log( this.a);  
}  

var a = 2;  
(function(){  
 "use strict";  
  foo(); // 2})();  
 

留神：”use strict”; 的地位

1.4.2 隐式绑定

function foo() {console.log( this.a);  
}  
var obj = {  
  a: 2,  
  foo: foo  
};  
obj.foo(); // 2  
 

思考：

• 须要留神的是 foo() 的申明形式
• 如何被当作援用属性增加到 obj 中的

函数严格的说都不属于援用它的对象

函数被对象援用时，援用函数的对象“蕴含”或者”领有”函数。

当 foo() 被调用时，它的落脚点的确指向 obj 对象。当函数援用有上下文对象时，隐式绑定规定会把函数调用中的 this 绑定到这个上下文对象。因为调用 foo() 时 this 被绑定到 obj，因而 this.a 和 obj.a 是一样的。

exam

 function foo() {console.log( this.a);  
 }  
 
 var obj2 = {  
   a: 42,  
   foo: foo  
 }; 
 
 var obj1 = {  
   a: 2,  
  obj2: obj2  
};  
obj1.obj2.foo(); // 42

对象属性援用链中只有 最顶层 或者说 最初一层 会影响调用地位

1.4.2.1 隐式失落

一个最常见的 this 绑定问题就是被隐式绑定的函数会失落绑定对象，也就是说它会利用默认绑定，从而把 this 绑定到全局对象或者 undefined 上，取决于是否是严格模式。

 function foo() {console.log( this.a);  
 }  
 var obj = {  
   a: 2,  
   foo: foo  
 };  
 var bar = obj.foo; // 函数别名！var a = "oops, global"; // a 是全局对象的属性  
bar(); // "oops, global"

尽管 bar 是 obj.foo 的一个援用，然而实际上，它援用的是 foo 函数自身

因而此时的 bar() 其实是一个不带任何润饰的函数调用，因而利用了默认绑定。

传入回调函数时 this 失落

 function foo() {console.log( this.a);  
 }  
 
 function doFoo(fn) {  
 // fn 其实援用的是 foo  
   fn(); // <-- 调用地位！}  
 
 var obj = {  
   a: 2,  
  foo: foo  
};  
var a = "oops, global"; // a 是全局对象的属性  
doFoo(obj.foo); // "oops, global"

function foo() {console.log( this.a);  
}  
var obj = {  
  a: 2,  
  foo: foo  
};  
var a = "oops, global"; // a 是全局对象的属性  
setTimeout(obj.foo, 100); // "oops, global"  
 

回调函数失落 this 绑定是十分常见的

调用回调函数的函数可能会批改 this。

1.4.3 显式绑定

如何在某个对象上强制调用函数？
能够应用函数的 call(..) 和
apply(..) 办法。

JavaScript 提供的绝大多数函数以及自定义的所有函数都能够应用 call(..) 和 apply(..) 办法。

call VS apply

fun.call(thisArg, arg1, arg2, ...) 接管两个参数

• 在 fun 函数运行时指定的 this 值。须要留神的是，指定的 this 值并不一定是该函数执行时真正的 this 值，如果这个函数处于 非严格模式 下，则指定为 null 和 undefined 的 this 值会主动指向全局对象(浏览器中就是 window 对象)，同时值为原始值(数字，字符串，布尔值) 的 this 会指向该原始值的主动包装对象。
• arg1, arg2, …
  指定的参数列表。

fun.apply(thisArg[, argsArray]) 接管两个参数

• thisArg：在 fun 函数运行时指定的 this 值。
• 一个数组或者类数组对象，其中的数组元素将作为独自的参数传给 fun 函数。如果该参数的值为 null 或 undefined，则示意不须要传入任何参数。从 ECMAScript 5 开始能够应用类数组对象。

    function foo() {console.log( this.a);  
     }  
     var obj = {a:2};  
     foo.call(obj); // 2

通过 foo.call(..)，咱们能够在调用 foo 时强制把它的 this 绑定到 obj 上。

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

1.4.3.1 硬绑定

 function foo() {console.log( this.a);  
 }  
 
 var obj = {a:2};  
 
 var bar = function() {foo.call( obj);  
 };  
bar(); // 2  
setTimeout(bar, 100); // 2  
// 硬绑定的 bar 不可能再批改它的 this  
bar.call(window); // 2

咱们创立了函数 bar()，并在它的外部 手动调用了 foo.call(obj)，因而强制把 foo 的 this 绑定到了 obj。无论之后如何调用函数 bar，它总会手动在 obj 上调用 foo。这种绑定是一种显式的强制绑定，因而咱们称之为硬绑定。

硬绑定的典型利用场景就是创立一个 包裹函数，传入所有的参数并返回接管到的所有值:

 function foo(something) {console.log( this.a, something);  
   return this.a + something;  
 }  
 var obj = {a:2};  
 var bar = function() {return foo.apply( obj, arguments);  
};  
var b = bar(3); // 2 3  
console.log(b); // 5

另一种应用办法是创立一个能够 重复使用的辅助函数：

 function foo(something) {console.log( this.a, something);  
   return this.a + something;  
 }  
 // 简略的辅助绑定函数  
 function bind(fn, obj) {return function() {return fn.apply( obj, arguments);  
   };  
}  
var obj = {a:2};  
var bar = bind(foo, obj);  
var b = bar(3); // 2 3  
console.log(b); // 5

因为硬绑定是一种十分罕用的模式，所以在 ES5 中提供了内置的办法 Function.prototype.bind

它的用法如下：

 function foo(something) {console.log( this.a, something);  
   return this.a + something;  
 }  
 
 var obj = {a:2};  
 
 var bar = foo.bind(obj);  
 var b = bar(3); // 2 3  
console.log(b); // 5

bind(..) 会返回一个硬编码的新函数，它会把参数设置为 this 的上下文并调用原始函数。

1.4.3.2 API 调用的“上下文”

JavaScript 语言和宿主环境中许多新的内置函数，都提供了一个可选的参数，通常被称为“上下文”（context），其作用和 bind(..) 一样，确保你的回调函数应用指定的 this。

function foo(el) {console.log( el, this.id);  
}  
var obj = {id: "awesome"};  
// 调用 foo(..) 时把 this 绑定到 obj  
[1, 2, 3].forEach(foo, obj);  
// 1 awesome 2 awesome 3 awesome  
 

这些函数实际上就是通过 call(..) 或者 apply(..) 实现了显式绑定，这样你能够少些一些代码。

1.4.4 new 绑定

构造函数

实际上并不存在所谓的“构造函数”，只有对于函数的“结构调用”。

在传统的面向类的语言中，“构造函数”是类中的一些非凡办法，应用 new 初始化类时会调用类中的构造函数。通常的模式是这样的：

something = new MyClass(..);  
 

JavaScript 也有一个 new 操作符，应用办法看起来也和那些面向类的语言一样。然而，JavaScript 中 new 的机制实际上和面向类的语言 齐全不同。

在 JavaScript 中，构造函数只是一些应用 new 操作符时被调用的函数。它们并不会属于某个类，也不会实例化一个类。

它们甚至都不能说是一种非凡的函数类型，它们只是被 new 操作符调用的一般函数而已。

应用 new 来调用函数，或者说产生结构函数调用时，会主动执行上面的操作。

1. 创立（或者说结构）一个全新的对象。
2. 这个新对象会被执行 [[原型]] 连贯。
3. 这个新对象会绑定到函数调用的 this。
4. 如果函数没有返回其余对象，那么 new 表达式中的函数调用会主动返回这个新对象。

    function foo(a) {this.a = a;}  
    var bar = new foo(2);  
    console.log(bar.a); // 2  
    

应用 new 来调用 foo(..) 时，咱们会结构一个新对象并把它绑定到 foo(..) 调用中的 this 上。

1.5 优先级

显示绑定 > 隐式绑定 \> 默认绑定

new 绑定 > 隐式绑定 > 默认绑定

 function foo() {console.log( this.a);  
 }  
 var obj1 = {  
   a: 2,  
   foo: foo  
 };  
 var obj2 = {  
   a: 3,  
  foo: foo  
};  
obj1.foo(); // 2  
obj2.foo(); // 3  
obj1.foo.call(obj2); // 3 <=> foo.call(obj2);  
obj2.foo.call(obj1); // 2 <=> foo.call(obj1);

obj1.foo 是对于函数 foo 的调用

 function foo(something) {this.a = something;}  
 var  obj1 = {foo: foo};  
 var obj2 = {};  
 obj1.foo(2);  
 console.log(obj1.a); // 2  
obj1.foo.call(obj2, 3);  
console.log(obj2.a); // 3  
var bar = new obj1.foo(4);  
console.log(obj1.a); // 2  
console.log(bar.a); // 4

new 绑定和显式绑定谁的优先级更高呢？

new 和 call/apply 无奈一起应用，因而无奈通过 new foo.call(obj1) 来间接进行测试。

1.6 判断 this

当初咱们能够依据优先级来判断函数在某个调用地位利用的是哪条规定。能够依照上面的程序来进行判断：

1. 函数是否在 new 中调用（new 绑定）？如果是的话 this 绑定的是新创建的对象。

var bar = new foo()

2. 函数是否通过 call、apply（显式绑定）或者硬绑定调用？如果是的话，this 绑定的是指定的对象。

var bar = foo.call(obj2)

3. 函数是否在某个上下文对象中调用（隐式绑定）？如果是的话，this 绑定的是那个上下文对象。

var bar = obj1.foo()

4. 如果都不是的话，应用默认绑定。如果在严格模式下，就绑定到 undefined，否则绑定到全局对象。

var bar = foo()

2. this 例外

2.1 被疏忽的 this

如果你把 null 或者 undefined 作为 this 的绑定对象传入 call、apply 或者 bind，这些值在调用时会被疏忽，理论利用的是默认绑定规定：

function foo() {console.log( this.a);  
}  
var a = 2;  
foo.call(null); // 2  
 

什么状况下你会传入 null 呢？

一种十分常见的做法是应用 apply(..) 来“开展”一个数组，并当作参数传入一个函数。相似地，bind(..) 能够对参数进行柯里化（事后设置一些参数），这种办法有时十分有用：

function foo(a,b) {console.log( "a:" + a + ", b:" + b);  
}  
// 把数组“开展”成参数  
foo.apply(null, [2, 3] ); // a:2, b:3  
// 应用 bind(..) 进行柯里化  
var bar = foo.bind(null, 2);  
bar(3); // a:2, b:3  
 

更平安的 this
在 JavaScript 中创立一个空对象最简略的办法都是

Object.create(null)

Object.create(null) 和 {} 很像，然而并不会创立 Object。
prototype 这个委托，所以它比 {}“更空。

function foo(a,b) {console.log( "a:" + a + ", b:" + b);  
}  
// 咱们的 DMZ 空对象  
var ø = Object.create(null);  
// 把数组开展成参数  
foo.apply(ø, [2, 3] ); // a:2, b:3  
// 应用 bind(..) 进行柯里化  
var bar = foo.bind(ø, 2); bar(3); // a:2, b:3  
 

2.2 间接援用

function foo() {console.log( this.a);  
}  
var a = 2;  
var o = {a: 3, foo: foo};  
var p = {a: 4};  
o.foo(); // 3  
(p.foo = o.foo)(); // 2  
 

赋值表达式 p.foo = o.foo 的返回值是指标函数的援用，因而调用地位是 foo() 而不是
p.foo() 或者 o.foo()。

2.3 箭头函数

箭头函数并不是应用 function 关键字定义的，而是应用被称为“胖箭头”的操作符 => 定义的。

箭头函数不应用 this 的四种规范规定，而是依据外层（函数或者全局）作用域来决定 this。

 function foo() {  
   // 返回一个箭头函数  
   return (a) => {//this 继 承 自 foo()  
     console.log(this.a);  
   };  
 }  
 var obj1 = {a:2};  
var obj2 = {a:3};  
var bar = foo.call(obj1);  
bar.call(obj2); // 2, 不是 3！

foo() 外部创立的箭头函数会捕捉调用时 foo() 的 this。因为 foo() 的 this 绑定到 obj1，bar（援用箭头函数）的 this 也会绑定到 obj1。

箭头函数的绑定无奈被批改。（new 也不行！）

总结

1. this 指向：

• this 既不指向函数本身也不指向函数的词法作用域
• this 是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调用时的各种条件。
• this 的绑定和函数申明的地位没有任何关系，只取决于函数的调用形式。

3. this 绑定规定

• 默认绑定 – 独立函数调用
• 隐式绑定
• 隐式失落
• 显式绑定
• 硬绑定
• API 调用的“上下文”
• new 绑定

5. this 绑定规定优先级

显示绑定 > 隐式绑定 \> 默认绑定
new 绑定 > 隐式绑定 > 默认绑定

4. 判断 this

• 函数是否在 new 中调用（new 绑定）？如果是的话 this 绑定的是新创建的对象。
  var bar = new foo()
• 函数是否通过 call、apply（显式绑定）或者硬绑定调用？如果是的话，this 绑定的是指定的对象。var bar = foo.call(obj2)
• 函数是否在某个上下文对象中调用（隐式绑定）？如果是的话，this 绑定的是那个上下文对象。var bar = obj1.foo()
• 如果都不是的话，应用默认绑定。如果在严格模式下，就绑定到 undefined，否则绑定到全局对象。var bar = foo()

6. this 例外

• 被疏忽的 this
• 间接援用
• 箭头函数

参考文章

• Function.prototype.apply()
• Function.prototype.call()
• 《你所不晓得的 javaScript 上卷》