一.this的概念
this
是在执行时动态读取上下文决定的,而不是创建时.(在执行时,才有具体含义)- 不同的环境下,
this
的执行也不同,它动态指向当前函数的运行环境
二.不同执行环境下的this
指向
=> 全局上执行的环境 => 函数表达式,匿名函数,嵌套函数
函数调用
函数中直接调用 – this
指向window
function fn(){
console.log("函数内容",this)
}
fn() // 类似于 window.fn()
fn 是在window的环境下指向(window)
隐式绑定
隐式绑定:this指代调用 堆栈的上一级=>对象,数组等引用关系
示例1
function fn(){
console.log("隐式绑定",this.a)
}
const obj ={
a:1,
fn
}
obj.fn = fn;
obj.fn();// 输入:1
- fn的调用位置是
obj.fn
进行调用的 - 那么这时
this
指向obj
示例2
const foo = {
bar:10,
fn:function(){
console.log(this.bar);
console.log(this)
}
}
// 取出
let fn1 = foo.fn;
// 独立执行
fn1()
//log1:undefined
//log2:window
- 从隐式绑定来看,
this
指向上一级,但是执行环境是全局, - 实际上
fn1
被单独取出,fn1
就是一个独立的函数 - 所以最终指向的环境还是在window全局环境上
改变属性指向
const f1 = {
text:"fn1",
fn:function(){
// 直接使用上下文
return this.text
}
}
const f2 = {
text:"fn2",
fn:function(){
// 直接内部构造 -- 公共人
let fn = f1.fn; // 独立的函数
return fn()
}
}
console.log("111",f1.fn())
console.log("222",f2.fn())
显示绑定(bind | apply | call)
function foo(){
console.log("函数内部",this)
}
foo()
// 使用
foo.call({
a:1;
},1,2,3)
foo.apply({
a:1;
},[])
const bindFoo = foo.bind({
a:1
})
bindFoo();