js中三个默认方法call,applay,bind
Posted web-wjg
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js中三个默认方法call,applay,bind相关的知识,希望对你有一定的参考价值。
这三个都是函数自带的方法(Function.prototype),这三个方法都能够改变函数内部 this的指向,
call
//call方法接收三个参数,第一个是this指向,第二个,三个是传递给函数的实参,可以是数字,字符串,数组等类型的数据类型都可以 function fn(n1,n2){ console.log(this); console.log(n1,n2) } fn.call();//=>this:window; let obj = {fn:fn}; fn.call(obj);//=>this:obj;n1,n2:undefined fn.call(1,2);//=>this: 1;n1=2,n2=undefined; fn.call(obj,1,2);//=>this: obj;n1=1,n2=2; //Call方法的几个特殊属性 //非严格模式下 fn.call(undefined);//this=>window fn.call(null);//this=>window //严格模式下 "use strict" fn.call(undefined);//this=>undefined fn.call(null);//this=>null
apply
//apply方法的使用和call方法基本相同,唯一的区别是,apply方法传参要求是数组类型的,数组内可以任意形式的数据 function fn (n1,n2){ console.log(this); console.log(n1,n2) console.log(arguments) } let obj = {fn:fn};
fn.applay(abj,[1,2]);
fn.applay(abj,1,2);//报错
fn.applay(abj,[11,‘apply‘,{a:123}]);//注意第二个参数必须是数组,否则会报错
bind
//bind和call方法调用形式类似,但是原理完全不同 fn.call(obj,10,20);//=>fn先执行,将fn内的this指向obj,并且把参数10,20传递给fn fn.bind(obj,10,20)//bind是先将fn中的this指向obj,并且将参数10,20预先传递给fn,但是此时的fn并没有被执行,只有fn执行时this指向和传递参数才有作用 fn.bind(obj,10,20);//=>不会有任何输出 fn.bind(obj,10,20)();//=>调用后才会有输出 //=>需求:点击box这个盒子的时候,需要执行fn,并且让fn中的this指向obj oBox.onclick=fn; //=>点击的时候执行了fn,但此时fn中的this是oBox oBox.onclick=fn.call(opp); //=>绑定事件的时候就已经把fn立即执行了(call本身就是立即执行函数),然后把fn执行的返回值绑定给事件 oBox.onclick=fn.bind(opp); //=>fn.bind(opp):fn调取Function.prototype上的bind方法,执行这个/* * function(){ * fn.call(opp); * } */ oBox.onclick=function(){ //=>this:oBox fn.call(opp); }
以上是关于js中三个默认方法call,applay,bind的主要内容,如果未能解决你的问题,请参考以下文章