函数的call
function fn1(a,b) {
console.log(a+b);
}
/*
* 第一个参数设置null
* call 第二个,第三个。。。参数就是函数的参数
* apply 第二个参数是一个数组,将函数内的所有参数放在数组中传入
*
*
* */
fn1.call(null,3,4);
fn1.apply(null,[3,4]);
函数名.call([thisObj[,arg1[, arg2[, [,.argN]]]]])
//thisObj 可选项。将被用作当前对象的对象。 arg1, arg2, , argN 可选项。将被传递方法参数序列。
call 方法可以用来代替另一个对象调用一个方法。
call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作thisObj。
说明白一点其实就是更改对象的内部指针,即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。
function fn2(a,b) {
this.a=a*a;
this.b=b*b;
}
var obj1={};
var obj2={};
var obj3={};
/* fn2(4,5);
console.log(a,b);*/
for(var i=3;i<9;i+=2){
// fn2.call(this["obj"+((i-1)/2)],i,i+1);
fn2.apply(this["obj"+((i-1)/2)],[i,i+1])
}
console.log(obj1,obj2,obj3);
函数执行代理
var obj4={
a:function (num) {
return num+1;
}
};
var obj5={
b:function (num) {
return num-1;
}
};
function fn4(fnName,num) {
var s=this[fnName](num);
console.log(s);
}
fn4.call(obj4,"a",5);
fn4.apply(obj4,["a",5]);
fn4.call(obj5,"b",5);
call和apply时执行函数,将call和apply的第一个参数带入带函数中,替代原函数中this,函数中如果都没有this,这种替代就变得毫无意义。
混入对象代替函数内的this。
如果call和apply的第一个参数是null,原函数中this表示仍然是原来的this,不是null。
一旦参数是多个,我们通常使用参数作为数组使用,这时候使用apply。
call和apply是执行函数,将call和apply的第一个参数带入到函数中 替代原函数中this,函数中如果没有this,这种替代就变成无意义的内容 混入对象替代函数内的this。 如果call和apply的第一个参数是null,原函数中this表示仍然是原来的this,不是null 一旦参数是多个,我们通常使用参数作为数组使用,这时候使用apply 静态方法一般可以直接使用apply和call来调用执行 但是动态方法必须使用原型方法调用call和apply;
动态方式无法调用,静态方式可以使用apply
var arr1=[4,5,6,7];
// arr.push.apply(null,arr1);
Array.prototype.push.apply(arr,arr1);//是apply大多数处理数组,并方法参数是多个元素
console.log(arr);
静态方法直接调用
var Method=(function () {
return {
a:function (num1,num2) {
if(num1>num2){
return{max:num1,min:num2};
}else if(num2>num1){
return {max:num2,min:num1};
}
return {max:null,min:null};
},
b:function () {
return {max:Math.max.apply(null,arguments),min:Math.min.apply(null,arguments)}
}
}
})();
// Method.a.apply(null,[3,5])
var obj=Method.b.apply(null,arr);
console.log(obj);
bind(绑定)
fn2.call(obj2,3,4);
都不相等
console.log(clickHandler.bind(obj6)===clickHandler.bind(obj6));//false
console.log(clickHandler.bind(obj6)===clickHandler);//false
点击一次就删除事件
var obj6={};
var handler=clickHandler.bind(obj6);
document.addEventListener("click",handler);
function clickHandler(e) {
this.x=e.x;
this.y=e.y;
console.log(obj6);
document.removeEventListener("click",handler);
}
函数中apply
语法:apply([thisObj[,argArray]])
定义:应用某一对象的一个方法,用另一个对象替换当前对象。
如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。
其实apply和call基本相似,这里传参的模式产生变化而已,在call中传参使用了逐个传入,apply中是以数组传参带入。
简单实例:
class Menu{
constructor(parent){
this.view=this.createView(parent);
}
createView(parent){
if(this.view) return this.view;
let div=document.createElement("div");
Object.assign(div.style,{
width:"50px",
height:"50px",
backgroundColor:"red",
position:"absolute"
});
let bn=document.createElement("button");
bn.textContent="按钮";
div.appendChild(bn);
this.clickHandlerBind=this.clickHandler.bind(this);
bn.addEventListener("click",this.clickHandlerBind);
parent.appendChild(div);
return div;
}
clickHandler(e){
this.move();
}
move(){
if(!this.view) return;
Object.assign(this.view.style,{
left:this.view.offsetLeft+2+"px",
backgroundColor:Menu.randomColor()
})
}
static randomColor(){
let col="#";
for(let i=0;i<6;i++){
col+=Math.floor(Math.random()*16).toString(16);
}
return col;
}
}
let menu=new Menu(document.body)