【function this的指向性问题】

哎呀你干嘛啊

已于 2022-04-14 15:23:23 修改

阅读量2.3k

点赞数 4

分类专栏： js 前端文章标签： android jquery html

于 2022-02-24 13:42:14 首次发布

本文链接：https://blog.csdn.net/m0_65450343/article/details/123109326

版权

前端同时被 2 个专栏收录

53 篇文章 18 订阅

订阅专栏

20 篇文章 1 订阅

订阅专栏

一，传统函数中的this指向

1，在全局中定义的函数，this指向window

2，对象方法中的this指向这个对象

3、构造函数创建对象的方法中的this指向new出来的实例化对象

4、定时器中的this指向

二，箭头函数中的this指向

一，传统函数中的this指向

原则：方法由谁调用，this就指向谁

1，在全局中定义的函数，this指向window

   var name = "mickey "; //全局变量name相当于是window. name
        function person() {
            //this.name= "tom";这里改了之后，上面定义的全局变量name随之改变
            console.log(this); //window
            console.log(this.name); //mickey
        }
        //普通函数调用
        person(); //相当于window. person()

2，对象方法中的this指向这个对象

      //当作某个对象的方法
        var name = "tom";
        var person = {
            name: "tom",
            showName: function() {
                console.log(this.name);
            }
        }
        person.showName() //tom  this指向person

3、构造函数创建对象的方法中的this指向new出来的实例化对象

  var name = "mickey";

        function Person(name) {
            this.name = name;
            this.showName = function() {
                console.log(this.name); //"tom"
                console.log(this);//Person
            }
        }
        var p = new Person("tom");
        p.showName();

4、定时器中的this指向

》1，如果定时器中是传统匿名函数，不管放哪里，他的this永远指向window


//异步操作  this指向window
var name = "mickey";
        function Person(name) {
            this.name = name;
            this.showName = function() {
                // console.log(this.name);
                setTimeout(function() {
                    console.log(this.name); //mikey
                    console.log(this); //window
                }, 1000)
            }
        }
        var p = new Person("tom");
        p.showName(); //"tom"

》2，如果定时器中放箭头函数，则会将this指向所在的对象

  <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
    <script>
        //点击div时，三秒后背景色变成红色
        let box = document.getElementsByClassName("box")[0]
        box.onclick = function() {
            //把this指向赋值给变量that
            var that = this
            setTimeout(function() {
                console.log(this) //window
                console.log(that) //<div class="box" style="background: red;"> </div
                that.style.background = "red"
            }, 3000)
        }

        //箭头函数将this指向改变
        // box.onclick = function() {
        //         setTimeout(() => {
        //             console.log(this) //<div class="box" style="background: red;"> </div>
        //             this.style.background = "red"
        //         }, 3000)
        //     }
        //箭头函数使用场景：如果业务中的this指向性，不想发生变化时，使用箭头函数
    </script>

二，箭头函数中的this指向

箭头函数体内的this对象就是定义时所在的对象，而不是使用时所在的对象。

简单而言，箭头函数使用时，不绑定this对象，箭头函数没有自己的this，它的this是继承而来的，默认指向在定义箭头函数时所处的对象。

function foo() {
  return () => {
    return () => {
      return () => {
        console.log('id:', this.id);
      };
    };
  };
}
var f = foo.call({id: 1});        // 设置foo的id为1
var t1 = f.call({id: 2})()();     // id: 1
var t2 = f().call({id: 3})();     // id: 1
var t3 = f()().call({id: 4});     // id: 1
//上面代码之中，只有一个this，就是函数foo的this。所以t1、t2、t3都输出同样的结果。

因为所有的内层函数都是箭头函数，都没有自己的this，它们的this其实都是最外层foo函数的this。所以箭头函数的this指向是创建它所在的对象，不会改变。

哎呀你干嘛啊

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【function this的指向性问题】

目录一，传统函数中的this指向1，在全局中定义的函数，this指向window2，对象方法中的this指向这个对象3、构造函数创建对象的方法中的this指向new出来的实例化对象4、定时器中匿名方法的this—指向window对象二，箭头函数中的this指向一，传统函数中的this指向原则：方法由谁调用，this就指向谁1，在全局中定义的函数，this指向window var name = "mickey "; //全局变量name相当于是window..
复制链接

扫一扫