this & 箭头函数
Opened this issue · 0 comments
LadderLay commented
this
this 关键字
this 提供了一种简洁的方式来隐式传递一个对象引用,从而函数可以自动引用合适的上下文对象。
常见的错误理解🙅:this指向函数自身、this指向函数作用域
this 实际上是运行时绑定,指向取决于函数在哪里被调用。
理解调用栈和调用位置。
绑定规则
- 默认绑定: 独立函数调用
function foo() {
console.log(this.a); //默认绑定,this指向全局对象
}
var a = 2;
// 输出为2
// 注意严格模式下全局对象无法使用默认绑定,this 会绑定到 undefined
- 隐式调用
调用位置是否存在上下文对象
function foo() {
console.log(this.a);
}
var obj = {
a: 2,
foo: foo
}
obj.foo(); //2
// 函数引用存在上下文对象,隐式绑定会将 this 绑定到该上下文对象中。
隐式丢失问题:函数别名,传入回调函数(传参)
- 显式绑定
call,apply :this 绑定到第一个参数传入的对象。
硬绑定:创建一个包裹函数,传入所有参数并返回接收到的值 -> bind
bind: - new 绑定
new函数的实现
绑定的优先级:
参考
箭头函数
特性:
-
没有自己的 this 对象。
箭头函数内部的 this 是固定的 ,始终指向定义时上层作用域中的 this 。(适合用来封装回调)
由于箭头函数没有自己的this,所以也不能用call()、apply()、bind()这些方法去改变this的指向。 -
不可以 new, 箭头函数不能用作构造函数。
-
不能使用 arguments。
-
不能使用 yield 命令,因此箭头函数不能用作 Generator 函数。
案例
// 定义对象方法时应该使用普通函数而不是箭头函数
// 与JS引擎的处理有关,它会先在全局空间生成这个箭头函数,然后赋值给cat.jumps,这导致箭头函数内部的this指向全局对象
const cat = {
lives: 9,
jumps: () => {
this.lives--; // 此时this指向全局对象
}
}