浅谈JavaScript中的apply/call/bind和this的使用


Posted in Javascript onFebruary 26, 2017

fun.apply(context,[argsArray])

立即调用fun,同时将fun函数原来的this指向传入的新context对象,实现同一个方法在不同对象上重复使用。

context:传入的对象,替代fun函数原来的this;

argsArray:一个数组或者类数组对象,其中的数组参数会被展开作为单独的实参传给 fun 函数,需要注意参数的顺序。

fun.call(context,[arg1],[arg2],[…])

同apply,只是参数列表不同,call的参数需要分开一个一个传入。如果不知道参数个数,则使用apply。

使用:

Math.max()    //只接收单独的参数,通过下面的方法可以在数组上面使用max方法:
Math.max.apply(null, array);    //会将array数组参数展开成单独的参数再传入
Array.prototype.push.apply(arr1,arr2);    //将一个数组拆开push到另一个数组中;不用apply则会将后续数组参数当成一个元素push进去。
Array.prototype.slice.call(arguments);    //在类素组对象上使用slice方法

function isArray(obj){
  return Object.prototype.toString.call(obj) === '[object Array]' ;
}  //验证是否是数组

fun.bind(context,[arg1],[arg2],[…])

使fun方法执行的context永不变。

arg1:要传递到新函数的参数列表

返回一个函数供后续调用,其函数体和原函数fun一样,但新函数的this指向新传入的context对象。新函数会具有bind方法指定的初始参数arg1/arg2...,后续调用新函数时的实参要往已有参数的后面排。

//原来的函数有4个参数
var displayArgs = function (val1, val2, val3, val4) {
  console.log(val1 + " " + val2 + " " + val3 + " " + val4);
}
var emptyObject = {};
// 生成新函数时bind方法指定了2个参数,则新函数会带着这个两个实参
var displayArgs2 = displayArgs.bind(emptyObject, 12, "a");
// 调用时传入另2个参数,要在bind方法传入的2个实参后面
displayArgs2("b", "c");
// Output: 12 a b c

事件处理函数中使用bind:

var obj = {
  arg1 : 1,
  attach: function(){
    //var self = this; 普通传入this 的方法
    $('xxx').on('click',function (event) {
      console.log(this.arg1);//若不绑定this,回调函数中的this常指目标元素
     }.bind(this));  //使用bind方法绑定this
  }
}

使用bind()方法改写slice()方法:

var _Slice = Array.prototype.slice;
var slice = Function.prototype.call.bind(_Slice);
slice(…);

bind()兼容Ie5~ie8处理

if (!Function.prototype.bind) {
  Function.prototype.bind = function(context) {
    var self = this, // 调用bind方法的目标函数
    args = arguments;
    return function() {
      self.apply(context, Array.prototype.slice.call(args, 1));//参数个数不确定时用apply
    }
  }
}

一般情况下setTimeout()的this指向window或global对象。当使用类的方法时需要this指向类实例,就可以使用bind()将this绑定到调用对象,而不用传入self方式传入this。

this

this对象是在函数运行时基于函数的执行环境绑定的:在全局函数中,this等于window,而当函数被当作某个对象的方法调用时,this等于那个对象。

判断方法:this和定义在哪儿无关,函数运行时,如果有. 运算符,this指.前的对象;如果没有,this指window。若new关键字调用时,指代新对象。有apply/call/bind时,指代第一个参数。

/*例1*/
function foo() {
  console.log( this.a );
} 
var obj2 = {
  a: 42,
  foo: foo
};
var obj1 = {
  a: 2,
  obj2: obj2
};
obj1.obj2.foo(); // 42;当foo函数被调用时,其本身是归obj2所拥有
/*例2*/
function foo() {
  console.log( this.a );
} 
var obj = {
  a: 2,
  foo: foo
};
var bar = obj.foo;   // bar引用foo函数本身
var a = "global";   // 全局对象的属性
bar();        // "global" ;

在一个HTML DOM事件处理程序里面,this始终指向这个处理程序被所绑定到的DOM节点。

Javascript 相关文章推荐
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
一个简单不报错的summernote 图片上传案例
Jul 11 Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 Javascript
全面解析vue中的数据双向绑定
May 10 Javascript
js实现省市级联效果分享
Aug 10 Javascript
详解升级react-router 4 踩坑指南
Aug 14 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
Jun 27 Javascript
详解jenkins自动化部署vue
May 14 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 Javascript
JavaScript中Promise的使用详解
Feb 26 #Javascript
setTimeout函数的神奇使用
Feb 26 #Javascript
node.js入门学习之url模块
Feb 25 #Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 #Javascript
从零学习node.js之express入门(六)
Feb 25 #Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 #Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 #Javascript
You might like
中国第一家无线电行
2021/03/01 无线电
过滤掉PHP数组中的重复值的实现代码
2011/07/17 PHP
php使用session二维数组实例
2014/11/06 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
基于python实现百度翻译功能
2019/05/09 Python
Python 实现向word(docx)中输出
2020/02/13 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
简述安装Slackware Linux系统的过程
2012/01/12 面试题
岗位职责范本
2013/11/23 职场文书
四川成都导游欢迎词
2014/01/18 职场文书
保密工作责任书
2014/04/16 职场文书
建筑工地大门标语
2014/06/18 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
交通处罚决定书
2015/06/24 职场文书
小学班主任工作随笔
2015/08/15 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript
python字符串常规操作大全
2021/05/02 Python
css3 文字断裂效果
2022/04/22 HTML / CSS