JavaScript——总结this指向（更）

Posted 2022-08-06 勇敢*牛牛

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript——总结this指向（更）相关的知识，希望对你有一定的参考价值。

javascript——总结this指向（更）

1、全局的this指向

也就是这个一般this，一般函数里面的this指向；window

console.log(this);//window

2、普通函数调用时this的指向

在非严格模式下指向window，严格模式下指向undefined

function fn()
	console.log(this);

fn();

var obj=
    a:function()
        function fn()
            console.log(this);//window
        
        fn();
    

obj.a();

3、普通回调函数中this指向

"use strict";
function fn(f)
    f();

function fn1()
    console.log(this);//在非严格模式下指向window，严格模式下指向undefined

fn(fn1);

var obj = 
   a: function () 
       function fn(f) 
           f();
       

       function fn1() 
           console.log(this); //在非严格模式下指向window，严格模式下指向undefined
       
       fn(fn1);
   

        obj.a();

var obj=
   a:function(f)
        f();
    ,
    b:function()
        console.log(this)//在非严格模式下指向window，严格模式下指向undefined
    

obj.a(obj.b);

var obj=
    a:function()
        var arr=[1,2,3];
        arr.forEach(function(item)
            console.log(this);
        )
    


 obj.a();

4、通过arguments回调的函数

指向回调当前函数的上下文环境中的arguments

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);

5、事件侦听时调用的回调函数中的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

6、对象中的this指向

属性中this指向当前对象外的this指向
方法中指向当前对象自身
属性指外
方法指内

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: ƒ

7、数组中的部分方法中有`thisArg`参数的方法

this将会被替代指向谁调用ta的那个对象

var arr=[1,2,3,4];

arr.forEach(function()
    console.log(this);//a: 1
,a:1)

8、箭头函数中this的指向

箭头函数往外翻

var obj=
    a:function()
        var fn=()=>
            console.log(this);//obj
        
        fn();

document.addEventListener("click",()=>
    console.log(this)//window
);

input.addEventListener("input",inputHandler);

function inputHandler(e)
    setTimeout(()=>
        console.log(this)//箭头函数往外翻<input type="text">
    ,100);