1、调用位置
在理解this的绑定之前，首先理解调用位置,决定this的绑定
function a() {
// 当前调用栈是:a, 因此，当前调用位置是全局作用域
console.log('a');
b(); // b的调用位置
}
function b() {
// 当前调用栈是:a=>b, 因此，当前调用位置是a中
console.log('b');
c(); // c的调用位置
}
function c() {
// 当前调用栈是:a=>b=>c, 因此，当前调用位置是b中
console.log('c')
}
a();
2、绑定规则
2.1 默认绑定
最常用的函数调用类型：独立函数调用。可以看做默认规则
this.a被解析成了全局变量a，因为本例中，函数调用应用了this的默认绑定，因此this指向全局对象
function foo() {
console.log(this.a);
}
var a = 2;
foo(); // 2
如果在严格模式下，全局对象无法使用默认绑定，因此this会绑定到undefined
function foo() {
"use strict"
console.log(this.a);
}
var a = 2;
foo(); // TypeError: this is undefined
this的绑定规则完全取决于调用位置，但是运行在非严格模式下，默认绑定才能绑定到全局对象；严格模式下与foo()的调用位置无关
function foo() {
console.log(this.a);
}
(function () {
"use strict"
foo(); // 2
})();
2.2 隐式绑定
另一条需要考虑的规则是调用位置是否有上下文对象,或者说是否被某个对象拥有或者包含，不过这种说法可能会造成一些误导.
foo函数严格来说都不属于obj对象,然而调用位置会使用obj上下文来引用函数，因此函数被调用时obj对象“拥有”或“包含”foo
当foo()被调用时，它的落脚点确实指向obj对象，当函数引用有上下文对象时，隐式绑定规则会把函数调用中的this绑定到这个上下文对象。
function foo() {
console.log(this.a);
}
var obj = {
a: 2,
foo: foo
}
obj.foo(); // 2
对象属性引用链中只有最顶层或者说最后一层会影响调用位置
function foo() {
console.log(this.a)
}
var obj1 = {
a: 42,
foo: foo
}
var obj2 = {
a: 2,
obj1: obj1
}
obj2.obj1.foo(); // 42
隐式丢失
一个最常见的this绑定问题就是被隐式绑定的函数丢失绑定的对象，也就是说她回默认绑定。从而把this绑定到全局对象或者undefined上，取决于是否严格模式
虽然bar是obj.foo的一个引用，到时实际上，它引用的是foo函数本身，因此此时的bar（）其实是一个不带任何修饰的函数调用，因此应用了默认绑定。
function foo() {
console.log(this.a)
}
var obj = {
a: 2,
foo: foo
}
var bar = obj.foo; // 函数别名
var a = 'global'; // a是全局对象的属性
bar(); // 'global
参数传递其实就是一种隐式赋值，因此我们传入函数是也会是隐式赋值，所以结果和上述一样
function foo() {
console.log(this.a);
}
function doFoo(fn) {
fn();
}
var obj = {
a: 2,
foo: foo
}
var a = 'global';
doFoo(obj.foo); // 'global'
如果把函数传入语言内置的函数而不是自己的函数也是一样的结果.
function foo() {
console.log(this.a);
}
var obj = {
a: 2,
foo: foo
}
var a = 'global';
setTimeout(obj.foo, 1000) // 'global'
javascript环境中内置的函数实现伪代码类似：
function setTimeout(fn, delay) {
// 等待delay毫秒
fn(); //调用位置
}
2.3显示绑定
call()、apply()他们第一个参数是一个对象，他们会把这个对象绑定到this，接着调用函数时制定这个this，因为可以直接指定this的绑定对象，因此我们称之为显示绑定。
function foo() {
console.log(this.a);
}
var obj = {
a: 2
}
foo.call(obj); // 2
1、硬绑定
创建了函数bar()，并在它的内部手动调用了foo.call(obj)，因此强制把foo的this绑定到obj。无论之后如何调用函数bar，他总会手动在obj上调用foo。
这种绑定是一种显示的强制绑定，因此我们称之为硬绑定。
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
硬绑定的典型应用场景是创建一个包裹函数，传入所有的参数并返回接收到的所有值。
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); // 2 3
console.log(bar); // 5
2、API调用"上下文"
function foo(el) {
console.log(el, this.id);
}
var obj = {
id: 'winerss'
}
调用foo()时把this绑定到obj
[1,2,3].forEach(foo, obj); // 1 winerss 2 winerss 3 winerss
3、优先级
显示绑定优先级高于隐式绑定
function foo(params) {
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
obj2.foo.call(obj1); // 2
new绑定比隐式绑定优先级高
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绑定比显示绑定优先级高
function foo(something) {
this.a = something
}
var obj1 = {};
var bar = foo.bind(obj1);
bar(2);
console.log(obj1.a); // 2
var baz = new bar(3)
console.log(obj1.a); // 2
console.log(baz.a); // 3
4、绑定例外
4、1被忽略的this
如果把null undefined 作为this绑定的对象传入call apply或者bind，这些值在调用时会被忽略，应用默认绑定规则
function foo() {
console.log(this.a);
}
var a = 2;
foo.call(null); // 2
传null使用的情况
function foo(a, b) {
console.log(`a:${a}, b:${b}`);
}
把数组展开成参数
foo.apply(null, [2,3]); //a: 2, b: 3
var bar = foo.bind(null, 2); // 使用bind()进行柯里化
bar(3); // a: 2,b: 3
总是使用null来忽略this绑定可能产生一些副作用，如果某个函数确实使用了this，（比如第三方库）那默认绑定规则把this绑定到全局导致后果会很严重。
更安全的this
function foo(a, b) {
console.log(`a:${a}, b:${b}`);
}
我们的DMZ空对象
var obj = Object.create(null);
把数组展开成参数
foo.apply(obj, [2, 3]); // a: 2, b: 3
使用bind进行柯里化
var bar = foo.bind(obj, 2);
bar(3); // a: 2,b :3
网友评论