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

灰太狼 2022-05-31 05:07 238阅读 0赞

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

> (1、)对普通函数，this指向的是调用者\[‘.’之前的，没有’.’则为全局对象\];  
> (2、)箭头函数中的this指向为定义箭头函数的作用域中的this【**是作用域中的this而不是定义的作用域**】;  
> 友情提示：此处是可以根据内存中this的指向来理解的，但是我们理解this是为了更好更快的做项目，记住一般的规律即可。

2、js中的this理解和实践的demo。

function test1() {
        console.log(this);
        alert("打印出了全局对象【global/window】[Window {frames: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}]");
    };
    test1();
    console.log("----------------作为对象的方法调用-------------------");
    var obj1 = {
        name: 'qiutc',
        foo: function () {
            console.log(this.name);
        }
    }
    obj1.foo();
    
    console.log("-----------------------------------");
    
    function test2() {
        console.log(this.name);
    }
    
    var obj2 = {
        name: 'qiutc',
        foo2: test2
    }
    obj2.foo2();
    
    console.log("--------------把对象的方法赋值给一个变量，然后直接调用这个变量---------------------");
    var obj3 = {
        name: 'qiutc',
        foo3: function () {
            console.log(this);
        }
    }
    var test3 = obj3.foo3;
    test3();
    
    console.log("--------------利用 闭包 的特性来绑定this---------------------");
    
    //为了避免对下面测试中定时器的影响，注释了当前代码块;
    /**
      * var obj4 = {
        name: 'qiutc',
        foo: function () {
            console.log(this);
        },
        foo2: function () {
            console.log(this);
            var _this = this;
            setTimeout(function () {
               // console.log(this);
               console.log(_this);
            }, 1000);
        }
    }
    obj4.foo2();
      */
    
    
    console.log("--------------箭头函数---------------------");
    /**
     * 箭头函数中的 this 只和定义它时候的作用域的 this 有关;
     * 即：[箭头函数中的this和定义它的作用域中的this相等];
     * 函数参数列表中的箭头函数的是定义在外部的，但是其作用域在方法内部;
     * 而与在哪里以及如何调用它无关，同时它的 this 指向是不可改变的。
     */
    /**
     * var obj5 = {
        name: 'qiutc',
        foo: function () {
            console.log(this);
        },
        foo2: function () {
            console.log("obj5--》a" + this);
            setTimeout(() => { console.log("obj5--》b" + this); }, 1000); } } obj5.foo2(); */ console.log("--------------通过call, apply, bind给函数绑定指定的this对象---------------------"); console.log("-----------------------为一个普通函数指定 this---------------------"); var obj7 = { name: 'qiutc' }; function foo7() { console.log(this); } foo7.call(obj7); console.log("-----------------------为对象中的方法指定一个 this---------------------"); var obj = { name: 'qiutc', foo: function () { console.log(this); } } var obj2 = { name: 'tcqiu222222' }; obj.foo.call(obj2); console.log("-----------------------为箭头函数指定 this【无效性验证】---------------------"); var afoo = (a) => {
        console.log(a);
        console.log(this);
    }
    afoo(1);
    var obj = {
        name: 'qiutc'
    };
    afoo.call(obj, 2); //期望输出：obj;实际输出:全局对象;
    
    /**
     * 可以看到，这里的 call 指向 this 的操作并没有成功，所以可以得出： 
     * 箭头函数中的 this 在定义它的时候已经决定了（执行定义它的作用域中的 this），
     * 与如何调用以及在哪里调用它无关，包括 (call, apply, bind) 等操作都无法改变它的 this。
     *只要记住箭头函数大法好，不变的 this。
     */

3、参考文章  
[JavaScript 中的 this][JavaScript _ this]

4、[demo源码。][demo]

[JavaScript _ this]: https://juejin.im/entry/57bd2ec1efa631005a8eae1a
[demo]: https://github.com/JunZhou2016/ThisInJsPractice

发表评论取消回复

表情：

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

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

相关阅读

相关箭头函数的this

箭头函数不绑定this，箭头函数没有自己的this关键字如果在箭头函数中使用this this关键字将指向箭头函数定义位置中的this function f

小鱼儿/ 2023年07月24日 02:03/ 0 赞/ 24 阅读

相关 ES6中箭头函数（=＞)的this

一，了解前须知 1，箭头函数：出现的作用除了让函数的书写变得很简洁，可读性很好外；最大的优点是解决了this执行环境所造成的一些问题。比如：解决了匿名函数this指向的问题（

末蓝、/ 2022年12月17日 14:57/ 0 赞/ 208 阅读

相关 js函数中的this

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

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

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

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

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

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

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

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

相关 js 箭头函数 this

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

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

相关箭头函数里面的this理解

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

野性酷女/ 2022年01月20日 14:07/ 0 赞/ 272 阅读

相关 JS中的this理解

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 在JS中,this是动态绑定的,而java等其他面向对

不念不忘少年蓝@/ 2022年01月16日 04:49/ 0 赞/ 253 阅读

相关箭头函数的this

链接：https://www.jianshu.com/p/cf0861bf0707 关于箭头函数中this值的问题，网上查查，会告诉你 “箭头函数的this固定化，箭头

朴灿烈づ我的快乐病毒、/ 2022年01月12日 01:13/ 0 赞/ 278 阅读

相关 JavaScript箭头函数中的this详解

前言箭头函数极大地简化了this的取值规则。普通函数与箭头函数普通函数指的是用function定义的函数： var hello = function

素颜马尾好姑娘i/ 2021年11月02日 17:18/ 0 赞/ 443 阅读