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的实现的更多相关文章

  1. JS bind()方法、JS原生实现bind()

    一.arguments的含义 // arguments 是一个对应于传递给函数的参数的类数组对象 function a(){ console.log(arguments); } a(); // Arg ...

  2. js bind

    1.作用 函数的bind方法用于将函数体内的this绑定到某个对象,然后返回一个新函数. //bind 相比于call apply   this 都等于 obj;   bind是产生一个新的函数 不执 ...

  3. js bind绑定事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Js/Bind()的认识

    1.bind( eventType [, eventData], handler(eventObject))2.向绑定的对象上面提供一些事件方法的行为.其中三个参数的意义分别代表: 一.eventTy ...

  5. js bind 绑定this指向

    1.示例代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UT ...

  6. js bind es5函数柯里化

    绑定函数 bind()最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的this值.常见的错误就像上面的例子一样,将方法从对象中拿出来,然后调用,并且希望this指向原来的对象. 如果不做特 ...

  7. bind,call,apply区别

     js中bind.call.apply函数的用法 2015-02-27 21:16:39 标签:javascript js bind call apply 原创作品,允许转载,转载时请务必以超链接形式 ...

  8. Atitti.数据操作crud js sdk dataServiceV3设计说明

    Atitti.数据操作crud js sdk dataServiceV3设计说明 1. 增加数据1 1.1. 参数哦说明1 2. 查询数据1 2.1. 参数说明2 3. 更新数据2 3.1. 参数说明 ...

  9. javascript深入理解js闭包(转)

    javascript深入理解js闭包 转载  2010-07-03   作者:    我要评论 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. ...

随机推荐

  1. 2017年9月22日 关于JS数组

    JS数组 JS数组的定义方法 var arr = []; var arr = new Array() JS数组属性 长度 arr.length 遍历数组 索引值:从0开始数 第一种方法 for(var ...

  2. 2018-12-20 第二章Java 预习作业

    一.什么是变量?如何使用变量? 答:变量是在程序运行中其值可以改变的量,它是Java程序的一个基本存储单元. 变量的语法格式如下: [访问修饰符]变量类型 变量名[=初始值]: 二.java中基本数据 ...

  3. css 盒模型 文档流 几种清除浮动的方法

    盒模型 1.box-sizing: content-box 是普通的默认的一种盒子表现模式 盒子大小为 width + padding + border   content-box:此值为其默认值,其 ...

  4. scss-&父选择器标识符

    在使用选择器嵌套的时候有一种情况需要特别注意,先看一段scss代码实例: .text a { color: blue; :hover { color: red } } 也许写此段代码目的是为了将其编译 ...

  5. 微信小程序问题总结

    1.navigator不能跳转到tabBar所包含的页面 例如: tabbar包含center页面,不包含page1页面,使用如下跳转: <navigator url='../center/ce ...

  6. Homebrew 的使用

    安装 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/ins ...

  7. 如何angular过滤器进行排序???

    首先定义一个json文件: 然后写HTML文件: <div id="box"> <!--第一个下拉框--> <select ng-model=&quo ...

  8. asp.net后台获取html控件的值

    1.asp.net后台获取前台type=text控件的值 前台:<input name="txtName" class="username" type=& ...

  9. VC++上机实习

    I.课程设计基本练习题目(18分×4) [A组]请从以下1-3题中任意选做一题 1.输出1至100之间每位数的乘积大于每位数的和的数,例如对于数字12,有1*2<1+2,故不输出该数:对于27, ...

  10. blog test

    try my first blog by cnblog. i will record my learn experence in the future.