箭头函数表达式和声名式函数表达式的区别以及 Function.prototype的bind, apply,call方法
箭头函数不能用做构造函数
箭头函数没有arguments参数
箭头函数没有自己的this,是从作用域链上取this,是与箭头函数定义的位置有关的,与执行时谁调用无关,所以用call,apply,bind去调用箭头函数时,第一个参数会被忽略。非箭头函数是在函数调用时,在当前执行上下文里动态的取this。
Function.prototype的bind, apply,call方法:
apply,call和bind都为改变this的指向,利用这一点可以用它们来实现继承
function objFun() {
this.age = 18;
console.log(this)
};
const obj = {name:'example'};
const bindFun= objFun.bind(obj);
bindFun();//{age:18, name: 'examle'}
apply用于不知道参数具体个数的情况下,参数的个数是固定值时,用call.
bind有别于以上两者的是,它不会立即的执行,它只是一个绑定,即提前为该函数指定this指向和预设参数。
用bind来实现偏函数, 在 bind时可以预设初始参数。在后继调用时,会将预设参数加到参数列表前面,再执行目的函数。
function objFun(name, age, address) {
this.name = name;
this.age = age;
this.address = address;
console.log(this)
};
const obj = {name:'example'};
const bindFun= objFun.bind(obj, obj.name);
bindFun(18, 'China'); // 第一个参数name被预设为example,而且不可改变。即后继执行多少次bindFun,name值都为exapmle
bind可以配合setTimeout使用,可以使this指向类实例。 使用window.setTimeout时会将this指向window。当需要this指向实例对象时,需要将this做为bind的参数来用于setTimeout内的回调函数上。
function F() {
this.name = 'example';
}
F.prototype.show = function() {
setTimeout( console.log.bind(console, this.name), 1000);
或者 setTimeout( Function.prototype.bind.call(console.log, console, this.name), 1000);
} const f = new F(); f.show();
setTimeout的第一个参数为回调函数,即函数的声名。如果不是函数,而是一行代码的话,比如 console.log(1), 会报和eval()一样的安全风险.
bind还可用于apply和call方法,来实现快捷调用
Array.prototype.slice.apply([1,2,3]) <=> const slice = Function.prototype.apply.bind(Array.prototype.slice); slice([1,2,3]) // slice的参数不固定,所有bind apply方法
const map = Function.prototype.call.bind(Array.prototype.map, [1,2,3]); //数据的map方法就两个参数,所以此处bind call方法 map(i => console.log(i))
map(i=> i * 2)
map(i => `我是${i}`)
Function.protoType.call.bind/ Function.protoType.bind.call/Function.protoType.apply.call/Function.protoType.apply.bind以及ES6的Reflect.apply
1 Function.protoType.call.bind
绑定call这个函数
var unboundSlice = Array.prototype.slice;
var slice = Function.prototype.call.bind(unboundSlice); function list() {
return slice(arguments);
} var list1 = list(1, 2, 3); // [1, 2, 3]
2 Function.protoType.bind.call
立即执行bind函数
setTimeout( Function.prototype.bind.call(console.log, console, this.name), 1000);
3 Function.protoType.apply.call
立即执行apply函数
Function.prototype.apply.call(console.log, console, [1,2,3])
4 Function.protoType.apply.bind
var log = Function.prototype.apply.bind(console.log, console);
log([1 ,2 ,3]) // 1 2 3
5 Reflect.apply
等价于Function.prototype.apply.call
Reflect.apply(console.log, console, [1, 2, 3]) // 1 2 3
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
http://www.ituring.com.cn/article/128553
箭头函数表达式和声名式函数表达式的区别以及 Function.prototype的bind, apply,call方法的更多相关文章
- Python入门之三元表达式\列表推导式\生成器表达式\递归匿名函数\内置函数
本章目录: 一.三元表达式.列表推导式.生成器表达式 二.递归调用和二分法 三.匿名函数 四.内置函数 ================================================ ...
- MVC 的 Razor引擎显示代码表达式与隐式代码表达式
隐式代码表达式 就是一个标识符,之后可以跟任意数量的方法调用("()").索引表达式("[]")及成员访问表达式(".").但是,除了在&q ...
- 2018.11.06 生成器函数进阶&列表推导式&生成器表达式
1.生成器函数进阶 2.列表推导式 3.生成器表达式
- 关于gcc内置函数和c隐式函数声明的认识以及一些推测
最近在看APUE,不愧是经典,看一点就收获一点.但是感觉有些东西还是没说清楚,需要自己动手验证一下,结果发现需要用gcc,就了解一下. 有时候,你在代码里面引用了一个函数但是没有包含相关的头文件,这个 ...
- python基础-三元表达式/列表推导式/生成器表达式
1.三元表达式:如果成立返回if前的内容,如果不成立返回else的内容 name=input('姓名>>: ') res='SB' if name == 'alex' else 'NB' ...
- Python-02 生成器表达式,列表推导式
列表推导式和生成器表达式 列表推导式,生成器表达式1,列表推导式比较直观,占内存2,生成器表达式不容易看出内容,省内存. [ 变量(加工后的数据) for 变量i in 可迭代的数据类型 ] 列表 ...
- day12(表达式,推导式,名称空间与作用域,函数的嵌套定义)
一,复习 # 字符串的比较 # -- 按照从左往右比较每一个字符,通过字符对应的ascll进行比较 # print('a' > 'A') #True # print('ac' > 'ab' ...
- Python_Mix*生成器,生成器函数,推导式,生成器表达式
生成器: 生成器的本质就是迭代器 生成器一般由生成器函数或者生成器表达式来创建,其实就是手写的迭代器 def func(): print('abc') yield 222 #由于函数中有了yield ...
- python 全栈开发,Day14(列表推导式,生成器表达式,内置函数)
一.列表生成式 生成1-100的列表 li = [] for i in range(1,101): li.append(i) print(li) 执行输出: [1,2,3...] 生成python1期 ...
随机推荐
- vmstat-虚拟内存查看实例
虚拟内存运行原理 在系统中运行的每个进程都需要使用到内存,但不是每个进程都需要每时每刻使用系统分配的内存空间.当系统运行所需内存超过实际的物理内存,内核会释放某些进程所占用但未使用的部分或所有物理内存 ...
- bzoj2467 生成树
传送门 生成树计数裸题,因为模数不是质数所以要用辗转相除的高斯消元. de了很久的bug然后发现一个变量A赋值后下一行又申明了一个新的临时变量A(: //Achen #include<algor ...
- CSS hack处理
css hack指各版本及各品牌浏览器之间对CSS解释后出现网页内容的误差. 各浏览器CSS解析: 1.大部分特殊字符IE浏览器支持,其他主流浏览器firefox,chrome,opera,safar ...
- 关于Python缩进,我们该了解哪些?
Python是一门独特的语言,它的代码块是通过缩进(Indentation)来标记的(大部分语言都是使用花括号作为代码块的标记),具有相同缩进的多行代码属于同一个代码块.如果代码莫名其妙的乱缩进,Py ...
- Codeforces Round #197 (Div. 2) A. Helpful Maths【字符串/给一个连加计算式,只包含数字 1、2、3,要求重新排序,使得连加的数字从小到大】
A. Helpful Maths time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...
- 弘康人寿基于 RocketMQ 构建微服务边界总线的实践
随着互联网+和平台化战略的兴起,各个行业的 IT 系统都在向互联网架构发展,涉及的主要技术包括微服务.消息和弹性计算等,采用微服务架构实现服务高内聚.低耦合,通过异步消息完成交易快速响应和高并发.由于 ...
- maven与sbt修改国内镜像
一.idea中的maven 1.打开IntelliJ IDEA->Settings ->Build, Execution, Deployment -> Build Tools > ...
- CSS3--关于z-index不生效问题
最近写CSS3和js结合,遇到了很多次z-index不生效的情况: 1.在用z-index的时候,该元素没有定位(static定位除外) 2.在有定位的情况下,该元素的z-index没有生效,是因为该 ...
- python 模块的作用
- php 明天,下个星期,时间函数
例子:<?php $nextWeek = time() + (7 * 24 * 60 * 60); // 7 days; 24 hours; 60 mins; 60secs echo 'Now: ...