JS的箭头函数this作用域

name="小刚";
let student={
    name:"小明",
    printLog:function(){
        // 这里绑定了顶层作用域,可以使用变量与方法
        console.log(this)
    },
    printArrowLog:()=>{
        // 这里不知道绑定的是哪个作用域,有知道的大咖请回答下
        console.log(this)
    }
}

student.printLog();
/*
    { name: ‘小明‘,
      printLog: [Function: printLog],
      printArrowLog: [Function: printArrowLog]
    }
*/
student.printArrowLog();
/*
    {}
    这里返回了空对象,说明this不是指向window全局对象,也不是指向student对象。奇葩
*/
name="小刚";
let student={
    name:"小明",
    printLog:function(){
        // 这里绑定了顶层作用域,可以使用变量与方法
        return ()=>{
            console.log("printLog Arrow:"+this)
        }
    },
    printLog1:function(){
        // 这里绑定了全局作用域,可以使用window对象的属性
        return function(){
            console.log("printLog1:"+this)
        }
    },
    printLog2:function(){
        // 这里绑定了全局作用域,可以使用window对象的属性
        (function(){
            console.log("printLog2:"+this)
        })()
    }
}

sayhello=student.printLog();
sayhello1=student.printLog1();

sayhello();
/*
    printLog Arrow:小明
    this指向:printLog Arrow:[object Object]
    从这里我们可以看出这里使用的是student对象里的顶层属性,没有说明问题
*/

sayhello1();
/*
    printLog1:小刚
    this指向:printLog1:[object global]
    从打印的结果来看,我们可以看到打印的name值为小刚,是我在全局进行生命的name属性,说明在外部进行调用,this指向window全局对象

*/

student.printLog2();
/*
    printLog2:小刚
    this指向:printLog1:[object global]
    从打印的结果来看,我们可以看到打印的name值为小刚,是我在全局进行生命的name属性,说明生命调用写在一起,this指向window全局对象
*/
name="小刚";
let student={
    name:"小明",
    functions:{
        name:"小飞",
        printLog:function(){
            // 这里绑定了functions对象作用域,可以使用内部的变量与方法
            return ()=>{
                console.log("printLog:"+this.name)
            }
        },
        printLog1:function(){
            // 这里绑定了顶层作用域,可以使用window的变量与方法
            return function(){
                console.log("printLog1:"+this.name)
            }
        }
    }
}

var pl=student.functions.printLog();
pl();
/*
    printLog:小飞

*/

var pl1=student.functions.printLog1();
pl1();
/*
    printLog1:小刚
*/

/*总结:根据name的值不同,可以查到使用的是哪个作用域的值,进而可以知道this的指向*/

function方法调用call和apply的使用方式:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call

原文地址:https://www.cnblogs.com/XingXiaoMeng/p/11437674.html

时间: 2024-08-03 20:09:51

JS的箭头函数this作用域的相关文章

箭头函数的作用域

箭头函数的作用域指向定义变量时,所在的作用域. 箭头函数指向Timer 箭头函数指向handler this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this.正是因为它没有this,所以也就不能用作构造函数. 原文地址:https://www.cnblogs.com/zthtime/p/9146547.html

JS学习之函数的作用域

作用域 变量或者函数可访问的一个范围,以函数来划分,一个函数块就是一个作用域.一 全局作用域 全局:整个文档 变量或者函数在函数外面声明,那它们就是全局变量或者全局函数,在这个页面的任何地方都可以访问的到. 声明全局作用域的方法: 1.把变量或者函数放在函数外面声明 2.变量不用var声明,直接给变量赋值:不管在函数外还是函数内声明 全局变量在任何地方都可以访问的到是因为全局变量是window的一个属性,window是一个全局对象,本身在页面中的任何位置都可以访问 1 var a=10; 2 c

[译]ES6箭头函数和它的作用域

原文来自我的前端博客: http://www.hacke2.cn/arrow-functions-and-their-scope/ 在ES6很多很棒的新特性中, 箭头函数 (或者大箭头函数)就是其中值得关注的一个! 它不仅仅是很棒很酷, 它很好的利用了作用域, 快捷方便的在现在使用以前我们用的技术, 减少了很多代码……但是如果你不了解箭头函数原理的话可能就有点难以理解. 所以,让我们来看下箭头函数, 就是现在! 执行环境 你可以自己去学习和尝试下, 你可以简单的把示例程序代码复制到你的浏览器控制

ES6箭头函数和它的作用域

原文来自我的前端博客: http://www.hacke2.cn/arrow-functions-and-their-scope/ http://es6rocks.com/2014/10/arrow-functions-and-their-scope/ 原文链接 译:@liningone 摇滚ES6中国站快要上线了,大家期待吧,也可以联系我或者ES6组织为这个活动做出点贡献! 在ES6很多很棒的新特性中, 箭头函数 (或者大箭头函数)就是其中值得关注的一个! 它不仅仅是很棒很酷, 它很好的利用了

React:JS中的this和箭头函数

JS中的this和纯面向对象(java,c++)中的this有点不大一样,其原因就是作用域不同,导致JS中的this的指向不明确,在java中的this指当前对象的this或当前类的this,在JS中function(){}里面没有特殊指定this的指向,这里的this时指向Window,但是在严格模式下,function(){return this}里面的this是undefined,箭头函数里面的this反而是Window,我们来看个例子(为了简单点,代码下面的>就是控制台的输入,<就是控

JS箭头函数的优势在哪里

译者按: 看上去只是语法的变动,其实也影响了this的作用域. 原文: JavaScript: Arrow Functions for Beginners 译者: Fundebug 为了保证可读性,本文采用意译而非直译.本文我们介绍箭头(arrow)函数的优点. 更简洁的语法 我们先来按常规语法定义函数: function funcName(params) { return params + 2; } funcName(2); // 4 该函数使用箭头函数可以使用仅仅一行代码搞定! var fu

js 箭头函数

箭头函数 ES6标准新增了一种新的函数:Arrow Function(箭头函数). x => x * x相当于: function (x) { return x * x; }箭头函数相当于匿名函数,并且简化了函数定义.箭头函数有两种格式,一种像上面的,只包含一个表达式,连{ ... }和return都省略掉了.还有一种可以包含多条语句,这时候就不能省略{ ... }和return: x => { if (x > 0) { return x * x; } else { return - x

js(=&gt;) 箭头函数 详细解说 案例大全

ES6标准新增了一种新的函数:Arrow Function(箭头函数). 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 箭头函数相当于匿名函数,并且简化了函数定义.箭头函数有两种格式,一种像上面的,只包含一个表达式,连{ ... }和return都省略掉了.还有一种可以包含多条语句,这时候就不能省略{ ... }和return: x => { if (x >

vue2.0函数(箭头函数)的this作用域

在做vue项目时用到了axios,但是发现axios请求之后的回调函数里this并不指向当前vue实例,从而导致浏览器报错. 出错代码及结果: created : function(){ axios.get('static/data.json').then(function(res){ console.log(this) //undefined this.user = res.data.user }) } (报错截图) 普通函数代码改版(正确): created : function(){ va