登录全面解析this-理解this指向的原理
参考资料
- 《你不知道的JavaScript》- this全面解析
this 是什么
- this 是一个代词，代指一个对象
- this 提供了一种更优雅的方式来隐式的传递一个对象引用，可以让代码更加简洁易于复用
调用位置
调用位置就是函数在代码中被调用的位置（而不是声明的位置）。调用位置决定了 this 的绑定
比如下面代码：
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 的调用位置
可以使用浏览器的开发工具查看调用栈
|
|
|
|
|---|
this的绑定规则
this的指向有以下四条特性/规则
- 默认绑定
- 隐式绑定
- 显式绑定
- new 绑定
默认绑定
当函数被独立调用时，函数的 this 指向 window
独立调用就是像这样：
foo()的调用
比如
function foo() {
console.log(this.a);
}
var a = 2;
foo(); // 2
如果使用严格模式（strict mode），那么全局对象将无法使用默认绑定，因此 this 会绑定到 undefined
隐式绑定
当函数引用有上下文对象 且被该对象调用时，隐式绑定规则会把函数调用中的 this 绑定到这个上下文对象
function foo() {
console.log(this.a);
}
var obj = {
a: 2,
foo: foo
};
obj.foo(); // 2
// 这里就是隐式绑定，foo函数的this绑定到了obj上
需要注意的是，对象属性引用链中只有最顶层或者说最后一层会影响调用位置
比如
function foo() {
console.log(this.a);
}
var obj2 = {
a: 42,
foo: foo,
};
var obj1 = {
a: 2,
obj2: obj2,
};
obj1.obj2.foo(); // 42
// 相当于 obj2.foo()，因为只有最后一层会影响调用位置
隐式丢失
隐式绑定的函数可能会丢失绑定对象，也就是说它会应用默认绑定
隐式丢失的几种情况：
- 函数别名
function foo() {
console.log(this.a);
}
var obj = {
a: 2,
foo: foo,
};
// 注意这里的函数别名，会导致隐式绑定丢失，导致foo函数的this指向全局
var bar = obj.foo; // 函数别名！
var a = "oops, global"; // a 是全局对象的属性
bar(); // "oops, global"
- 函数作为参数传入，并调用时
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"
参数传递其实就是一种隐式赋值，因此我们传入函数时也会被隐式赋值，所以结果和上一个例子一样
显式绑定
-
fn.call(obj, x, x, ...)将fn函数的this指向obj，并调用，call的剩余参数是fn需要的参数
function foo(aram) {
console.log("foo", param.a); // foo 1
function bar(x, y) {
console.log("bar", this.a, x, y); // bar 1 2 3
}
bar.call(param, 2, 3);
}
foo({ a: 1 });
-
fn.apply(obj, [x, x, ...])将fn函数的this指向obj，并调用，apply的第二个参数是一个数组
function foo(param) {
console.log("foo", param.a); // foo 1
function bar(x, y) {
console.log("bar", this.a, x, y); // bar 1 2 3
}
bar.apply(param, [2, 3]);
}
foo({ a: 1 });
-
fn.bind(obj, x, x, ...)(x, x, ...)将fn函数的this指向obj，bind会返回一个新的函数，新的函数也可以传递参数
function foo(param) {
console.log("foo", param.a); // foo 1
function bar(x, y) {
console.log("bar", this.a, x, y); // bar 1 2 3
}
return bar.bind(param, 2);
}
const bar = foo({ a: 1 });
bar(3);
new 绑定
new 绑定 - this会绑定到新创建的对象上
function Person(name, age) {
// this 指向新创建的对象
this.name = name;
this.age = age;
// 通过new调用构造函数时，this指向新创建的对象
// 直接调用构造函数时，应用默认绑定规则，this指向全局或undefined
console.log(this);
}
// 使用 new 关键字调用构造函数
const person1 = new Person("张三", 25);
console.log(person1.name); // "张三"
console.log(person1.age); // 25
// 不使用 new 调用，this 会指向全局对象(非严格模式)或 undefined(严格模式)
const person2 = Person("李四", 30); // this 不会指向新对象
console.log(person2); // undefined (因为没有显式返回)
箭头函数
- 箭头函数没有自己的this 指向，它需要继承外层函数的this指向
- 箭头函数即使是new也无法改变this指向，因此箭头函数不能用于编写构造函数
var a = 1;
function foo() {
var obj1 = {
a: 2,
bar: function () {
console.log("bar", this.a);
var obj2 = {
a: 3,
baz: () => {
console.log("baz", this.a);
},
};
// 箭头函数不会创建自己的 this，它会捕获外层函数的 this
obj2.baz(); // baz 2
},
};
console.log("foo", this.a);
obj1.bar(); // bar 2
}
foo(); // foo 1
