js bind的实现
call,apply,bind都是用来挟持对象或者说更改this指向的,但是区别还是有的,call 传参是 fn.call(this,1,2,3) apply传参是 fn.apply(this,[1,2,3])
而前两者是立即执行的,后者Bind是返回一个函数 var foo = fn.bind(this) foo()
看到一个关于美团面试题是如何实现js bind
if (typeof Function.prototype.bind === "undefined"){
Function.prototype.bind = function (thisArgs){
var fn = this,
slice = Array.prototype.slice,
args = slice.call(arguments, 1);//都是为了截取参数
return function (){
return fn.apply(thisArgs, args.concat(slice.call(arguments)));
}
}
}
代码来自书籍 《javaScript 模式》
其实结合上ES6可以更简洁:
Function.prototype.bind1 = function (thisArgs){
var fn = this,//foo
//arguments 是类数组,支持for循环,但不支持数组的方法
// args = [].slice.call(arguments, 1);//截取参数 5
args = Array.from(arguments).slice(1);//截取参数 5
return function (){
return fn.apply(thisArgs,args);
}
}
var m = {
"x" : 1
};
function foo(y) {
console.log(this.x + y);
}
// foo.apply(m, [5]);
// foo.call(m, 5);
var foo1 = foo.bind1(m,5);
foo1();
上面的return函数也换成箭头函数的话就更加简洁了。
Function.prototype.bind1 = function (thisArgs){
args = Array.from(arguments).slice(1);//截取参数 5
return ()=>this.apply(thisArgs,args)
}
箭头函数注意:只有一句的时候可以省略return,然后前面的fn也可以省略了。
js bind的实现的更多相关文章
- JS bind()方法、JS原生实现bind()
一.arguments的含义 // arguments 是一个对应于传递给函数的参数的类数组对象 function a(){ console.log(arguments); } a(); // Arg ...
- js bind
1.作用 函数的bind方法用于将函数体内的this绑定到某个对象,然后返回一个新函数. //bind 相比于call apply this 都等于 obj; bind是产生一个新的函数 不执 ...
- js bind绑定事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Js/Bind()的认识
1.bind( eventType [, eventData], handler(eventObject))2.向绑定的对象上面提供一些事件方法的行为.其中三个参数的意义分别代表: 一.eventTy ...
- js bind 绑定this指向
1.示例代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UT ...
- js bind es5函数柯里化
绑定函数 bind()最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的this值.常见的错误就像上面的例子一样,将方法从对象中拿出来,然后调用,并且希望this指向原来的对象. 如果不做特 ...
- bind,call,apply区别
js中bind.call.apply函数的用法 2015-02-27 21:16:39 标签:javascript js bind call apply 原创作品,允许转载,转载时请务必以超链接形式 ...
- Atitti.数据操作crud js sdk dataServiceV3设计说明
Atitti.数据操作crud js sdk dataServiceV3设计说明 1. 增加数据1 1.1. 参数哦说明1 2. 查询数据1 2.1. 参数说明2 3. 更新数据2 3.1. 参数说明 ...
- javascript深入理解js闭包(转)
javascript深入理解js闭包 转载 2010-07-03 作者: 我要评论 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. ...
随机推荐
- 2017年9月22日 关于JS数组
JS数组 JS数组的定义方法 var arr = []; var arr = new Array() JS数组属性 长度 arr.length 遍历数组 索引值:从0开始数 第一种方法 for(var ...
- 2018-12-20 第二章Java 预习作业
一.什么是变量?如何使用变量? 答:变量是在程序运行中其值可以改变的量,它是Java程序的一个基本存储单元. 变量的语法格式如下: [访问修饰符]变量类型 变量名[=初始值]: 二.java中基本数据 ...
- css 盒模型 文档流 几种清除浮动的方法
盒模型 1.box-sizing: content-box 是普通的默认的一种盒子表现模式 盒子大小为 width + padding + border content-box:此值为其默认值,其 ...
- scss-&父选择器标识符
在使用选择器嵌套的时候有一种情况需要特别注意,先看一段scss代码实例: .text a { color: blue; :hover { color: red } } 也许写此段代码目的是为了将其编译 ...
- 微信小程序问题总结
1.navigator不能跳转到tabBar所包含的页面 例如: tabbar包含center页面,不包含page1页面,使用如下跳转: <navigator url='../center/ce ...
- Homebrew 的使用
安装 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/ins ...
- 如何angular过滤器进行排序???
首先定义一个json文件: 然后写HTML文件: <div id="box"> <!--第一个下拉框--> <select ng-model=&quo ...
- asp.net后台获取html控件的值
1.asp.net后台获取前台type=text控件的值 前台:<input name="txtName" class="username" type=& ...
- VC++上机实习
I.课程设计基本练习题目(18分×4) [A组]请从以下1-3题中任意选做一题 1.输出1至100之间每位数的乘积大于每位数的和的数,例如对于数字12,有1*2<1+2,故不输出该数:对于27, ...
- blog test
try my first blog by cnblog. i will record my learn experence in the future.