三个方法(apply、call、bind)
2024-08-27 09:21:12
一、apply()和call()
- 方法中如果没传入参数,或者是null,那么调用该方法的函数对象中的this就是默认的window
<script>
function f1(x,y){
console.log(x+y+"======="+this)
}
f1.apply();//NaN=======[object Window]
f1.apply(null);//NaN=======[object Window]
f1.call();//NaN=======[object Window]
f1.call(null);//NaN=======[object Window]
</script>
- apply和call方法都可以让函数或者方法来调用,传入参数和函数自己调用的写法不一样,但是效果是一样的
<script>
function f1(x,y){
console.log(x+y+"======="+this)
}
f1(10,20);//30=======[object Window]
f1.apply(null,[10,20]);//30=======[object Window]
f1.call(null,10,20);//30=======[object Window]
</script>
- 作用:函数的调用,改变this的指向------在借用构造函数实现继承里也讲到过call方法
- 使用方法:只要想使用别的对象的方法,并且希望这个方法是当前对象
<script>
//作用,调用函数,改变this的指向
function Person(age){
this.age=age;
}
Person.prototype.sayHi=function(x,y){
console.log((x+y)+"=======>"+this.age);
};
function Student(age){
this.age=age;
}
var per=new Person(10);//Person的实例对象
var stu=new Student(100);//Student的实例对象
//sayHi方法是per实例对象原型里面的方法
//通过apply和call方法,stu调用了这个方法
//sayHi方法里面的this,由原来的per变成了stu
per.sayHi.apply(stu,[10,20]);//30=======>100
per.sayHi.call(stu,10,20);//30=======>100
//写法
//函数名字/方法.apply(对象,[参数1,参数2,.....])
//函数名字/方法.call(对象,参数1,参数2,.......)
</script>
- apply和call方法并不在函数这个实例对象中,而是在Function的原型prototype中
二、bind()
- bind方法是复制的意思,参数可以在复制的时候传进去,也可以在复制之后调用的时候传入进去
- bind是在复制的时候改变this指向的,二apply和call是在调用的时候改变this指向的
- 使用方法:
- 函数名字.bind(对象,参数1,参数2,...)------>返回复制后的函数
- 方法名字.bind(对象,参数1,参数2,...)------>返回复制后的方法
<script>
//使用方法:
//1.函数名字.bind(对象,参数1,参数2,...)------>返回复制后的函数
function f1(x,y){
console.log(x+y);
}
var f2=f1.bind(null,10,20);
f2();//30
//2.方法名字.bind(对象,参数1,参数2,...)------>返回复制后的方法
function Person(age){
this.age=age;
}
Person.prototype.show=function(){
console.log(this+"======"+this.age);
};
function Student(age){
this.age=age;
}
var per=new Person(10);
var stu=new Student(20);
//stu对象使用bind复制了一份per的方法
var ff=per.show.bind(stu);
ff();//[object Object]======20
</script>
- 应用:通过对象,调用方法,产生随机数
<script>
//构造函数
function showRandom(){
//1-10的随机数
this.number=parseInt(Math.random()*10+1);
}
//原型方法
showRandom.prototype.show1=function(){
//定时器里的this是window,通过bind把this指向改变成为了实例对象
window.setInterval(this.show2.bind(this),1000);
};
showRandom.prototype.show2=function(){
//显示随机数
console.log(this.number);
};
//实例对象
var sr=new showRandom();
//调用方法,输出随机数字,调用一次,可以不停的产生(相同的)随机数字
sr.show1();
</script>
- 补充:bind函数的用法
<script>
function fn(a,b,c,d,e,f){
console.log(a,b,c);
console.log(d,e,f);
}
// 绑定的同时传递参数,预传参,不调用
var newFn = fn.bind(this,1,2,3)
// 调用的时候传递参数,该参数会和预传递的参数合并到一起作为函数参数
newFn() //1 2 3 undefined undefined undefined
newFn(4,5,6) // 1 2 3 4 5 6
</script>
最新文章
- Paypal开发中遇到请求被中止: 未能创建 SSL/TLS 安全通道及解决方案
- kindEditor完整认识 PHP上调用并上传图片说明/////////////////////////////z
- YEdit
- 护眼色的RGB值
- 源码安装Postgresql9.4.1
- python 自动化之路 day 08_2 网络编程
- Traceroute原理介绍
- oracle登陆,在监听服务启动了的情况下,登陆用户还是报错未启动监听服务的错误(刚开始装oracle是能登陆的,重启之后装了plsql)
- C语言-break和continue
- 未完全弄懂的题的题51nod1532
- KVM总结-KVM性能优化之内存优化
- spring batch初识
- POI导出EXCEL经典实现(转)
- ulimit命令&;pthread_create() error: Resource temporarily unavailable
- java基础46 IO流技术(输出字符流/缓冲输出字符流)
- opencv 掩膜操作 滤波 卷积核定义 增强对比度 掩膜运算
- Spring3 MVC请求参数获取的几种方法[转]
- vim:修改光标的显示
- vs与qt
- 常见的vue面试题