个人对this总结

最新推荐文章于 2023-08-11 16:23:52 发布

Initialize-le

最新推荐文章于 2023-08-11 16:23:52 发布

阅读量235

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/lianlin21212411/article/details/60884900

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

直接调用this为window

function showThis(){
    console.log(this);
}
showThis();//window对象

由于误操作导致this为window

var obj={
    name:"limingle",
    showName:function(){
        console.log(this.name);
    }
}
var globalShowName=obj.showName;
globalShowName();//undefined

方法调用上下文

谁调用，this就是谁

var obj={
    name:"limingle",
    showName1:function(){
        console.log(this.name);
    }
}
obj.showName2=function(){
    console.log(this.name);
}
function showName3(){
    console.log(this.name);
}
obj.showName3=showName3;
obj.showName4=(function(){
    console.log(this.name);
}).bind({})
obj.showName1();//limingle
obj.showName2();//limingle
obj.showName3();//limingle
obj.showName4();//undefined

实例化函数内的上下文

this为new出来的对象

function People(){
    this.name="limingle";
    this.say=function(){
        console.log(this.name);
    }
}
new People().say();//limingle

通过call、apply、bind更改上下文

通过call、apply、bind可以更改上下文

var obj={
    name:"limingle",
    showName:function(){
        console.log(this.name)
    }
}
var obj1={
    name:"liulu"
}
obj.showName.call(obj1);//liulu

箭头函数中的this

箭头函数中使用的 this，是直接包含它的那个函数或函数表达式中的 this。

const obj={
    test(){
        const arrow=()=>{
            //这里的this是test()中的this
            //由test()的调用方式决定
            console.log(this===obj);
        }
        arrow();
    },
    getArrow(){
        return()=>{
            //这里的this是getArrow()中的this
            //由getArrow()的调用方式决定
            console.log(this===obj);
        }
    }
}
obj.test();//true
const arrow=obj.getArrow()
arrow();//true