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

name="小刚"; let student={ name:"小明", printLog:function(){ // 这里绑定了顶层作用域,可以使用变量与方法 console.log(this) }, printArrowLog:()=>{ // 这里不知道绑定的是哪个作用域,有知道的大咖请回答下 console.log(this) } } student.printLog(); /* { name: '小明', printLog: [Function: p…
js之箭头函数表达式 箭头函数表达式的语法比函数表达式更短,并且没有自己的this,arguments,super或 new.target.这些函数表达式更适用于那些本来需要匿名函数的地方,并且它们不能用作构造函数 语法 基础语法 (参数1, 参数2, …, 参数N) => { 函数声明 } (参数1, 参数2, …, 参数N) => 表达式(单一) //相当于:(参数1, 参数2, …, 参数N) =>{ return 表达式; } // 当只有一个参数时,圆括号是可选的: (单一参数…
最近在学习angularJs的时候由于里面涉及到了箭头函数,箭头函数除了声明上有点区别以外,和普通函数最主要的区别还是在this的问题上. Js中函数中嵌套的函数this不会 “继承”.比如说以下代码: var o = { name:'xwt', age:13 } function outer(){ console.log(this);//输出{name:'xwt,age:13} !function inner(){ console.log(this);//输出window }(); } out…
箭头函数感性认识 箭头函数 是在es6 中添加的一种规范 x => x * x 相当于 function(x){return x*x} 箭头函数相当于 匿名函数, 简化了函数的定义. 语言的发展都是倾向于简洁 对人类友好的, 减轻工作量的. 就相当于我最钟情的python, 有很多类似之处, 在 关于promise 文章中我会和Python 框架中的tornado 中的异步进行对比的, 很相似. 箭头函数有两种格式, 一种只包含一个表达式,没有{…} 和 return . 一种包含多条语句, 这…
原文 ES6标准新增了一种新的函数:Arrow Function(箭头函数). 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 箭头函数相当于匿名函数,并且简化了函数定义.箭头函数有两种格式,一种像上面的,只包含一个表达式,连{ ... }和return都省略掉了.还有一种可以包含多条语句,这时候就不能省略{ ... }和return: x => { if (x &…
普通函数在es5中就有了,箭头函数是es6中出现的函数形式,当然也可以继续用es5写法. 普通函数大家知道: 形式基本一致 来看看箭头函数: 开发时根据实际情况可以省略一些东西 单条处理可以省略return和{大括号} 单个参数可以省略(小括号) 箭头函数不能作为构造函数 不能new.会报错 箭头函数不绑定arguments,但是可使用...rest参数 这是普通函数arguments,可以使用 这是箭头函数的,用了会报错. 但是可以这么用,不过结果和arguments有所不同. argumen…
ES6允许使用“箭头”(=>)定义函数 var f = a = > a //等同于 var f = function(a){ return a; } 如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分. //无形参 var f = () => 2; // 等同于 var f = function () { return 2 }; //多个形参 var sum = (a, b) => a + b; // 等同于 var sum = function(a, b) { r…
原文来自我的前端博客: http://www.hacke2.cn/arrow-functions-and-their-scope/ 在ES6很多很棒的新特性中, 箭头函数 (或者大箭头函数)就是其中值得关注的一个! 它不仅仅是很棒很酷, 它很好的利用了作用域, 快捷方便的在现在使用以前我们用的技术, 减少了很多代码……但是如果你不了解箭头函数原理的话可能就有点难以理解. 所以,让我们来看下箭头函数, 就是现在! 执行环境 你可以自己去学习和尝试下, 你可以简单的把示例程序代码复制到你的浏览器控制…
原文来自我的前端博客: http://www.hacke2.cn/arrow-functions-and-their-scope/ http://es6rocks.com/2014/10/arrow-functions-and-their-scope/ 原文链接 译:@liningone 摇滚ES6中国站快要上线了,大家期待吧,也能够联系我或者ES6组织为这个活动做出点贡献! 在ES6非常多非常棒的新特性中, 箭头函数 (或者大箭头函数)就是当中值得关注的一个! 它不不过非常棒非常酷, 它非常好…
果然,隔了很长时间都没有来博客园上逛了...... 前一段时间一直在忙我们参加的一个比赛,转眼已经好久没有来逛过博客园了,果然还是很难坚持的...... 今天总算还是想起来要过来冒个泡,强行刷一波存在感...... ------------------------------------以上全是废话---------------------------------------------------- 箭头函数时es6中的语法,总体来说,语法相较于es5中函数的写法要简明很多,使用起来也很方便,…
1.let ES6中新增的用于声明变量的关键字. let 声明的变量只在所处于的块级有效. 注意:使用 let 关键字声明的变量才具有块级作用域,var 关键字是不具备这个特点的. 1. 防止循环变量变成全局变量. 2. 不存在变量提升 3. 暂时性死区 if(true){ let a=10; } console.log(a); // a is not defined //防止循环变量变成全局变量 for(var i=0;i<2;i++){ } console.log(i); // i=2(只有…
转载请注明出处:王亟亟的大牛之路 昨天写了篇React.js的开头之作,讲了讲块级作用域和let,先安利:https://github.com/ddwhan0123/Useful-Open-Source-Android 上一篇的传送门:http://blog.csdn.net/ddwhan0123/article/details/52681169 这里补充下语法环境皆为 ES6 const const类似于java中的 常量,申明了值就不允许改变. 申明了 就必须立马赋值 不然会 抛Syntax…
 壹 ❀ 引 在本文之前我已经花了两个篇幅专门介绍了JavaScript中的闭包与this,正好今早地铁上看到了两道面试题,试着做了下发现挺有意思,所以想单独写一篇文章来记录解析过程.若你对于闭包与this有所了解,不妨先看自己的理解是否正确,若你对于这部分知识欠缺,还是建议先阅读我前面的两篇文章,链接在下: 一篇文章看懂JS闭包,都要2020年了,你怎么能还不懂闭包? js 五种绑定彻底弄懂this,默认绑定.隐式绑定.显式绑定.new绑定.箭头函数绑定详解 那么本文开始.  贰 ❀ 题一 /…
 壹 ❀ 引 可以说this与闭包.原型链一样,属于JavaScript开发中老生常谈的问题了,百度一搜,this相关的文章铺天盖地.可开发好几年,被几道this题安排明明白白的人应该不在少数(我就是其一).我觉得this概念抽象,变化多端总是让人晕头转向,但平心它并不是有多难,今天我们就从this绑定的五种场景(默认绑定.隐式绑定.显式绑定.new绑定.箭头函数绑定)出发,静下心来好好聊聊这个 this,本文开始.  贰 ❀ this默认绑定 this默认绑定我们可以理解为函数调用时无任何调用…
转载自:https://juejin.im/post/5aa1eb056fb9a028b77a66fd#heading-1 JavaScript在ES6语法中新增了箭头函数,相较于传统函数,箭头函数不仅更加简洁,而且在this方面进行了改进.this作为JavaScript中比较诡异的存在,许多文章对于this的解释也不尽相同,本篇文章试图厘清JS中函数与this的关系. 一.JS中函数的写法 1.常规函数的写法 在ES6语法之前,JS中的函数由function关键字.params参数和被花括号…
JS中的this和纯面向对象(java,c++)中的this有点不大一样,其原因就是作用域不同,导致JS中的this的指向不明确,在java中的this指当前对象的this或当前类的this,在JS中function(){}里面没有特殊指定this的指向,这里的this时指向Window,但是在严格模式下,function(){return this}里面的this是undefined,箭头函数里面的this反而是Window,我们来看个例子(为了简单点,代码下面的>就是控制台的输入,<就是控…
目录 壹 ❀ 引 贰 ❀ this默认绑定 叁 ❀ this隐式绑定 1.隐式绑定 2.隐式丢失 肆 ❀ this显式绑定 伍 ❀ new绑定 陆 ❀ this绑定优先级 柒 ❀ 箭头函数的this 捌 ❀ 总 壹 ❀ 引 可以说this与闭包.原型链一样,属于JavaScript开发中老生常谈的问题了,百度一搜,this相关的文章铺天盖地.可开发好几年,被几道this题安排明明白白的人应该不在少数(我就是其一).我觉得this概念抽象,变化多端总是让人晕头转向,但平心它并不是有多难,今天我们就…
最近被问到了一个问题: >javaScript 中的箭头函数 (=>) 和普通函数 (function) 有什么区别? 我当时想的就是:这个问题很简单啊~(flag),然后做出了错误的回答-- >箭头函数中的this和调用时的上下文无关,而是取决于定义时的上下文 这并不是很正确的答案--虽然也不是完全错误 ##箭头函数中的 this 首先说我的回答中没有错误的部分:箭头函数中的 this 确实和调用时的上下文无关 ```javascript function make () { retu…
函数的作用域与this指向是js中很重要的一部分,理清这点东西需要个逻辑,看看我的逻辑怎么样... 下面是个提纲,可以直接挑你感兴趣的条目阅读. 函数的定义方式:直接定义(window下,内部定义),对象的方法,对象原型的方法: 函数的调用方式:直接调用,call/apply,with 对于直接定义的函数和对象的方法,作用域默认状态下是它的定义处的作用域链. 对于直接定义的函数,this指向window. 对于对象的方法,this指向实例化对象(对应于实例化对象默认返回this的情况). 用ca…
一.ES6 允许使用"箭头"(=>)定义函数. // var f = v => v;// 上面的箭头函数等同于: // var f = function(v) {// return v;// };// 如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分.如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回. // 由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错. 箭头函…
普通函数:this指向分为4种情况,1. obj.getName();//指向obj2.getName();//非严格模式下,指向window,严格模式下为undefined3. var a = new A();   a();//指向A本身4.getName().apply(obj);//指向obj 箭头函数:箭头函数本身是没有this和arguments的,在箭头函数中引用this实际上是调用的是定义时的上一层作用域的this.这里强调的是上一层作用域,是因为对象是不能形成独立的作用域的.例如…
函数声明: function add(a, b) { // ... } 1.顾名思义,声明一个函数, 用关键字 “function” 来告诉,这是一个函数. 2.任何地方,想用就可以拿过来使用 函数表达式: var add = function (){ //... }; 表达式, 最先想到的赋值表达式,如 a = b; 1.表达式与声明的区别之一, 末尾有无 分号(;) 结束. 2.表达式不同于声明的区别之二: 函数表达式的函数并不是想用就可以调用, 他要等到程序执行到他的时候才可以使用. 在函…
ES6标准新增了一种新的函数:Arrow Function(箭头函数). 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 箭头函数相当于匿名函数,并且简化了函数定义.箭头函数有两种格式,一种像上面的,只包含一个表达式,连{ ... }和return都省略掉了.还有一种可以包含多条语句,这时候就不能省略{ ... }和return: x => { ) { return…
参数 函数内部可用的 arguments 对象来访问函数的实参 注意 在函数递归调用的时候(在某一刻同一个函数运行了多次,也就是有多套实参),那么 arguments 属性的值是最近一次该函数调用时传入的实参 如果函数不在执行期间,那么该函数的 arguments 属性的值是 null arguments对象不是一个 Array .它类似于Array,但除了length属性和索引元素之外没有任何Array属性.例如,它没有 pop 方法,但是可以使用Array.prototype.pop.cal…
箭头函数 ES6标准新增了一种新的函数:Arrow Function(箭头函数). x => x * x相当于: function (x) { return x * x; }箭头函数相当于匿名函数,并且简化了函数定义.箭头函数有两种格式,一种像上面的,只包含一个表达式,连{ ... }和return都省略掉了.还有一种可以包含多条语句,这时候就不能省略{ ... }和return: x => { if (x > 0) { return x * x; } else { return - x…
最近在看 redux 的源码,代码结构很简单,主要就是6个文件,其中 index.js 负责将剩余5个文件中定义的方法 export 出来,其他5个文件各自负责一个方法的实现. 大部分代码比较简单,很容易看懂,但是在 applyMiddleware.js 中 有一个地方很有意思,用到了柯里化和箭头函数的组合.在增强 store,丰富 dispath 方法的时候,可能会用到多个 中间件,所以这个柯里化的嵌套可能会很深,导致对 箭头函数和柯里化 不是很熟悉的童鞋,一看源码就会有些理不清调用思路. 一…
前端分享----JS异步编程+ES6箭头函数 ##概述Javascript语言的执行环境是"单线程"(single thread).所谓"单线程",就是指一次只能完成一件任务.如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务. 这种模式的好处是实现起来比较简单,执行环境相对单纯:坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行.常见的浏览器无响应(假死),往往就是因为某一段Javascript代码长时间运行(比如死循环),…
在做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…
JS中this的四种用法 1.在一般函数方法中使用 this 指代全局对象 function test(){ this.x = 1; alert(this.x); } test(); //1 2.作为对象方法调用,this 指代上级对象 function test(){ alert(this.x); } var o = {}; o.x = 1; o.m = test; o.m(); // 1 3.作为构造函数调用,this 指代new 出的对象 function test(){ this.x =…
一.前言 Uncaught TypeError: ... is not a function function max(){}表示函数声明,可以放在代码的任何位置,也可以在任何地方成功调用: var max  = function(){};表示函数表达式,即将一个匿名函数赋值给一个变量,实现通过变量来调用这个匿名函数,但它需要在声明过后才能进行调用,如果调用在声明之前就会报如上红色字体的错误.而这在函数声明中不会出现这样的错误. 二.正文 (一).代码示例 //函数表达式 myFunc();//…