1.bind、call、apply三者的区别:
  1)bind的返回值是一个函数体,不会被立即调用
  2)call、apply会立即调用,第一个参数都是用来改变this的指向,两者的区别是前者传递参数的时候是一个一个传递,后者是以一个数组的形式传递
  3)bind、call、apply这三个方法都属于函数(Function)的方法
2.bind的封装:
bind的特点:(1)返回一个函数体(2)改变this的指向(3)传递参数
原装的bind方法可以实现:(1)this的改变(2)可以继承自身的原型方法(3)new自身之后this指向构造函数也就是自身(构造函数的this指向实例对象)

Function.prototype.bindTo = function(){
//传递过来的第一个参数,即需要改变的this指向(使用arguments形参副本来接收所有的参数)
var that = arguments[0];
//获取到剩余的参数
//slice方法是将数组进行分割,参数为1是代表从数组的第二项开始分割,一直到数组的最后一项
var arr = Array.prototype.slice.call(arguments).slice(1);
var _this = this;//当前的this指向bindTo这个函数
var fn = function(){
//将当前指向bindTo函数的this进行改变,that表示需要更改的this指向,通过apply方法来改变
//arr为需要传递的其他参数
//this instanceof fn判断的是当前是否被new过,如果new过了,则此时this应该指向构造函数本身(构造函数的this指向实例化对象),而this正好指向当前的bindTo函数;如果没有new过,则此时this应该指向传递过来的参数(实现改变this的指向)
var newThis = this instanceof fn?this:that;
_this.apply(newThis ,arr);
}
//实现继承
fn.prototype = {
constructor:fn,
__proto__:this.prototype
}
return fn;
}

执行:

function Fn(a,b,c){
console.log(this,a,b,c);
}
Fn.prototype = {
show(){}
}
var fn1 = Fn.bindTo(document);//原来的this是指向window的,在使用了bindTo方法后可以将this指向document
var p = new fn1();//new了之后会将this指向Fn(),即构造函数自身(构造函数的this指向实例对象)
console.log(p);//打印p后可以继承show()原型方法

bind的封装的更多相关文章

  1. 使用C++11的function/bind组件封装Thread以及回调函数的使用

    之前在http://www.cnblogs.com/inevermore/p/4008572.html中采用面向对象的方式,封装了Posix的线程,那里采用的是虚函数+继承的方式,用户通过重写Thre ...

  2. 使用C++11封装线程池ThreadPool

    读本文之前,请务必阅读: 使用C++11的function/bind组件封装Thread以及回调函数的使用 Linux组件封装(五)一个生产者消费者问题示例   线程池本质上是一个生产者消费者模型,所 ...

  3. Backbone.js源码分析(珍藏版)

    源码分析珍藏,方便下次阅读! // Backbone.js 0.9.2 // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. // Backbone ...

  4. 玩转Java对象和XML相互转换

    最近在项目中一直出现Java对象和XML之间的相互转换,一开始由于项目很庞大,我又是临时调度过去,导致在按照项目组长的要求进行写代码的同时,总是在这块云里雾里,最近才慢慢开始搞清楚项目中具体的使用缘由 ...

  5. Hadoop中的RPC

    基于hadoop2.6.4,RPC相关的实现位于hadoop-common这个project中hadoop-common-project/hadoop-common/src/main/java的包pa ...

  6. 前端MVC Vue2学习总结(六)——axios与跨域HTTP请求、Lodash工具库

    一.axios Vue更新到2.0之后宣告不再对vue-resource更新,推荐使用axios,axios是一个用于客户端与服务器通信的组件,axios 是一个基于Promise 用于浏览器和 no ...

  7. 精读《React PowerPlug 源码》

    1. 引言 React PowerPlug 是利用 render props 进行更好状态管理的工具库. React 项目中,一般一个文件就是一个类,状态最细粒度就是文件的粒度.然而文件粒度并非状态管 ...

  8. 网上找的Backbone.js

    // Backbone.js 0.9.2 // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. // Backbone may be freely ...

  9. lodash学习资料

    二.Lodash Lodash是一个具有一致接口.模块化.高性能等特性的 JavaScript 工具库.它内部封装了诸多对字符串.数组.对象等常见数据类型的处理函数,其中部分是目前 ECMAScrip ...

随机推荐

  1. keepalived基础原理

    keepalived介绍 设置初衷是为了高可用ipvs 通过脚本可以实现高可用nginx或者haproxy调度器, 基于vrrp协议完成一个固定的IP可以在集群中不同的节点进行流动.为ipvs集群的各 ...

  2. Linux系统启动排错实验集合

    Centos6系统启动流程 1. post  加电自检  检查硬件环境 2. 选择一个硬件类型引导启动           mbr 446字节   grub  stage1 3. 加载boot分区的文 ...

  3. 【BFS宽度优先搜索】

    一.求所有顶点到s顶点的最小步数   //BFS宽度优先搜索 #include<iostream> using namespace std; #include<queue> # ...

  4. tomcat调试之固定步骤自动化

    前端开发,使用tomcat调试,大致需要进行如下几个步骤.其中,第一步,进入项目所在目录敲sbt命令来打包,第二步,拷贝lib文件夹,第四步重启tomcat,反反复复已经让我不胜其烦,那么做个简单的b ...

  5. LSTM输入层、隐含层及输出层参数理解【转载】

    转自:https://blog.csdn.net/yyb19951015/article/details/79740869 //这个博客讲的挺不错的. http://www.newlifeclan.c ...

  6. Adobe Acrobat 9 Pro序列号

    其实只删除c:\Program Files\Common Files\Adobe\Adobe PCD\cache目录下的cache.db文件也是可以的,然后重新打开Adobe ,输入序列号1118-4 ...

  7. TextBox显示提示信息

    属性placeholder可以设置TextBox 提示信息如: <asp:TextBox ID ="txt1" runat ="server"  Tool ...

  8. redhat vim编辑器永久添加行号及搜索

    设置行号: 跳转到home $ cd ~ 编辑.vimrc,没有的话自动创建 $ vim .vimrc 第一行加入: set nu :wq 保存退出,即可 如果想取消设置,同理删除set nu即可 v ...

  9. vue中动态绑定class

    我用的element-ui primary默认是这个颜色,ui设计的是这个颜色所以我们先要重写 .el-button--primary的样式 因为默认是没有勾选的所有事灰色所以下面重写样式为灰色 .e ...

  10. 同一个电脑安装两个jdk版本

    同一个电脑安装两个jdk版本 场景:公司项目使用的jdk为1.,最近不是很忙,学习scala.该系统使用到了jdk1.8的特性,所以I need 俩版本,开整!!! . 准备两个版本的jdk我的两个j ...