1. this默认绑定
1.全局环境下this指向window
console.log(this) //window
2.函数独立调用时,函数的内部this也指向window
function fn(){
console.log(this) //window
}
fn() 等同于window.fn()
3.被嵌套函数独立调用时,函数里的this也指向window
let obj={
a:1,
foo:function(){
function test(){
console.log(this) //window
}
test()
}
}
obj.foo()
4.自执行函数this也指向window
function foo(){
(function(){
console.log(this) //window
})()
}
let obj={
a:1,
foo:foo
}
obj.foo()
5.闭包this默认指向window
let obj={
a:1,
foo:function(){
return function test(){
console.log(this) //window
}
}
}
obj.foo()
2.this的隐式绑定
1.当函数当做对象的方法来调用,this指向了当前对象
let a=1
function foo(){
console.log(this.a) //2 //4
}
let obj={
a:2,
foo:foo,
obj1:{
a:4,
foo:foo
}
}
obj.foo() //this指向obj
obj.obj1.foo() //this指向obj1
3.this隐式丢失(是指被绑定的函数丢失了绑定对象,从而使this指向window)
1.函数别名
var a=0;
function foo(){
console.log(this.a) //window 0
}
let obj={
a:2,
foo:foo
}
var bar=obj.foo;
bar()
2.参数传递
var a=0;
function foo(){
console.log(this.a)
}
function bar(fn){
fn()
}
let obj={
a:2,
foo:foo
}
bar(obj.foo)
3.内置函数
setTimeout(function(){
console.log(this) //window
},1000)
setInterval(()=>{
console.log(this) //window
})
4.间接调用
function foo(){
console.log(this.a) //window
}
var a=2;
var obj={
a:3,
foo:foo
}
let p={a:4,foo:''};
(p.foo=obj.foo)()
(false || obj.foo)()
(1,obj.foo)()
4.显示绑定
1.call(),apply(),bind()
var a=0;
function foo(){
console.log(this.a) //obj
}
var obj={
a:3
}
foo.call(obj)
let fn=foo.bind(obj);
fn()
2.硬绑定
var a=0;
function foo(){
console.log(this.a)
}
var obj={a:2}
var bar=function(){
foo.call(obj) //obj
}
bar()
setTimeout(bar,2000)
bar.call(window)
3.数组forEach、map等
let id='window'
function fn(el){
console.log(el,this.id)
}
let obj={ id:'fn'}
let arr=[1,2,3]
arr.forEach(fn) //this指向window
arr.forEach(fn,obj) //this指向obj
5.new 绑定(new this指向当前实例化对象)
function Fn(){
console.log(this) //fn
}
let fn=new Fn()
function fn2(){
console.log(this); //fn
return {
name:'mjj'
}
}
let fn=new fn2();
6.严格模式下this
1.严格模式,独立调用函数 this指向undefined
function fn(){
'use strict'
console.log(this) //undefined
}
fn()
//2.严格模式下函数apply()和call()内部this始终是它们的第一个参数
let color='red'
function showColor(){
'use strict'
console.log(this); //undefined
console.log(this.color)
}
showColor.call(undefined)
网友评论