一、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指向的
  • 使用方法:
  1. 函数名字.bind(对象,参数1,参数2,...)------>返回复制后的函数
  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>

最新文章

  1. Paypal开发中遇到请求被中止: 未能创建 SSL/TLS 安全通道及解决方案
  2. kindEditor完整认识 PHP上调用并上传图片说明/////////////////////////////z
  3. YEdit
  4. 护眼色的RGB值
  5. 源码安装Postgresql9.4.1
  6. python 自动化之路 day 08_2 网络编程
  7. Traceroute原理介绍
  8. oracle登陆,在监听服务启动了的情况下,登陆用户还是报错未启动监听服务的错误(刚开始装oracle是能登陆的,重启之后装了plsql)
  9. C语言-break和continue
  10. 未完全弄懂的题的题51nod1532
  11. KVM总结-KVM性能优化之内存优化
  12. spring batch初识
  13. POI导出EXCEL经典实现(转)
  14. ulimit命令&amp;pthread_create() error: Resource temporarily unavailable
  15. java基础46 IO流技术(输出字符流/缓冲输出字符流)
  16. opencv 掩膜操作 滤波 卷积核定义 增强对比度 掩膜运算
  17. Spring3 MVC请求参数获取的几种方法[转]
  18. vim:修改光标的显示
  19. vs与qt
  20. 常见的vue面试题

热门文章

  1. go 数据渲染到html页面 02
  2. CentOS7 安装 Git
  3. python多线程爬取斗图啦数据
  4. 转 C# GDI+ 实现橡皮筋技术
  5. Java 面向对象_多态
  6. Django学习笔记 (一) 开发环境配置
  7. K2 BPM_采购端到端解决方案,激活合规采购新动能_十年专注业务流程管理系统
  8. IOS开发之——绘图(CGContext)
  9. Linux挂载Windows文件夹
  10. 使用SAP Leonardo上的机器学习服务提取图片的特征向量