bind:bind绑定完this的指向后会返回一个新的函数体,不会被立即调用
 
call&apply:绑定完this的指向后会立即调用
 
call与apply的区别:
    call:第一个参数是this的指向,第二个以及后面的所有参数需要一个个进行传递
 
    apply:第一个参数是this的指向,第二个参数是一个数组

不传参的方法:
Function.prototype.bind2 = function (context) {
var self = this;
return function () {
return self.call(context);
} }
传参的方法:
Function.prototype.myBind = function (objCtx) {
if (typeof this !== 'function') {
throw new TypeError('Error');
}
let ctx = objCtx || window;
let _this = this;
let args = [...arguments].slice(1); let Fbind = function () {
let self = this instanceof Fbind ? this : ctx;
return _this.apply(self, args.concat(...arguments));
// 这里可以使用 call 方法
// let bindArgs = args.concat(...arguments);
// return _this.call(self, ...bindArgs);
} let f = function () {};
f.prototype = this.prototype;
Fbind.prototype = new f(); return Fbind;
}
 

以上就是 call 的思路,apply 的实现也类似

不传参的方法:
Function.prototype.bind2 = function (context) {
var self = this;
return function () {
return self.apply(context);
} }
传参的方法:
Function.prototype.myBind = function (objCtx) {
if (typeof this !== 'function') {
throw new TypeError('Error');
}
let ctx = objCtx || window;
let _this = this;
let args = [...arguments].slice(1); let Fbind = function () {
let self = this instanceof Fbind ? this : ctx;
return _this.apply(self, args.concat(...arguments));
// 这里可以使用 call 方法
// let bindArgs = args.concat(...arguments);
// return _this.apply(self, ...bindArgs);
} let f = function () {};
f.prototype = this.prototype;
Fbind.prototype = new f(); return Fbind;
}
 

bind 和其他两个方法作用也是一致的,只是该方法会返回一个函数。并且我们可以通过 bind 实现柯里化。

同样的,也来模拟实现下 bind

Function.prototype.myBind = function (context) {
if (typeof this !== 'function') {
throw new TypeError('Error')
}
var _this = this
var args = [...arguments].slice(1)
// 返回一个函数
return function F() {
// 因为返回了一个函数,我们可以 new F(),所以需要判断
if (this instanceof F) {
return new _this(...args, ...arguments)
}
return _this.apply(context, args.concat(...arguments))
}
}
如何准确的判断一个对象是一个什么类型的?
1、typeof  

2、instanceof    var a=[1,2];console.log(a instanceof Array)  //true
3、Object.prototype.toString.call()    var arr = [10,20,03,04];
var fn = function(){}
var img = new Image() var d = new Date()
console.log(arr.toString()) console.log(Object.prototype.toString.call(d))
 

call、apply、bind的区别,模拟call、apply和bind的实现的更多相关文章

  1. 改变this指针的apply,call,bind的区别

    apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. Jav ...

  2. javascript中apply、call和bind的区别

    在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢.在说区别之前还是先总结一下三者的相似之处:1.都是用来改变函数的this对象的指向的.2.第一个参数都是this要指向的对 ...

  3. javascript中apply、call和bind的区别,容量理解,值得转!

    a)  javascript中apply.call和bind的区别:http://www.cnblogs.com/cosiray/p/4512969.html b)  深入浅出 妙用Javascrip ...

  4. apply,call,bind的区别

    apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. Jav ...

  5. JS 中的this指向问题和call、apply、bind的区别

    this的指向问题 一般情况下this对象指向调用函数的对象,全局环境中执行函数this对象指向window. function a(){ console.log(this); //输出函数a中的th ...

  6. javascript中apply、call和bind的区别及方法详解

    文章目录   apply.call apply.call 区别 apply.call实例 数组之间追加 获取数组中的最大值和最小值 验证是否是数组(前提是toString()方法没有被重写过) 类(伪 ...

  7. apply,all,bind的区别

    这三个都是用来改变this指向的 call() 和apply()的第一个参数相同,就是指定的对象.这个对象就是该函数的执行上下文.call()和apply()的区别就在于,两者接收的参数不一样.cal ...

  8. call(),apply()和bind()的区别

    javascript中的每一个Function对象都有一个apply()和一个call()方法,它们的语法分别是: /*apply()方法*/ function.apply(thisObj[, arg ...

  9. js中call、apply和bind的区别

    在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢.在说区别之前还是先总结一下三者的相似之处:1.都是用来改变函数的this对象的指向的.2.第一个参数都是this要指向的对 ...

  10. call apply bind 的区别

    1.call和apply都是对函数的直接调用,而bind方法返回的仍然是一个函数,因此后面还需要()来进行调用才可以 var xw={ name: "小王", gender: &q ...

随机推荐

  1. 实训作业5(lang、util)

    实验内容和原理: 1.将布尔型.整型.长整型.双精度型作为参数,实例化相应的包装类对象,并输出对象的数值. package 包装; public class integer { public stat ...

  2. 使用 DML 自定义调试器输出

    调试器标记语言 (DML) 提供了一种机制增强来自调试器和扩展的输出. 与 HTML 类似,调试器的标记支持允许将输出包括显示指令和额外非显示的标记窗体中的信息. 调试器用户界面,WinDbg 等中分 ...

  3. walk

    一个go做gui的包, 可以配置程序图标 编译运行需要...fest文件 rsrc

  4. Centos 7 更换为 阿里云 yum 源

    地址: https://opsx.alibaba.com/ 操作步骤: 1.备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentO ...

  5. mysql 字段拼接

    mysql> select concat(name,"**",id) as test from test; +----------------+ | test | +---- ...

  6. EasyEarth三维可视化解决方案——智慧林业

    智慧林业 智能巡管监护 护林员信息查询 护林员管护范围查询 护林员报警.采集数据查看 样点.样线管理 其它功能模块 ●一键考勤打卡 ●面积测量 ●任务公告发布 ●实时电量监控 ●一键报警功能 ●北斗短 ...

  7. 网站性能测试工具 webbench 的安装和使用-linux

    1.webbench的下载和安装 wget http://home.tiscali.cz/~cz210552/distfiles/webbench-1.5.tar.gz sudo tar xvf we ...

  8. IDEA实现SpringBoot热部署

    1.pom.xml添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifac ...

  9. 《恶魔人crybaby》豆瓣短评爬取

    作业要求来源:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/3159 爬虫综合大作业 选择一个热点或者你感兴趣的主题. 选择爬取的对象 ...

  10. LOL佐伊官方手办

      花199元在某宝上买的官方正版佐伊手办终于到了,话不多说直接上图!   虽然脸有点不切实际的大,但还是很可爱~