箭头函数表达式和声名式函数表达式的区别以及 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期 ...
随机推荐
- java-文件切割合并_对象的序列化
一 文件的操作 1.1 概况 1,切割文件的原理:一个源对应多个目的:切割文件的两种方式. 2,碎片文件的命名和编号. 3,程序代码体现. 4,如何记录源文件的类型以及碎片的个数(建立配置信息文件)( ...
- VI/VIM编辑器快捷键
常用快捷键: Ctrl+f 向下翻页 Ctrl+b 向上翻页 G 移动到文件最后一行 gg 移动到文件第一行 N+回车 ...
- JavaScript模式:字面量和构造函数
本篇主要讨论了通过字面量以构造对象的方法,比如对象.数组以及正则表达式等字面量的构造方法,同时还讨论了与类似Object()和Array()等内置构造函数相比,为什么基于字面量表示法是更为可取. 对象 ...
- leetcode 60-80 easy
66.Plus One Given a non-empty array of digits representing a non-negative integer, plus one to the i ...
- 灵动微本土MCU厂商具有吸引力的增长点
作为各种电子产品的控制和处理核心,微控制单元(MCU)器件是一种集成微处理器(CPU).存储器(RAM/ROM).计数器,以及I/O端口的芯片.从MCU内核架构来看,单片机有历经多年的8051,基于A ...
- Unity3D研究院之为什么Inspector视图中脚本前面的勾选框没了
我一个同事刚问我为啥有时候脚本的勾选项没有了?有时候不想让某条脚本执行,可以直接在编辑器中点掉勾选按钮即可.如下图所示 以前我也遇到过这个问题,但是一直都没怎么注意,因为一般情况下也用不到.今天刚好有 ...
- 利用Factory-boy来生成实例数据
库和版本:Faker==2.0.0factory-boy==2.12.0 官方文档:https://factoryboy.readthedocs.io/en/latest/index.html 1. ...
- BootstrapValidation一些tips
BootstrapValidation一些tips:1. callback的用法 如果你有一些特别的检查需要,比如两个元素必需有一个有值,你可以在两个元素上加上callback,例:sel和cb必需有 ...
- (转)jQuery中append(),prepend()与after(),before()的区别
在jQuery中,添加元素有append(),prepend和 after(),before()两种共四个. 根据字面意思我们可以看出他们分别是追加,添加和之前,之后,意思相近.同时他们又都有添加元素 ...
- Java ANSI转码UTF-8
public static void change(String filepath) throws UnsupportedEncodingException, IOException{ Buffere ...