当前位置:首页 > 日记 > 正文

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

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

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节点。

相关文章

stormmedia是什么文件夹

stormmedia是什么文件夹

电脑软件,stormmedia,泓旭的笔记本电脑平时主要用来上网看电影,一天他在偶然间发现D盘里面有个stormmedia文件夹,打开看你们很多文件夹,而且名字很怪,泓旭开始以为是电脑中病毒,使用杀毒软件查杀发现stormmedia文件夹是正常的。但是删除stormmed…

PHP实现根据数组的值进行分组的方

PHP实现根据数组的值进行分组的方

方法,数组,电脑软件,PHP,本文实例讲述了PHP实现根据数组的值进行分组的方法。分享给大家供大家参考,具体如下:PHP根据数组的值分组,php array中没有自带这个函数但是很常用,今天写了出来记录一下。代码:$_array = array( array(1,11,'2016-0…

.NET适配器模式讲解

.NET适配器模式讲解

适配器模式,电脑软件,NET,适配器模式简介:将一个类的接口转换成客户希望的另外一个接口。Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。在计算机编程中,适配器模式(有时候也称包装样式或者包装)将一个类的接口适配成…

如何在一个Word文档文件设置一个立

如何在一个Word文档文件设置一个立

文件,设置,文档,如何在,电脑软件,无需边印,它是打印机本身的功能,称为全振幅印刷。但并非所有的印刷机都有此功能。以下是你的小文件,关于word文件的设置没有边框打印,希望对你有所帮助。 没有边框打印的Word文件设置 1。如果打印机没有这个…

如何使用ps动作的录制和编辑

如何使用ps动作的录制和编辑

如何使用,编辑,动作,电脑软件,ps,在我们介绍使用PS构建动作处理图片的几个例子之前,本章我们将学习我们自己的记录操作,这将是ps动作应用程序中最吸引人的部分之一。结合批量命令,您可以根据您的想法快速编辑数千张图片。 ps动作的录制和编辑…

MySQL启动1067错误并纠正在字符集

MySQL启动1067错误并纠正在字符集

字符集,启动,重新启动,错误,恢复,下载解压的官方网站mysql-5.6.37-winx64.zip版本,修改配置文件,安装服务,直接使用; 中国有一种混乱,解决方法: 在mysql-5.6.37-winx64目录,一个新的my.ini文件创建和配置(内容可以在互联网上找到或手动配置我的默…

PHP5.6新增加的可变函数参数用法分

PHP5.6新增加的可变函数参数用法分

函数参数,电脑软件,本文实例讲述了PHP5.6新增加的可变函数参数用法。分享给大家供大家参考,具体如下:今天无事,看了下PHP手册。发现PHP版本更新增加不少东西。下面就说说其中的PHP5.6更新中新增加的可变函数参数。代码1:function sum(...$numbe…

photoshop动作怎么安装

photoshop动作怎么安装

安装,动作,电脑软件,photoshop,   ps在绘图领域是当之无愧的霸主,它的各种功能简单方便,而photoshop中动作的应用更是给设计带来了方便,网络上提供了各式各样的现成录制的动作,所以学会安装动作是最基本的要领。本文为大家介绍怎么…

电脑版王者荣耀怎么玩?

电脑版王者荣耀怎么玩?

荣耀,王者,电脑软件,TGP是由腾讯推出的一款游戏助手平台,大部分玩家都会使用TGP启动游戏,其实TGP不仅可以玩网络游戏,手游也可以在TGP上玩耍,好多小伙伴都不知道吧,下面小编就给大家详细讲解一下具体的方法,快来看看吧!方法/步骤:1、下载腾讯的游…

LNMPA遇到504 Gateway time-out错

LNMPA遇到504 Gateway time-out错

解决方法,错误,电脑软件,LNMPA,time,Nginx的特点是处理静态很给力,Apache的特点是处理动态很稳定,两者结合起来便是LNMPA,nginx处理前端,apache处理后端,这样处理静态会很快,处理动态会很稳定。当我以为安装完成以后便万事大吉,不料更新网站的时候…

PHP手机号中间四位用星号*代替显示

PHP手机号中间四位用星号*代替显示

显示,星号,四位,手机号,实例,在显示用户列表的场景中,一般用到手机号的显示时都需要对手机号进行处理,一般是把中间的四位换成星号****,我本人用php处理的思路是进行替换,用****替换手机号的中间四位代码如下:$all_lottery_logs = ********; …

excel表格设置渐变色背景的方法exc

excel表格设置渐变色背景的方法exc

设置,渐变色,方法,表格,背景,  Excel中经常需要使用到设置渐变色为背景的技巧,渐变色背景具体该如何进行设置呢?下面是由小编分享的excel表格设置渐变色背景的方法,以供大家阅读和学习。excel表格设置渐变色背景的方法1步骤1:同样全选表格,右…