函数的call和apply、bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<script>
// function fn(a,b){
// console.log(a+b);
// }
// 函数名.call()或者函数名.apply()都是执行该函数
// fn.();
// fn.apply();
// fn(4,5);
// fn.call(null,4,5);//带入参数，是从第二位开始到后面按位给参数
// fn.apply(null,[4,5]);//带入参数,第二位是一个数组，参数全部放在数组中
// var arr=[2,4,7,2,1,3,4,5];
// var max=Math.max.apply(null,arr);
// Math.max(2,4,7,2,1,3,4,5);
// var max=Math.max(...arr);
// console.log(max);
function abc(_a,_b){
this.a=_a;
this.b=_b;
this.c=this.a+this.b;
}
// abc(3,6);
// console.log(a,b,c);
// var obj={};
// call 改变函数内部this的指向
// 将abc函数中的this指向call的第一个参数obj
// abc.call(obj,3,6);
// 将abc函数中的this指向apply的第一个参数obj
// abc.apply(obj,[3,6]);
// console.log(obj);
var obj={
a:1,
b:2,
c:function(_a,_b){
this.a+=_a;
this.b+=_b;
return this.a+this.b;
}
}
// var sum=obj.c(3,5);//11
// console.log(sum);
var o={
a:5,
b:10
}
// var sum=obj.c.call(o,3,5);//23
// var sum=obj.c.apply(o,[3,5]);//23
// console.log(sum);
// [1,2,3,4,5,6]
class Arrays{
constructor(){
}
slice(start,end){
// console.log(this);
if(start<0) start=this.length+start;
if(end<0) end=this.length+end;
if(start===undefined) start=0;
if(end===undefined) end=this.length;
var a=[];
for(var i=start;i<end;i++){
a.push(this[i]);
}
return a;
}
}
var arr=new Arrays(1,2,3,4,5);
arr.slice(-3,-1);
var divs=document.getElementsByTagName("div");
arr=[].slice.call(divs);
console.log(arr);
// var obj={
// a:1,
// abc:function(){
// var div=document.querySelector("div");
// div.addEventListener("click",this.clickHandler.call(this));
// // div.addEventListener("click",this.clickHandler);
// },
// clickHandler(e){
// // this.a++;
// // console.log(this.a);
// /* var self=this;
// return function(){
// self.a++;
// console.log(self.a);
// }
// // 疑问？？？？过两天讲解
// */
// }
// }
// obj.abc();
// function abc(_a,_b){
// this.a=_a;
// this.b=_b;
// console.log(this.a+this.b);
// }
// abc(3,6)
// abc.call(null,3,6);
// abc.apply(null,[3,6]);
// var o={};
// abc.call(o,3,6);
// abc.apply(o,[3,6]);
// var fn=abc.bind(o);//abc.bind(o)
// 将o带入到abc中，将this指向变为o，但是不执行这个函数，
// 而是返回一个新函数，这个新函数的this就是o，原来abc函数中this不变
// console.log(fn);
// fn(3,6);
// console.log(o);
var obj={
a:1,
abc:function(){
var div=document.querySelector("div");
console.log(this.a);
div.addEventListener("click",this.clickHandler.bind(this));
},
clickHandler(e){
this.a++;
console.log(this.a);
e.currentTarget.removeEventListener("click",this.clickHandler);
// ?? 为什么不能删除
}
}
obj.abc();
// 当使用call调用对象的函数时,第一个是null,c方法中的this将被指向谁
// var obj1={
// a:1,
// b:2,
// c:function(){
// // this???
// }
// }
// obj1.c.call(null)
// 2、bind绑定的事件如何删除
// 3、如何重构bind方法
</script>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// call apply bind 一般用在使用this的环境下
// 对象的方法中
// 事件函数
// 面向对象class中
// 如果使用call,apply,bind 带入的对象是Null，则this被指向window
// var b=20;
// var obj={
// a:function(){
// this.b++;
// console.log(this.b);
// console.log(this);
// },
// b:10
// }
// obj.a.call(null);
// var b=100;
// var obj={
// a:function(){
// // var arr=[2,3,4,5,6];
// // arr=arr.map(function(item){
// // // 回调函数中this指向window
// // return item+this.b;
// // }.bind(this));
// // // 外面的这层this是obj对象
// // console.log(arr);
// // setTimeout((function(){
// // console.log(this.b);
// // }).call(this),2000);
// // 如果使用call会立即执行里面的函数，并且将this指向obj，会打印10，2秒什么也不执行
// // setTimeout(function(){
// // console.log(this.b);
// // }.bind(this),2000);
// // 2s后打印10，外面的this是obj，被带入到函数中，将函数中this指向外面的this
// // document.self=this;//给侦听对象增加属性用来指向this，在函数中调用对于的self属性就可以
// //使用箭头函数在这里将this已经指向外部this，然后再执行后面的函数
// // document.addEventListener("click",e=>{this.clickHandler(e)});
// // 绑定this就是将事件函数中的this指向obj，当点击时调用
// // this.clickBind=this.clickHandler.bind(this);
// // document.addEventListener("click",this.clickBind);
// },
// clickHandler:function(e){
// // console.log(this.self);
// console.log("aaa");
// // 为什么删除不了事件？
// // 上面的事件侦听的bind和下面的这个删除事件bind返回函数不同
// document.removeEventListener("click",this.clickBind);
// this.clickBind=null;
// },
// b:10
// }
// obj.a();
</script>
</body>
</html>
浙公网安备 33010602011771号