JavaScript——总结this指向（更）
- 1、全局的this指向
- 2、直接执行函数中this
- 3、回调函数中this指向
- 4、递归中的this指向
- 5、通过arguments回调或者递归当前的函数
- 6、对象中的this
- 7、事件侦听时调用的回调函数中的this指向
- 8、数组中的部分方法中有`thisArg`参数的方法
- 9、箭头函数中this的指向
- 10、call，apply，bind
- 11、类中的静态方法其中的this指向类名
1、全局的this指向
也就是这个一般this，一般函数里面的this指向；window
严格模式 非严格模式都指向window
console.log(this);//window
2、直接执行函数中this
在非严格模式下指向window
严格模式下指向undefined
function fn(){
console.log(this);
}
fn();
//意思一样，也是在直接执行函数中的this
var obj={
a:function(){
function fn(){
console.log(this);
}
fn();
}
}
obj.a();
3、回调函数中this指向
严格模式 undefined
非严格模式 window
1
"use strict";
function fn(f){
f();
}
function fn1(){
console.log(this);//在非严格模式下指向window，严格模式下指向undefined
}
fn(fn1);
2
var obj={
a(f){
f();
},
b(){
console.log(this)
}
}
obj.a(obj.b);
3
setTimeout(function(){
console.log(this)
},1000);
4
第二次调用后，因为是回调函数，this被执行window，因此会报错
var obj={
animation(){
console.log(this)
requestAnimationFrame(this.animation);
}
}
obj.animation();
4、递归中的this指向
严格模式 非严格模式
谁调用指向谁 谁调用指向谁
var obj={
n:1,
a(){
console.log(this);
this.n++;
if(this.n<3) this.a();
}
}
obj.a();
undefined
{n: 1, a: ƒ}
{n: 2, a: ƒ}
var a=1;
function fn(){
console.log(this)
a++;
if(a<3) fn();
}
fn();
undefined*3
5、通过arguments回调或者递归当前的函数
指向回调当前函数的上下文环境中的arguments
当使用arguments 回调或者递归当前函数，
回调 函数中this指向回调当前函数上下文环境中的arguments
递归 函数中this指向递归当前函数arguments
严格模式时，禁用arguments.callee 会报错
var obj={
n:1,
a(){
console.log(this);
this.n++;
if(this.n<3) arguments.callee();
}
}
obj.a();
function fn(){
arguments[0]();
}
function fn1(){
console.log(this);
}
fn(fn1);
function fn(f){
arguments[0]();
}
function fn1(){
console.log(this)//指向回调当前函数的上下文环境中的arguments
}
fn(fn1);
var o = {
a: function (f) {
arguments[0]();
},
b:function(){
console.log(this);
}
}
o.a(o.b);
6、对象中的this
对象属性中this。指向当前对象外上下文环境中this指向
方法中this是谁调用这个方法，this指向谁
var obj={
a:1,
b:this.a,
c:function(){
console.log(this);
},
d(){
console.log(this);
}
}
var a = 0;
function fn() {
var a=10;
var obj = {
a: 1,
b: this.a,
c: function () {
console.log(this);
},
d() {
console.log(this);
}
}
obj.c();
console.log(obj)
}
fn();
var b=3;
var obj={
b:2,
a:this.b,//属性中this指向当前对象外的this指向
c:function(){
console.log(this);//指向当前对象自身
},
d(){
console.log(this);//指向当前对象自身
}
}
//{b: 2, a: 3, c: ƒ, d: ƒ}
var obj={
a(){
console.log(this);
},
b(){
console.log(this)
},
c(){
console.log(this);
}
}
var o={...obj};
o.a();
var {a,b,c}=obj;
a();
7、事件侦听时调用的回调函数中的this指向
谁侦听，this指向谁，侦听的对象
相当于 e.currentTarget
document.addEventListener("click",clickhandler);
function clickhandler(e){
console.log(this);
}
var obj={
a:function(){
document.addEventListener("click",this.clickhandler);
},
clickhandler(e){
console.log(this);//谁侦听，this指向谁，侦听的对象
// e.currentTarget
}
}
8、数组中的部分方法中有thisArg参数的方法
this将会被替代指向谁调用ta的那个对象
every filter find findindex findlast findlastindex flatmap foreach map some都具备重写设置回调函数中this的指向，因此将会指向设置对象
var arr=[1,2,3,4];
arr.forEach(function(){
console.log(this);//{a: 1}
},{a:1})
9、箭头函数中this的指向
箭头函数往外翻
箭头函数内的this指向为当前箭头函数外上下文环境中this的指向
var fn=()=>{
console.log(this)//window
}
fn();
var obj={
a:function(){
var fn=()=>{
console.log(this);//obj
}
fn();
}
}
var obj={
a(){
(()=>console.log(this))();
}
}
obj.a();//{a: ƒ}
var obj={
a:()=>{
console.log(this)//window
}
}
obj.a();
document.addEventListener("click",()=>{
console.log(this)//window
});
input.addEventListener("input",inputHandler);
function inputHandler(e){
setTimeout(()=>{
console.log(this)//箭头函数往外翻<input type="text">
},100);
}
10、call，apply，bind
非严格模式时
fn.call(1);//this指向对象1 所有数值，字符串，布尔值都会被转换为相对于的对象类型，然后this指向这个对象类型
o.b.call(undefined);//this指向window 参数为undefined或者不填的时候this指向window
o.b.call(null);//this指向window 参数为null的时候this指向window
o.b();//this就是o
严格模式时
使用严格模式时，call，apply、bind调用带入什么参数时，this就指向这个参数
o.b.call(1);
o.b.call();
o.b.call(null)
var f=o.b.bind(null);
f();
实例方法+构造函数中的this指向指的是new出来的实例化对象
11、类中的静态方法其中的this指向类名
但是不建议在静态方法中调用this，直接使用这个类名来调用实例化方法。
未完待续……
