// 模拟实现call方法
Function.prototype.call2 = function (context) {
var context = context || window;
context.fn = this; var args = [];
for(var i = 1, len = arguments.length; i < len; i++) {
args.push('arguments[' + i + ']');
} var result = eval('context.fn(' + args +')'); delete context.fn
return result;
} // 测试一下
var value = 2; var obj = {
value: 1
} function bar(name, age) {
console.log(this.value);
return {
value: this.value,
name: name,
age: age
}
} bar.call(null); // 2 console.log(bar.call2(obj, 'kevin', 18));
// 模拟实现apply方法
Function.prototype.apply = function (context, arr) {
var context = Object(context) || window;
context.fn = this; var result;
if (!arr) {
result = context.fn();
}
else {
var args = [];
for (var i = 0, len = arr.length; i < len; i++) {
args.push('arr[' + i + ']');
}
result = eval('context.fn(' + args + ')')
} delete context.fn
return result;
}
// 模拟实现Bind方法
Function.prototype.bind = function (oThis) {
var aArgs = Array.prototype.slice.call(arguments, 1);
var fToBind = this;
var fNOP = function () {};
var fBound = function () {
fBound.prototype = this instanceof fNOP ? new fNOP() : fBound.prototype;
return fToBind.apply(this instanceof fNOP ? this : oThis || this, aArgs )
}
if( this.prototype ) {
fNOP.prototype = this.prototype;
}
return fBound;
}

三者的区别:

  • 三者都是用来改变函数的this指向
  • 三者的第一个参数都是this指向的对象
  • bind是返回一个绑定函数可稍后执行,call、apply是立即调用
  • 三者都可以给定参数传递
  • call给定参数需要将参数全部列出,apply给定参数数组

模拟实现call,apply,bind方法,以及三者区别的更多相关文章

  1. JS 的 call apply bind 方法

    js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context) call call([thisObj[,arg1[, arg2[,   [,.argN]]]] ...

  2. JavaScript中call,apply,bind方法的区别

    call,apply,bind方法一般用来指定this的环境. var a = { user:"hahaha", fn:function(){ console.log(this.u ...

  3. JavaScript内置一些方法的实现原理--new关键字,call/apply/bind方法--前戏

    new关键字,call/apply/bind方法都和this的绑定有关,在学习之前,首先要理解this. 一起来学习一下this吧 首先.this是一个对象. 对象很好理解,引用类型值,可以实现如th ...

  4. call, apply,bind 方法解析

    call(), apply(),bind() 三者皆为Function的方法 call(),apply()的作用是调用方法,并改变函数运行时的context(作用上下文) bind() 的作用是引用方 ...

  5. 使用call、apply、bind继承及三者区别

    js里的继承方法有很多,比如:使用原型链的组合继承.es6的Class.寄生继承以及使用call.apply.bind继承.再说继承之前,我们先简单了解下它们的区别. 一.区别: 同:三者都是改变函数 ...

  6. JavaScript中call,apply,bind方法的总结。

    why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...

  7. call,apply,bind方法的总结

    why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...

  8. JavaScript中call,apply,bind方法的总结

    原文链接:http://www.cnblogs.com/pssp/p/5215621.html why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之 ...

  9. JS中call,apply,bind方法的总结

    why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user: "小马扎", fn: ...

  10. javascript中的call(),apply(),bind()方法的区别

    之前一直迷惑,记不住call(),apply(),bind()的区别.不知道如何使用,一直处于懵懂的状态.直到有一天面试被问到了这三个方法的区别,所以觉得很有必要总结一下. 如果有不全面的地方,后续再 ...

随机推荐

  1. watch监听中的deep以及immdiate

    1 deep:深度监听 使用场景:如果是监听的是对象类型,当手动修改对象的某个属性时,发现是无效的,此时需要给监听器添加deep:true. 例如: data:{ obj:{ a:1 } }, wat ...

  2. django日志集成输出器

    在配置文件中 import os # ⽇志 LOGGING = { 'version': 1, # 自定义一个简单版本 'disable_existing_loggers': False, # 是否禁 ...

  3. RepVGG:一个结构重参数化网络

    ​  本文来自公众号"AI大道理" ResNet.DenseNet 等复杂的多分支网络可以增强模型的表征能力,使得训练效果更好.但是多分支的结构在推理的时候效率严重不足. 看起来二 ...

  4. STM32F0 LL库IIC第二地址配置错误

    最近在做F0项目要用到多个IIC地址,使用Cube生成的LL库,第二地址进不了中断 F0版本:1.11.0 STM32CubeX生成的LL库代码为: 1 static void MX_I2C1_Ini ...

  5. 国际版Office365客户端配置

    Email Provider IMAP Settings POP Settings SMTP Settings Microsoft 365 Outlook Hotmail Live.com Serve ...

  6. perl正则

    名字 表达式 如果子表达式成功则 - positive lookahead (零宽度正预测先行断言 ) (?=subexp) 如果匹配到右边则成功 negative lookahead (零宽度负预测 ...

  7. re的finditer()

    在前面学习了findall()函数,它可以一次性找到多个匹配的字符串,但是不能提供所在的位置,并且是一起返回的,如果有数万个一起返回来,就不太好处理了,因此要使用finditer()函数来实现每次只返 ...

  8. java的知识点

    java 知识点 1.包装类自带有parse方法 Integer i = 315; int i1 = Integer.parseInt("315"); System.out.pri ...

  9. Java 8 stream 做大于几的统计

    Map<String, Integer> marketplaceIdCountMap = amazonTemplateService .getAmazonTemplateList(quer ...

  10. VEU开发之element-ui中关闭dialog时并销毁

    el-dialog正常使用过程中,经常会发现一些问题,就是dialog加载的组件,每次打开都会有上次的内容,其实是加载到节点未被删除,只是反复隐藏/显示. <el-button type=&qu ...