JS中函数的this大解析【笔记】

痛定思痛。 2024-03-26 10:56 17阅读 0赞

体验下面的练习，就能理解 this 指向和箭头函数里面的 this 指向。

var name = "window"
    var obj1 = {
        name: '1',
        fn1: function(){
            console.log(this.name)
            },
        fn2:() => console.log(this.name),
        fn3:function() {
            return function() {
            console.log(this.name)
                }
            },
        fn4:function() {
            return() => console.log(this.name)
                }
            }
        var obj2 = {
        name: '2'
    }
    obj1.fn1() //1
    obj.fn1.call(obj2) //this指向obj2 2
    obj1.fn2() //找父作用域里面的name 就是 window
    obj1.fn2.call(obj2) //不支持显示绑定 还是 window
    obj1.fn3()() //返回的函数是独立调用 所以this指向 window
    obj1.fn3().call(obj2) //返回的函数显示绑定给了obj2 所以this指向obj2 2
    obj.fn3.call(obj2)() //改变了父级作用域的this指向即指向obj2 但是内部函数还
    是独立调用 即 window
    obj1.fn4()() //this取决于父作用域fn4 即obj1 1
    obj1.fn4().call(obj2) //返回箭头函数 不存在显示绑定 所以 1
    obj1.fn4.call(obj2)() // 将箭头函数的父级作用域指向给了obj2 所以输出 2

深刻理解一下箭头函数的this：

// ES6
    const obj = {
        getArrow() {
            return () => {
                console.log(this === obj);//箭头函数没有自己的this
            };
        }
    }
    //上述代码转化为es5
    var obj = {
        getArrow: function getArrow() {
            var _this = this;
            return function () {
                console.log(_this === obj);
            };
        }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，17人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS中函数的this大解析【笔记】

体验下面的练习，就能理解 this 指向和箭头函数里面的 this 指向。 var name = "window" var obj1 = {

痛定思痛。/ 2024年03月26日 10:56/ 0 赞/ 18 阅读

相关 js函数中的this

this是什么？任何函数本质上都是通过某个对象调用的，如果没有指定则是window 所有函数内部都有一个变量this 它的值是调用函数的当前对象如何确定th

「爱情、让人受尽委屈。」/ 2022年12月03日 15:54/ 0 赞/ 149 阅读

相关理解 JS 回调函数中的 this

[理解 JS 回调函数中的 this][JS _ this] 任何变量或对象都有其赖以生存的上下文。如果简单地将对象理解为一段代码，那么对象处在不同的上下文，这段代码也会

我不是女神ヾ/ 2022年06月08日 13:06/ 0 赞/ 256 阅读

相关笔记 js中this对象详解

它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。这句话看似平常，可是要非常注意三个字：“运行时”，这说明this关键字只与函数的执行环境有关，而与声明环境没有关系

蔚落/ 2022年06月06日 12:38/ 0 赞/ 199 阅读

相关 js中的this

因为js语言的灵活性导致js中的this也比较个性 this指向windows 对象 (function(global){ console.log(global

╰半夏微凉°/ 2022年06月02日 12:23/ 0 赞/ 163 阅读

相关 js中this的理解和实践【包含箭头函数中的this】

最近在做项目的时候，因为对this的理解不清楚，导致了不清不楚的bug,因此抽出时间进行了js中this的学习。 1、js中this的理解要点。 > (1、)对普通函数，

灰太狼/ 2022年05月31日 05:07/ 0 赞/ 187 阅读

相关前端基础学习笔记 JS 函数 return this

05 函数将一系列代码或者操作行为打包到一起形成的就是函数,一块有特定功能的代码. 存放运行逻辑的代码块,以便重复使用. 函数声明(函数定义) fun

逃离我推掉我的手/ 2022年04月23日 01:46/ 0 赞/ 128 阅读

相关 js 箭头函数 this

箭头函数没有this，所以箭头函数中的this指向上一层作用于的this var obj = { name:'name1', a

Myth丶恋晨/ 2022年03月09日 12:48/ 0 赞/ 229 阅读

相关 js 中的this

与其他语言相比，函数this在 JavaScript 中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别.在绝大多数情况下，函数的调用方式决定了this的值。th

末蓝、/ 2021年12月10日 03:49/ 0 赞/ 311 阅读

相关 js 函数 this

其实关于js中的this到底是个什么东西，我看了N多资料都没搞清楚。反正不是全局作用域就是某个对象，那就用笨方法，把所有用到this的情况都写一遍，看看能不能从中找到什么规律吧

向右看齐/ 2021年09月28日 06:28/ 0 赞/ 338 阅读