函数11（call、apply、bind）
2020-04-26 本文已影响0人
小雪洁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>call()</title>
</head>
<body>
</body>
<script>
//之前讲到的this指向当前对象、或指向window，如何改变this的指向
//先以构造函数为例
function User(name){
//1、this在一开始没创建对象的时候是空的
this.name=name;
//console.log(this);//
}
//2、使用new实例化后，就会创建一个对象，在User()里面的this指向这个对象
let user=new User();//User {},this指向User,是个空的
console.log(user);//User {name: undefined}
//3、this是可以改变的，new之前可以让this不指向空，指向一个默认对象
let hdcms={url:"houdunren.com"};
//使用User.call()改变构造函数里this的指向
User.call(hdcms,'hxj');
let user1=new User();
console.log(user1);//User {name: undefined}
console.log(hdcms);//{url: "houdunren.com", name: "hxj"}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>call与apply异同点</title>
</head>
<body>
<button>hxj</button>
<button>ydc</button>
</body>
<script>
let hxj={
name:'haoxuejie'
};
let ydc={
name:'yangdingchuan'
};
let hwx={
name:'haoweixv'
};
function User(age=20,address="河北"){
console.log(this.name+age+address);
}
//使用call和apply共同点：
//第一个参数都是改变User里this的指向,
//而且使用call和apply都可以使函数立即执行
User.call(hxj);//haoxuejie
User.call(ydc);//yangdingchuan
User.apply(hwx);//haoweixv
//call和apply的区别是两者的传参方式不同，
//call传参就是直接逗号连接，
User.call(hxj,'30','衡水');
//apply传参是传数组
User.apply(ydc,['28','平遥']);
//利用call或apply写一个按钮点击事件
let btns=document.querySelectorAll("button");
[...btns].forEach(function(btn){
btn.addEventListener('click',function(e){
//如果只是传一个改变this指向的参数，call()和apply()两者没有区别
//show.call(e.target);
show.apply(e.target);
});
});
function show(){
alert(this.innerHTML);
}
//以下一个例子看看apply和call的区别，
let arr=[1,2,34,5];
//NaN，Math.max()方法里的参数是多个数字，而不是数组，直接传数组是不行的
console.log(Math.max(arr));
//使用展开语法展开传参
console.log(Math.max(...arr));//34
//或者使用 apply()，因为apply第二个参数是将所有参数以数组形式穿进去，
//这个时候再用call()就不行了，因为call除了第一参数是改变this之外，后面的参数传参形式是一个一个的传
console.log(Math.min.apply(Math,arr));//1
console.log(Math.min.call(Math,arr));//NaN
//以上可见展开语法很好用
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>call和apply实现构造函数方法继承</title>
</head>
<body>
</body>
<script>
/*
function Article(){
this.url="article/lists";
this.get=function(params){
let str=[];
for(let key in params){
str.push(`${key}=${params[key]}`);
}
//console.log(str);// ["id=1", "cate=js"]
console.log(`https://houdunren.com${this.url}/?${str.join('&')}`);
return `https://houdunren.com${this.url}/?${str.join('&')}`;
}
}
function User(){
this.url="user/lists";
this.get=function(params){
let str=[];
for(let key in params){
str.push(`${key}=${params[key]}`);
}
//console.log(str);// ["id=1", "cate=js"]
console.log(`https://houdunren.com${this.url}/?${str.join('&')}`);
return `https://houdunren.com${this.url}/?${str.join('&')}`;
}
} */
//获取请求文章的url
let a =new Article();
a.get({id:1,cate:"js"});
//获取请求用户的url
let user=new User();
user.get({id:1,role:'admin'});
//实际上Article()和User()中get方法是一样的，这时考虑函数复用，写成一个函数供他们调用
function Request(){
this.get=function(params){
let str=[];
for(let key in params){
str.push(`${key}=${params[key]}`);
}
//console.log(str);// ["id=1", "cate=js"]
console.log(`https://houdunren.com${this.url}/?${str.join('&')}`);
return `https://houdunren.com${this.url}/?${str.join('&')}`;
}
}
//函数复用中，要复用某个构造函数，在调用该构造函数的时候用call将this指向到当前对象
function Article(){
this.url="article/lists";
Request.call(this);
}
function User(){
this.url="user/lists";
Request.call(this);
}
//进一步简化
function Request0(url){
this.url=url;
this.get=function(params){
let str=[];
for(let key in params){
str.push(`${key}=${params[key]}`);
}
//console.log(str);// ["id=1", "cate=js"]
console.log(`https://houdunren.com/${this.url}/?${str.join('&')}`);
return `https://houdunren.com/${this.url}/?${str.join('&')}`;
}
}
let a0=new Request0('article/lists');
a0.get({id:1,cate:"js"});
let user0=new Request0('user/lists');
user0.get({id:1,role:'admin'});
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>call和apply实现构造函数方法继承</title>
</head>
<body>
</body>
<script>
/*
function Article(){
this.url="article/lists";
this.get=function(params){
let str=[];
for(let key in params){
str.push(`${key}=${params[key]}`);
}
//console.log(str);// ["id=1", "cate=js"]
console.log(`https://houdunren.com${this.url}/?${str.join('&')}`);
return `https://houdunren.com${this.url}/?${str.join('&')}`;
}
}
function User(){
this.url="user/lists";
this.get=function(params){
let str=[];
for(let key in params){
str.push(`${key}=${params[key]}`);
}
//console.log(str);// ["id=1", "cate=js"]
console.log(`https://houdunren.com${this.url}/?${str.join('&')}`);
return `https://houdunren.com${this.url}/?${str.join('&')}`;
}
} */
//获取请求文章的url
let a =new Article();
a.get({id:1,cate:"js"});
//获取请求用户的url
let user=new User();
user.get({id:1,role:'admin'});
//实际上Article()和User()中get方法是一样的，这时考虑函数复用，写成一个函数供他们调用
function Request(){
this.get=function(params){
let str=[];
for(let key in params){
str.push(`${key}=${params[key]}`);
}
//console.log(str);// ["id=1", "cate=js"]
console.log(`https://houdunren.com${this.url}/?${str.join('&')}`);
return `https://houdunren.com${this.url}/?${str.join('&')}`;
}
}
//函数复用中，要复用某个构造函数，在调用该构造函数的时候用call将this指向到当前对象
function Article(){
this.url="article/lists";
Request.call(this);
}
function User(){
this.url="user/lists";
Request.call(this);
}
//进一步简化
function Request0(url){
this.url=url;
this.get=function(params){
let str=[];
for(let key in params){
str.push(`${key}=${params[key]}`);
}
//console.log(str);// ["id=1", "cate=js"]
console.log(`https://houdunren.com/${this.url}/?${str.join('&')}`);
return `https://houdunren.com/${this.url}/?${str.join('&')}`;
}
}
let a0=new Request0('article/lists');
a0.get({id:1,cate:"js"});
let user0=new Request0('user/lists');
user0.get({id:1,role:'admin'});
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bind </title>
</head>
<body>
<button>hxj</button>
</body>
<script>
//使用call、apply会立即执行、使用bind不会立即执行
function show(){
console.log(this.name);
}
show.apply({name:"hxj"});//hxj
show.call({name:"ydc"});//ydc
show.bind({name:"hwx"});//不输出，不会执行,得到一个新的函数
show.bind({name:'hwx'})();//hwx
let a =function(){
};
let b=a;
console.log(a instanceof Object);//true
console.log(typeof a);//function
console.log(a===b);//true 函数赋值是传址
b=a.bind();
console.log(a==b);//false 即a.bind()又重新生成了一个函数
//在参数传递方面，call()和apply()因为是立即执行，所以在括号内就把参数传递进去
//bind不是立即执行,bind()括号里可以传参，或者在调用的时候在传参
function sum(a,b){
return this.f+a+b;
}
console.log(sum.call({f:1},2,3));//6
//bind传参可以在调用的时候再传，也可以在bind()的时候传，
//但是注意call、apply和bind的第一个参数都是赋给函数内部的this
let func=sum.bind({f:1});//
console.log(func(4,5));//10
//如果在bind的时候传参，下面再调用的时候传参参数就不起作用了
let func0=sum.bind({f:2},6,4);
console.log(func0());//12
console.log(func0(1,2));//12
//bind的应用,bind不是立即执行，所以在操作dom时，如果是等待用户某种操作以后再执行
//可以使用bind，如果使用call，这时还没等用户操作就会执行，而这时是获取不到点击的元素的
document.querySelector("button").addEventListener('click',function(e){
document.write(this.name+e.target.innerHTML);
}.bind({name:'ydc-'}));
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现随机变色的小例子</title>
</head>
<body>
</body>
<script>
function Color(elem){
this.elem=elem;
this.colors=['#ffcc66','#fedbca','#fff996',"#cdeaff",'#aabbcc'];
this.run=function(){
setInterval(function(){
//利用生成随机数，随机取得colors里面的颜色
let i=Math.floor(Math.random()*this.colors.length);
this.elem.style.backgroundColor=this.colors[i];
}.bind(this),1000);
//使用bind(this)使得setInterval()里面的函数this指向该对象，否则它就指向window取不到color和elem
}
};
let obj=new Color(document.body);
obj.run();
</script>
</html>
