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() 的作用是引用方 ...
随机推荐
- Python之AJAX
AJAX <script> $("#i4").on("click", function () { var i1 = $("#i1" ...
- django数据库的表已迁移的不能重新迁移的解决办法
django.db.utils.InternalError: (1050, "Table 'tb_content' already exists") mysql数据库在迁移时数据库 ...
- lnamp环境搭建博客、论坛
实验环境:Centos6.5 源码安装Nginx yum安装Apache.php.Mysql Mysql: yum -y install mysql-server 安装Mysql数据库 /etc/i ...
- tensorflow 经典教程及案例
导语:本文是TensorFlow实现流行机器学习算法的教程汇集,目标是让读者可以轻松通过清晰简明的案例深入了解 TensorFlow.这些案例适合那些想要实现一些 TensorFlow 案例的初学者. ...
- Android Touch事件相关源码【Android SourceCode 2.3.6】
2018-05-31 17:23:46 Note: 这里的源码来自Android 2.3.6,这个版本的代码比较简单,适合理解Touch事件的传递原理.后续版本源码复杂了很多,但是原理都是类似的. 2 ...
- Oracle 使用序列实现自增列 及重置序列
序列是oracle用来生产一组等间隔的数值.序列是递增,而且连续的.oracle主键没有自增类型,所以一般使用序列产生的值作为某张表的主键,实现主键自增.序列的编号不是在插入记录的时候自动生成的,必须 ...
- 工作VUE布局记录
以这个页面为例子 这个是你的布局有多少行,这个页面有两行,这里是2 这里span是占用多少格(一共24格)offset左右偏移,这个基本上用不到row是表示这个控件在第几行,如果是在第 ...
- python 使用selenium模块实现自动搜索百度百科词条(模拟人工搜索)
目标:模拟人工搜索百度百科词条,爬取相关信息,自动删除上一个关键词,输入新关键词,继续搜索,直到循环结束. 代码: from selenium import webdriver from seleni ...
- 数据库更新记录时,记录不存在则创建的sql语句
INSERT INTO 表名 (字段1(主键),字段2,字段3) values (#{value1},#{value2},#{value3}) ON DUPLICATE KEY UPDATE 字段2= ...
- js中的一些简单问题
1.JavaScript的组成: ECMAScript标准--基本的语法和对象 DOM:Document Object Model 文档对象模型 BOM:Broswer Object Model 浏览 ...