ES6箭头函数总结

转自: https://www.cnblogs.com/mengff/p/9656486.html  

1. 箭头函数基本形式

let func = (num) => num;
let func = () => num;
let sum = (num1,num2) => num1 + num2;
[1,2,3].map(x => x * x);

2. 箭头函数基本特点

(1). 箭头函数this为父作用域的this,不是调用时的this

箭头函数的this永远指向其父作用域,任何方法都改变不了,包括call,apply,bind。
普通函数的this指向调用它的那个对象。

复制代码

let person = {name:'jike',init:function(){//为body添加一个点击事件,看看这个点击后的this属性有什么不同document.body.onclick = ()=>{alert(this.name);//?? this在浏览器默认是调用时的对象,可变的?                  }}
}
person.init();

复制代码

上例中,init是function,以person.init调用,其内部this就是person本身,而onclick回调是箭头函数,
其内部的this,就是父作用域的this,就是person,能得到name。

复制代码

let person = {name:'jike',init:()=>{//为body添加一个点击事件,看看这个点击后的this属性有什么不同document.body.onclick = ()=>{alert(this.name);//?? this在浏览器默认是调用时的对象,可变的?                  }}
}
person.init();

复制代码

上例中,init为箭头函数,其内部的this为全局window,onclick的this也就是init函数的this,也是window,
得到的this.name就为undefined。

(2). 箭头函数不能作为构造函数,不能使用new

复制代码

//构造函数如下:
function Person(p){this.name = p.name;
}
//如果用箭头函数作为构造函数,则如下
var Person = (p) => {this.name = p.name;
}

复制代码

由于this必须是对象实例,而箭头函数是没有实例的,此处的this指向别处,不能产生person实例,自相矛盾。

(3). 箭头函数没有arguments,caller,callee

箭头函数本身没有arguments,如果箭头函数在一个function内部,它会将外部函数的arguments拿过来使用。
箭头函数中要想接收不定参数,应该使用rest参数...解决。

复制代码

let B = (b)=>{console.log(arguments);
}
B(2,92,32,32);   // Uncaught ReferenceError: arguments is not definedlet C = (...c) => {console.log(c);
}
C(3,82,32,11323);  // [3, 82, 32, 11323]

复制代码

(4). 箭头函数通过call和apply调用,不会改变this指向,只会传入参数

复制代码

let obj2 = {a: 10,b: function(n) {let f = (n) => n + this.a;return f(n);},c: function(n) {let f = (n) => n + this.a;let m = {a: 20};return f.call(m,n);}
};
console.log(obj2.b(1));  // 11
console.log(obj2.c(1)); // 11

复制代码

(5). 箭头函数没有原型属性

复制代码

var a = ()=>{return 1;
}function b(){return 2;
}console.log(a.prototype);  // undefined
console.log(b.prototype);   // {constructor: ƒ}

复制代码

(6). 箭头函数不能作为Generator函数,不能使用yield关键字

(7). 箭头函数返回对象时,要加一个小括号

var func = () => ({ foo: 1 }); //正确
var func = () => { foo: 1 };   //错误

(8). 箭头函数在ES6 class中声明的方法为实例方法,不是原型方法

复制代码

//deom1
class Super{sayName(){//do some thing here}
}
//通过Super.prototype可以访问到sayName方法,这种形式定义的方法,都是定义在prototype上
var a = new Super()
var b = new Super()
a.sayName === b.sayName //true
//所有实例化之后的对象共享prototypy上的sayName方法//demo2
class Super{sayName =()=>{//do some thing here}
}
//通过Super.prototype访问不到sayName方法,该方法没有定义在prototype上
var a = new Super()
var b = new Super()
a.sayName === b.sayName //false
//实例化之后的对象各自拥有自己的sayName方法,比demo1需要更多的内存空间

复制代码

因此,在class中尽量少用箭头函数声明方法。

(9). 多重箭头函数就是一个高阶函数,相当于内嵌函数

复制代码

const add = x => y => y + x;
//相当于
function add(x){return function(y){return y + x;};
}

复制代码

(10). 箭头函数常见错误

let a = {foo: 1,bar: () => console.log(this.foo)
}a.bar()  //undefined

bar函数中的this指向父作用域,而a对象没有作用域,因此this不是a,打印结果为undefined

复制代码

function A() {this.foo = 1
}A.prototype.bar = () => console.log(this.foo)let a = new A()
a.bar()  //undefined

复制代码

原型上使用箭头函数,this指向是其父作用域,并不是对象a,因此得不到预期结果

 

 

参考: https://www.cnblogs.com/bfc0517/p/6706498.html
      https://www.cnblogs.com/biubiuxixiya/p/8610594.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/330464.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring bean - scope详解

转载自 Spring bean - scope详解 Scope是定义Spring如何创建bean的实例的。 在创建bean的时候可以带上scope属性,scope有下面几种类型。 Singleton 这也是Spring默认的scope,表示Spring容器只创建一个bean的实例,Spring在创建第一次后会缓存起…

Invalid bound statement (not found):出现的原因和解决方法

解决错误的步骤出现了什么错误可能导致的原因解决办法出现了什么错误 错误截图: //BindingException 数据绑定异常 not found 找不到 org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.kuan.edu.mapper.CourseMapper.getP…

es6箭头函数(墙裂推荐)

转自: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions 箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或 new.target。这些函数表达式更适用于那…

使用腾讯云发送短信API接口实现(完整流程)

步骤一、开通腾讯云短信服务二、申请签名前的准备(申请公众号)三、创建签名和模板四、腾讯云API实现发送短信五、使用springboot进行调用六、可能会报的错误一、开通腾讯云短信服务 在腾讯云官网找到短信服务,开通 二、申请签名前的准备&a…

获取Spring的ApplicationContext的几种方式

转载自 获取Spring的ApplicationContext的几种方式 Application Context定义 简单来说就是Spring中的高级容器,可以获取容器中的各种bean组件,注册监听事件,加载资源文件等功能。 具体定义可以参考官网:https://spring.io/underst…

'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序 或批处理文件的解决方法(webpack热加载)

【README】webpack-dev-server 是一个支持热编译的服务器(动态编译) 【1】问题 webpack-dev-server 不是内部或外部命令,也不是可运行的程序 或批处理文件的解决方法 【2】安装 webpack 服务器, 如下: 参考指南&…

Spring开启方法异步执行

转载自 Spring开启方法异步执行 EnableAsync Target(ElementType.TYPE) Retention(RetentionPolicy.RUNTIME) Documented Import(AsyncConfigurationSelector.class) public interface EnableAsync {Class<? extends Annotation> annotation() default Annotation.clas…

idea关闭页面显示的浏览器图标

每当我们打开HTML或者XML的时候老是弹出来&#xff0c;看着就烦&#xff01; 关闭方法&#xff1a; &#xff08;1&#xff09;点击文件 》设置 &#xff08;2&#xff09;工具 》web浏览器 这样就完成了&#xff0c;再也没有烦人的小图标了。

webpack打包器小结(1)

【1】intro to webpack 官网&#xff1a; webpack官网: http://webpack.github.io/ webpack3文档(英文): https://webpack.js.org/ webpack3文档(中文): https://doc.webpack-china.org/ 【2】 自动化构建工具webpack_打包js,json文件 step1、创建文件夹 mywebpack ; st…

Spring快速开启计划任务

转载自 Spring快速开启计划任务 Spring3.1开始让计划任务变得非常简单&#xff0c;只需要几个注解就能快速开启计划任务的支持。 EnableScheduling Target(ElementType.TYPE) Retention(RetentionPolicy.RUNTIME) Import(SchedulingConfiguration.class) Documented public i…

ACM训练4

AB Problem INPUT Each line will contain two integers A and B. Process to end of file. OUTPUT For each case, output A B in one line. 问题连接&#xff1a;https://vjudge.net/problem/hdu-1000?tdsourcetags_pctim_aiomsg AC代码如下&#xff1a; #include &…

Spring Aware容器感知技术

转载自 Spring Aware容器感知技术 Spring Aware是什么 Spring提供Aware接口能让Bean感知Spring容器的存在&#xff0c;即让Bean可以使用Spring容器所提供的资源。 Spring Aware的分类 几种常用的Aware接口如下。 Aware接口说明ApplicationContextAware能获取Application Co…

json详解

JSON的全称是”JavaScript Object Notation”&#xff0c;意思是JavaScript对象表示法&#xff0c;它是一种基于文本&#xff0c;独立于语言的轻量级数据交换格式。XML也是一种数据交换格式&#xff0c;为什么没有选择XML呢&#xff1f;因为XML虽然可以作为跨平台的数据交换格式…

Error in nextTick: “TypeError: Cannot read properties of undefined (reading ‘clearValidate‘)“

我在打开对话框清除表单校验的时候报了这个错 我的解决办法是加个if判断有没有 这是原来的 加个if

ACM训练题6

ASCII码排序 Problem Description INPUT 输入三个字符后&#xff0c;按各字符的ASCII码从小到大的顺序输出这三个字符。 OUTPUT 对于每组输入数据&#xff0c;输出一行&#xff0c;字符中间用一个空格分开. 问题连接&#xff1a;https://vjudge.net/problem/hdu-2000 AC…

Spring Enable*高级应用及原理

转载自 Spring Enable*高级应用及原理 Enable* 之前的文章用到了一些Enable*开头的注解&#xff0c;比如EnableAsync、EnableScheduling、EnableAspectJAutoProxy、EnableCaching等&#xff0c;Enable表示开启/允许一项功能。 Enable*工作原理 我们只需要几个很简单的注解就…

ACM训练题7

计算球体积 Problem Description 根据输入半径输出球的体积 INPUT 输入数据有多组&#xff0c;每组占一行&#xff0c;每行包括一个实数&#xff0c;表示球的半径。 OUTPUT 输出对应的球的体积&#xff0c;对于每组输入数据&#xff0c;输出一行&#xff0c;计算结果保留…

JSON与JS对象的区别

和一些同学一样&#xff1a;总是感觉json对象(其实json不是对象)和js对象的字面量表示法相同&#xff0c;最近学习json&#xff0c;真心搞不懂&#xff0c;js对象和json有什么区别&#xff1f;就是感觉json的key要用” “括起来&#xff0c;但是js对象的字面量表示法不需要。  …

Spring Boot开启的2种方式

转载自 Spring Boot开启的2种方式Spring Boot依赖 使用Spring Boot很简单&#xff0c;先添加基础依赖包&#xff0c;有以下两种方式 1. 继承spring-boot-starter-parent项目 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-b…

JSON | JSON字符串和JSON对象的区别

最近在学习Vue.js&#xff0c;里面有个存储、读取本地缓存的功能&#xff0c;不停地用JSON.parse()&#xff0c;和JSON.stringify()来转换JSON字符串和JSON对象。自己有点晕&#xff0c;不明白两者的区别&#xff0c;看起来感觉是一样的&#xff0c;也不知道为什么一定要转换才…