关于ES6 块级作用域 任何一对花括号({})中的语句集都属于一个块,在块中声明的变量在代码块外都是不可访问的,称之为块级作用域,ES5以前没有块级作用域 let let 是ES6新增的声明变量的一种方法,与 var 最明显的区别是 不存在变量提升 产生新的作用域(块级作用域) 在一个作用域中 不允许重复声明 暂时性死区 在一个块级作用域的任何地方 声明过 就不会再访问外面的了 var c = 123;​if(true) { console.log(c); let c;} // c is not…

箭头函数中的this指向的是定义时的this,而不是执行时的的this . 举例: 案例中,我们的obj对象中有一个属性x和一个属性show( )方法,show( )通过this打印出x的值,结果是undefined.这是为什么呢?难道x的值不是100吗? 没错,x的值确实是100,但问题出在了this上,当代码执行到了setTimeout( )的时候,此时的this已经变成了window对象(setTimeout( )是window对象的方法),已经不再是obj对象了,所以我们用this.x获…

1.箭头函数 在es6中,单一参数的单行箭头函数语法结构可以总结如下: const 函数名 = 传入的参数 => 函数返回的内容,因此针对于 const pop = arr => arr.pop(),其中 pop是函数名, arr是传的参数 , =>之后的内容是函数返回的内容,该函数相当于: var pop = function(arr){   arr.pop()} //箭头函数 const add1 = (a,b) => a+b; console.log(add1(2,2));…

JavaScript中的函数可以通过几种方式创建,如下. // 函数声明 function getName() { return 'Michael' } // 函数表达式 const getName = function() { return 'Michael' } // 箭头函数(同样也是表达式) const getName = () => { return 'Michael' } 函数声明和表达式之间的差别是 JavaScript 解释器中存在一种变量声明被提升的机制,也就是说函数声明会被提…

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…

用bind形式 方便测试,含有this时候最好用bind形 其他情况用箭头函数 含有this的时候也可以用箭头函数…

