这是三个常用的操作函数的方法,在js中函数就是一等公民,所以说掌握这三个方法还是有必要的

call 和 apply,都会绑定函数的上下文(context)并立即执行调用该方法函数,两者区别在于,接受的参数格式不一样。

call 接收的参数形式是: (context,arg1,arg2,ar3....)  // argn 是一个个具体的参数

apply 接收的参数形式是: (context,argArr) // argArr 可以是一个有参数组成的数组或者arguments

bind 会返回绑定调用该方法的函数上下文的新的函数。

1.call的示例

var a = {
name: 'aa',
getName: function(age) {
return this.name + ',' + age;
}
};
var b = {
name: 'bbb'
}; a.getName.call(b,23) // bbb,23

1.用call实现apply

现在的我能想到的办法就是通过eval对参数进行拼接,因为函数底层操作参数的方法没有暴露(可能不知道吧)

代码示例

这里先看下一个eval作用域的事情,经过测试eval方法获取变量也是在划分作用域的,并不是从全局获取,示例:

(function () {
var me = {name: '33'};
console.log(eval('me')); // 33
})();

这样我们就能拿到函数原来的上下文

用call实现apply

// 用个low的办法实现apply

Function.prototype.fakeApply = function (context,arguments) {
// 拼接参数
var arg; // 如果有参数将参数转换成数组
if(arguments){
arg = [].slice.call(arguments,0);
// 将数组拼接成字符串格式 -> arg1,arg2,arg3,...
arg = arg.join(',');
} var excuteStr = 'this.call(context' + (arg ?',' + arg : '' ) + ')'; // this.call(context,2,3,4) console.log(eval('this.call(context' + (arguments ?',' + [].slice.call(arguments,0).join(',') : '' ) + ')'));
// { name: 44 }
// { '0': 2, '1': 3, '2': 4 }
// ok
};
var a = {
name: 'aa',
getName: function() {
console.log(this);
console.log(arguments);
return 'ok';
}
};
a.getName.fakeApply({name:44},[2,3,4]);

为了加深bind理解,下面是用apply实现bind的示例

Function.prototype.fakeBind = function () {
// bind 有可能会传入绑定的参数
var prevFun = this;
var context = arguments[0];
var prevArg = arguments.length > 1 ? [].slice.call(arguments,1) : [] ; return function () {
var curArg = [].concat.apply(prevArg,arguments);
return prevFun.apply(context,curArg);
};
};
var fun1 = function () {
console.log(this);
console.log(arguments);
}; var fun2 = fun1.fakeBind({name: 'aaa'},2,3);
fun2(4,5); // { name: 'aaa' }
// { '0': 2, '1': 3, '2': 4, '3': 5 }

返回了一个新的函数,函数中的prevFun和preArg 是闭包的变量。

call,apply,bind 方法的学习的更多相关文章

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

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

  2. JS 的 call apply bind 方法

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

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

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

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

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

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

    先学习下new操作符吧 new关键字调用函数的心路历程: 1.创建一个新对象 2.将函数的作用域赋给新对象(this就指向这个对象) 3.执行函数中的代码 4.返回这个对象 根据这个的思路,来实现一个 ...

  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. call, apply,bind 方法解析

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

随机推荐

  1. windows服务器安全管理工具——IISCrypto

    官方网站地址:https://www.nartac.com/Products/IISCrypto/ 下载地址:https://www.nartac.com/Products/IISCrypto/Dow ...

  2. Java实现视频转码或压缩demo.

    先点击这里下载资源包(包括jar和文档) 使用这个资源包,处理起来很简单. demo如下: import java.io.File; import it.sauronsoftware.jave.Aud ...

  3. PHP调用Python接口过程中所遇到的问题

    在php调用python脚本时,首先把python相关组件安装完善.用Python命令检测运行脚本而不报错. 在调用接口的过程 1.没有打开的python脚本的权限 解决办法:把python脚本所在的 ...

  4. XE 使用记录

    project的选项是分编译版本的,debug,release,上层还有一个base 通用的设置值,最好放base里,比如Search path里 自己添加的路径,免得2个环境分别添加.

  5. python学习博客地址集合。。。

    python学习博客地址集合...   老师讲课博客目录 http://www.bootcdn.cn/bootstrap/  bootstrap cdn在线地址 http://www.cnblogs. ...

  6. linux 迁移项目ProtocolException

    背景:服务器跟换机房,虚拟机完整迁移项目,只修改ip和主机名 1.检查/etc/hosts 中ip 和主机名映射 2.检查网络端口是否有限制以及端口开放是否全了,检查ip有没有配对.RMI注册不上.

  7. vs问题--------------标记为系统必备组建...

    问题:标记为系统必备组建 要将程序集“D:\project\DMS\DMSGaeaService\TmsApplication\bin\Debug\Jns.Gaea.dll”标记为系统必备组件,必须对 ...

  8. PAT A1103

    PAT A1103 标签(空格分隔): PAT 解题思路: DFS #include <cstdio> #include <vector> using namespace st ...

  9. jmeter之服务器性能监测

    性能测试时,我们的关注点有两部分 1 服务本身:并发 响应时间 QPS 2 服务器的资源使用情况:cpu memory I/O disk等 JMeter的plugins插件可以实现对服务器资源使用情况 ...

  10. c#计算器

    代码没有大的问题,但是起初点击控件无反应,原因是事件代码要自己敲,不能直接粘贴. using System;using System.Collections.Generic;using System. ...