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. 怎样打开U盘最安全

    为了避免电脑使用U盘时,通过双击,或者右击盘符时,导致把病毒感染至整个电脑,因此使用下面的方法,可使U盘病毒不被激活传播. 在取消了U盘自动运行的情况下(在组策略中一定要关闭自动运行功能,否则只要一插 ...

  2. centOS和windows7双系统下重装windows后恢复centOS引导

    电脑原本是windows7和centOS双系统,后来重装windows系统后,发现没有centOS引导,于是重新恢复centOS引导. 1.官网下载centos系统镜像CentOS-7-x86_64- ...

  3. abap method中的异常处理

    1: 抛出异常 2: 处理异常

  4. 利用SparkLauncher 类以JAVA API 编程的方式提交Spark job

    一.环境说明和使用软件的版本说明: hadoop-version:hadoop-2.9.0.tar.gz spark-version:spark-2.2.0-bin-hadoop2.7.tgz jav ...

  5. 【LeetCode每天一题】Multiply Strings(字符串乘法)

    Given two non-negative integers num1 and num2 represented as strings, return the product of num1 and ...

  6. Element-ui的表单中怎么添加正则校验

    1. 以中国大陆手机号验证为例 // 这是组价的代码 <el-form-item prop="mobile"> <el-input type="text ...

  7. 使用openbabel进行小分子底物构象搜索

    使用open babel产生小分子多重构象的方法有两种: 1. 使用遗传算法(Genetic algorithm)进行构象搜索,属于系统式搜索最低能量构象的方法 obabel -L conformer ...

  8. iOS UI基础-10.0 QQ聊天布局之键盘及文本使用

    要实现的效果:   这里只说用到的几个知识点 1.图片包含文字 在设置文字的Frame的时候,使用背景(按钮)的尺寸,文字使用了内边距 背景图片,使用拉伸 /** * 返回一张可以随意拉伸不变形的图片 ...

  9. ida信息获取函数

    idc.    http://www.cnblogs.com/fply/p/8503929.html 获取ida可执行文件路径 GetIdaDirectory() print GetIdaDirect ...

  10. MongoDB--$project和$push的区别

    正文开始前,首先需要表名几条定义: 聚合(aggregate)是基于数据处理的聚合管道,每个文档通过一个由多个阶段(stage)组成的管道,可以对每个阶段的管道进行分组.过滤等功能,然后经过一系列的处 ...