一.数组的扩展,ES6在数组扩展了一些API,以实现更多的功能 1.Array.from:可以将类数组和可遍历的数据结构转换成真正的数组,如下所示 var a = { '0':1,'1':1,length:2 }; var arr = Array.from(a); console.log(arr) Array [ 1, 1 ] ---------------ES5的实现----------- var arr = [].slice.call(a); console.log(arr) Array […

1函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello World 上面代码检查函数log的参数y有没有赋值,如果没有,则指定默认值为World.这种写法的…

函数js原有的: 属性:arguments[].caller(调用该函数的引用,注意与callee分别开,callee指的是调用函数本身经常在递归中出现).length(形参个数).prototype 方法:apply().call().bind().toString() 函数的扩展: 函数参数的默认值 在es6之前不能给函数的参数给定默认值,一般会采用这样的方法: function a(x,y){ if(typeof y === 'undefined'){ y = 'world'; } con…

call()/apply()/bind()的用法 Function.prototype.bind(obj) :将函数内的this绑定为obj, 并将函数返回 function foo() { console.log(this) // this指向window } foo() let obj = {userName: 'huang'} function foo() { console.log(this) // this指向obj console.log(this.userName) // huan…

函数的扩展 函数参数的默认值 基本用法 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello World 上面代码检查函数log的参数y有没有赋值,如果没有,则指定默认值为World.…

1.函数参数的默认值 1.1基本用法 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello World 上面代码检查函数log的参数y有没有赋值,如果没有,则指定默认值为World.这…

聊一聊 Vue 中 watch 对象中的回调函数为什么不能是箭头函数 本文重点知识点速览: Vue 中的 watch 对象中的回调函数不能是箭头函数. 箭头函数中的 this 指向的是函数定义时所在的对象,普通函数中的 this 指向的是函数运行时所在的对象. 函数的 this 指向问题. 一起学习吧... 说起箭头函数大家一定不陌生,箭头函数是 ES6 中对函数的扩展,使用起来方便快捷,可能有些小伙伴对箭头函数不是特别了解,所以在这里先举个例子吧. // 普通函数定义 function add…

1.函数参数的默认值 基本用法 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello World 这种写法的缺点在于,如果参数y赋值了,但是对应的布尔值为false,则该赋值不起作用.…

this指向本质 箭头函数this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this.正是因为它没有this,所以也就不能用作构造函数. 箭头函数转成 ES5 的代码如下: // ES6 function foo() { setTimeout(() => { console.log('id:', this.id); }, 100); } // ES5 function foo() { var _this…

一.箭头函数 普通函数1 var add = function (a, b) { return a + b; } 普通函数2 function add (a, b) { return a + b; } 箭头函数 var add = (a, b) => a + b; 如果函数内部只有一句返回值,连return都不用写了,如果里面执行的语句比较多,就用{ }括起来 var add = (a, b)=> { console.log("这是箭头函数"); return a + b;…

× 目录 [1]痛点 [2]解决 [3]基本用法[4]回调函数[5]注意事项 前面的话 this机制与函数调用有关,而作用域则与函数定义有关.有没有什么是可以将this机制和作用域联系起来的呢?本文将介绍ES6新增的内容——箭头函数 痛点 对于闭包的痛点在于,闭包的this默认绑定到window对象,但又常常需要访问嵌套函数的this,所以常常在嵌套函数中使用var that = this,然后在闭包中使用that替代this,使用作用域查找的方法来找到嵌套函数的this值 var a = 0;…

箭头符号在JavaScript诞生时就已经存在,当初第一个JavaScript教程曾建议在HTML注释内包裹行内脚本,这样可以避免不支持JS的浏览器误将JS代码显示为文本.你会写这样的代码: <script language="javascript"> <!-- document.bgColor = "brown"; // red // --> </script> 老式浏览器会将这段代码解析为两个不支持的标签和一条注释,只有新式浏…

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

为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 箭头函数 阅读: 45060 ES6标准新增了一种新的函数:Arrow Function(箭头函数). 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 在继续学习箭头函数之前,请测试你的浏览…

ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式:   从上面的代码可以看出存在一个问题,当传入的参数为0或者false时,会直接取到后面的值,而不是传入的这个参数值. 那怎么解决呢?对于上图的代码,可以通过判断是否传入了num参数,没有就用默认值:   这种做法还是很麻烦的,而ES6则直接在参数定义里面设置函数参数的默认值,而且不用担心传入参数是0或者false会出错了: 2.箭头函数 箭头函数用 =>…

作者 Jason Orendorff  github主页  https://github.com/jorendorff 箭头符号在JavaScript诞生时就已经存在,当初第一个JavaScript教程曾建议在HTML注释内包裹行内脚本,这样可以避免不支持JS的浏览器误将JS代码显示为文本.你会写这样的代码: <script language="javascript"> <!-- document.bgColor = "brown"; // red…

箭头函数是ECMAScript 6最受关注的更新内容之一.它引入了一种用「箭头」(=>)来定义函数的新语法,它…它碉堡了~.箭头函数与传统的JavaScript函数主要区别在于以下几点: 对 this 的关联.函数内置 this 的值,取决于箭头函数在哪儿定义,而非箭头函数执行的上下文环境. new 不可用.箭头函数不能使用 new 关键字来实例化对象,不然会报错. this 不可变.函数内置 this 不可变,在函数体内整个执行环境中为常量. 没有arguments对象.更不能通过argume…

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

最近被问到了一个问题: >javaScript 中的箭头函数 (=>) 和普通函数 (function) 有什么区别? 我当时想的就是:这个问题很简单啊~(flag),然后做出了错误的回答-- >箭头函数中的this和调用时的上下文无关,而是取决于定义时的上下文 这并不是很正确的答案--虽然也不是完全错误 ##箭头函数中的 this 首先说我的回答中没有错误的部分:箭头函数中的 this 确实和调用时的上下文无关 ```javascript function make () { retu…

箭头函数有两个好处. 1.他们比传统函数表达式简洁. const arr = [1, 2, 3]; const squares = arr.map(x => x * x); // 传统函数表达式: const squares = arr.map(function (x) { return x * x }); 2.箭头函数不会绑定关键字this,我们不需要用bind()或者that = this这种方法了 function UiComponent() { const button = docume…

箭头函数是es6新增的非常有意思的特性,初次写起来,可能会觉得别扭,习惯之后,会发现很精简. 什么是箭头函数? 箭头函数是一种使用箭头( => )定义函数的新语法, 主要有以下特性: 不能通过new关键字调用 没有原型, 因为不能通过new调用,所以没有原型 没有this, super,arguments和new.target绑定, new.target和super关键字是es6新增的 箭头函数中的this,取决于他的上层非箭头函数的this指向 没有arguments对象,但是可以获取到外层函…

es6箭头函数的用法 箭头函数是es6的一种函数的简写方法. 如下: var f = v = > v; //等同于 var f = function(v){ return v; } var sum = (num1,num2) => num1+num2 ; //等同于 var sum = function(num1,num2){ return num1+num2 } [1,2,3].map(function (x) { return x * x; }); // 箭头函数写法 [1,2,3].ma…

JavaScript箭头函数是ECMAScript 6中引入的编写函数表达式的一种简便方法.通常,在JavaScript中,可以通过两种方式创建函数: 函数语句. 函数表达式. 可以如下所示创建函数语句: function add(num1, num2) { var res = num1 + num2; return res; } var sum = add(7, 2); console.log(sum); 也可以创建相同功能的函数表达式,如下所示: var add = function (nu…

在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/学习. ES6标准新增了一种新的函数:Arrow Function(箭头函数). 更简洁的语法 我们先来按常规语法定义函数: function (x) { return x * x; } 该函数使用箭头函数可以使用仅仅一行代码搞定! x => x * x 箭头函数相当于匿名函数,并且简化了函数定义.…