call,apply,bind 方法的学习
这是三个常用的操作函数的方法,在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 方法的学习的更多相关文章
- JavaScript内置一些方法的实现原理--new关键字,call/apply/bind方法--前戏
new关键字,call/apply/bind方法都和this的绑定有关,在学习之前,首先要理解this. 一起来学习一下this吧 首先.this是一个对象. 对象很好理解,引用类型值,可以实现如th ...
- JS 的 call apply bind 方法
js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context) call call([thisObj[,arg1[, arg2[, [,.argN]]]] ...
- JavaScript中call,apply,bind方法的区别
call,apply,bind方法一般用来指定this的环境. var a = { user:"hahaha", fn:function(){ console.log(this.u ...
- javascript中的call(),apply(),bind()方法的区别
之前一直迷惑,记不住call(),apply(),bind()的区别.不知道如何使用,一直处于懵懂的状态.直到有一天面试被问到了这三个方法的区别,所以觉得很有必要总结一下. 如果有不全面的地方,后续再 ...
- JavaScript内置一些方法的实现原理--new关键字,call/apply/bind方法--实现
先学习下new操作符吧 new关键字调用函数的心路历程: 1.创建一个新对象 2.将函数的作用域赋给新对象(this就指向这个对象) 3.执行函数中的代码 4.返回这个对象 根据这个的思路,来实现一个 ...
- JavaScript中call,apply,bind方法的总结。
why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...
- call,apply,bind方法的总结
why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...
- JavaScript中call,apply,bind方法的总结
原文链接:http://www.cnblogs.com/pssp/p/5215621.html why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之 ...
- call, apply,bind 方法解析
call(), apply(),bind() 三者皆为Function的方法 call(),apply()的作用是调用方法,并改变函数运行时的context(作用上下文) bind() 的作用是引用方 ...
随机推荐
- ASP.NET MVC Display Mode 移动端视图 配置对微信内置浏览器的识别
最近在捣鼓一个稍微有点low的商城网站,没有计划做app却要求有个wap版,而前端又没有做成响应式,时间WTF,直接利用了asp.net mvc的Display Mode Provider. 使用方式 ...
- 非root安装fastDFS及启动
引用https://www.cnblogs.com/zzw-zyba/p/10155781.html 非root安装部分 1.解包 [bdc@svr001 setup]$ tar -xvf lib ...
- 文件属性和ls -lhi
第1章 无法上网及拍错过程 远程连接拍错过程 1. 查看路是否通畅 2. 是否有拦击 iptables(防火墙) selinux 3. 查看是否有条件 ...
- SQL循环表里的数据
select * into #t1 from Userinfodeclare @id varchar(2000);while (exists(select ProjectID from #t1))be ...
- mybatis源码解析之Configuration加载(一)
概要 上一篇,我们主要搭建了一个简单的环境,这边我们主要来分析下mybatis是如何来加载它的配置文件Configuration.xml的. 分析 public class App { public ...
- Python随笔--代理ip
- 【转】QT 添加外部库文件
转自:Qt 添加外部库文件 LIBS += D:\Code\Opengltest\OpenGL32.Lib D:\Code\Opengltest\GlU32.Lib # 直接加绝对路径 LIBS += ...
- CDN原理介绍(转)
内容分发网络(Content delivery network或Content distribution network,缩写:CDN)是指一种通过互联网互相连接的电脑网络系统,利用最靠近每位用户的服 ...
- Java抽象类总结规定
1. 抽象类不能被实例化(初学者很容易犯的错),如果被实例化,就会报错,编译无法通过.只有抽象类的非抽象子类可以创建对象. 2. 抽象类中不一定包含抽象方法,但是有抽象方法的类必定是抽象类. 3. 抽 ...
- 汉诺塔I
题目描述 对于传统的汉诺塔游戏我们做一个拓展,我们有从大到小放置的n个圆盘,开始时所有圆盘都放在左边的柱子上,按照汉诺塔游戏的要求我们要把所有的圆盘都移到右边的柱子上,请实现一个函数打印最优移动轨迹. ...