012天this详解上
我们知道，this对象在运行时基于函数的执行环境绑定的：在全局函数中，this等于window，而当this某个对象的方法调用时，this等于那个对象。
1. this的绑定形式
1.默认绑定
2.隐式绑定
3.显示绑定
4.英绑定
5.new绑定
2.五种绑定的优先级 默认绑定 < 隐式绑定 < 显示绑定 < 硬绑定 < new绑定
3.详说每种绑定的特点
1.默认绑定
function foo() {
alert(this.a)
}
var a = 2;
foo() //2
this指向window并且在foo之前被赋值了所以是2，没有错
function foo() {
alert(this.a)
}
foo() //undefined
var a = 2;
this指向undefined是非严格模式下：如果开启了严格模式this指向undefined
所以下面这
"use strict";
var a = 10;
function foo() {
console.log(this)
console.log(window.a)
console.log(this.a)
}
console.log(this)
答案是：
Window{...}
undefined
10
Uncaught TypeError
let a = 1;
const b = 2;
function foo() {
console.log(this.a)
console.log(this.b)
}
foo();
console.log(window.a)
why?
因为let和const不会把变量绑定到window 上。
var a = 1
function foo () {
var a = 2
console.log(this)
console.log(this.a)
}
foo()
答案
window
1
为什么是1，因为是this。a而不是a，window下的a就是1呀
同理：
var a = 1
function foo () {
var a = 2
function inner () {
console.log(this)
console.log(this.a)
}
inner()
}
foo()
答案是
二 隐式绑定
谁最后调用的函数，函数内的this就指向谁 也就是this永远指向最后调用它的那个对象（不包含箭头函数）
function foo() {
console.log(this.a);
}
var baz = {
a: 2,
foo: foo
}
baz.foo(); // 2
作为foo函数调用对象baz，就成了this的上下文对象啦。
隐士绑定this丢失的两中情况
1.主动赋值（本质相当于为函数起了别名）
主动赋值丢失本质是将 函数的引用暴露在全局作用域下
function foo() {
console.log(this.a);
}
var baz = {
a: 2,
foo: foo
}
var bar = baz.foo; // 主动赋值 ** 不是主动执行 ** （只是地址的一次 引用）
bar(); // 输出 undefined
2函数传参丢失( 将函数作为参数传递 也是一次引擎的右查询 )
回调函数本质也是将函数作为参数传递，是一次隐式的赋值操作 **
function foo() {
console.log(this.a);
}
var baz = {
a: 2,
foo: foo
}
var bar = baz.foo; // 这里其实不是绑定，只是一次 地址的引用( 函数也是一个对象 )
setTimeout(bar, 100); // 函数传参 回调函数 丢失绑定
// 输出 undefined
主动赋值操作 是因为进行了 函数地址的引用, 将函数的 上下文环境改变了 ** 区别于函数的调用执行 **
function foo () {
console.log(this.a)
};
var obj = { a: 1, foo };
var a = 2;
var foo2 = obj.foo;
var obj2 = { a: 3, foo2: obj.foo }
obj.foo();
foo2();
obj2.foo2();
答案
1
2
3
obj.foo()中的this指向调用者obj
foo2()发生了隐式丢失，调用者是window，使得foo()中的this指向window
foo3()发生了隐式丢失，调用者是obj2，使得foo()中的this指向obj2
function foo () {
console.log(this.a)
}
function doFoo (fn) {
console.log(this)
fn()
}
var obj = { a: 1, foo }
var a = 2
doFoo(obj.foo)
答案为
window
2
这里我们将obj.foo当成参数传递到doFoo函数中，在传递的过程中，obj.foo()函数内的this发生了改变，指向了window。
function foo () {
console.log(this.a)
}
function doFoo (fn) {
console.log(this)
fn()
}
var obj = { a: 1, foo }
var a = 2
var obj2 = { a: 3, doFoo }
obj2.doFoo(obj.foo)
答案：
{ a:3, doFoo: f }
2
"use strict"
function foo () {
console.log(this.a)
}
function doFoo (fn) {
console.log(this)
fn()
}
var obj = { a: 1, foo }
var a = 2
var obj2 = { a: 3, doFoo }
obj2.doFoo(obj.foo)
答案
{ a:3, doFoo: f }
Uncaught TypeError: Cannot read property 'a' of undefined
扫码加群，每日更新一篇前端技术文章一起成长。
