4小时快速掌握ES6核心用法 - 1.6 箭头函数this指向和注意事项

最新推荐文章于 2024-05-30 11:27:58 发布

longfei815

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量88

点赞数

分类专栏： es6 文章标签：前端 javascript html es6

本文链接：https://blog.csdn.net/jolinoy/article/details/123608707

版权

es6 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

1.6 箭头函数this指向和注意事项

箭头函数没有this绑定，没有this指向，箭头函数内部this值只能通过查找作用域链来确定，一旦使用箭头函数，当前就不存在作用域。
js犯错最多的就是函数中this的绑定，由于函数内部的this值能被改变，这取决于调用该函数的上下文对象

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>1.6 箭头函数this指向和注意事项</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- <link href="css/style.css" rel="stylesheet"> -->
    </head>
    <body>
        <script>
            // 箭头函数没有this绑定，没有this指向，箭头函数内部this值只能通过查找作用域链来确定，一旦使用箭头函数，当前就不存在作用域。
            // js犯错最多的就是函数中this的绑定，由于函数内部的this值能被改变，这取决于调用该函数的上下文对象

            /*  let PageHandler = {
                id:123,
                init:function(){
                    document.addEventListener('click',function(event) {
                        this.doSomeThings(event.type);
                    },false);
                },
                doSomeThings:function(type){
                    console.log(`事件类型:${type},当前id:${this.id}`);
                }
            }
            PageHandler.init(); */

            /*  let PageHandler = {
                id: 123,
                init: function () {
                    // 使用bind来改变内部函数this的指向
                    document.addEventListener('click', function (event) {
                        this.doSomeThings(event.type);
                    }.bind(this), false);
                },
                doSomeThings: function (type) {
                    console.log(`事件类型:${type},当前id:${this.id}`);
                }
            }
            PageHandler.init(); */
            let PageHandler = {
                id: 123,
                init: function () {
                    // 箭头函数没有this的指向，箭头函数内部的this值只能通过查找作用域链来确定

                    // 如果箭头函数被一个非箭头函数所包括，那么this的值与该函数的所属对象相等，否则 则是全局的window对象
                    document.addEventListener('click', (event) => {
                        console.log(this);  // 输出：{id: 123, init: ƒ, doSomeThings: ƒ}

                        this.doSomeThings(event.type);
                    }, false);
                },
                doSomeThings: function (type) {
                    console.log(`事件类型:${type},当前id:${this.id}`);  // 输出：事件类型:click,当前id:123
                }
            }
            PageHandler.init();

            // 1、箭头函数的注意事项
            //箭头函数中没有arguments对象   
            /* var getVal = (a,b) => {
                
                // console.log(arguments);
                
                return a + b;
            }
            console.log(getVal(1,2)); */

            // 2.箭头函数不能使用new关键字来实例化对象
            // function函数也是一个对象，但是箭头函数不是一个对象，它其实就是一个语法糖。
            /* let Person = ()=>{}
            var p1 = new Person(); */
        </script>
    </body>
</html>

longfei815

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
4小时快速掌握ES6核心用法 - 1.6 箭头函数this指向和注意事项

1.6 箭头函数this指向和注意事项箭头函数没有this绑定，没有this指向，箭头函数内部this值只能通过查找作用域链来确定，一旦使用箭头函数，当前就不存在作用域。js犯错最多的就是函数中this的绑定，由于函数内部的this值能被改变，这取决于调用该函数的上下文对象<!DOCTYPE html><html lang="en"> <head> <title>1.6 箭头函数this指向和注意事项</title&
复制链接

扫一扫