call,apply,bind的理解
2019-08-14 10:28:44来源:博客园 阅读 ()
call,apply,bind均是用于改变this指向。
三者相似之处:
1:都是用于改变函数的this指向。
2:第一个参数都是this要指向的对象。
3:都可以通过后面的参数进行对方法的传参。
let obj = { address: '北京', age: 18 } let address = '上海' var age = 20 let fn = function(name,sex){ console.log('address',this.address) console.log('age',this.age) console.log('name',name) console.log('sex',sex) } fn()
在图中可以看到只有age是有值的,直接调用fn方法,this默认指向为window。
address因为是let声明出来的变量,会产生一个做个作用域,所以fn同样是取不到address,只可以取到age。
使用call:
apply:
bind:
call跟apply的相同点:改变this指向后会对函数进行调用。
call跟apply的区别:后续参数call是一个一个传入,apply是将所有参数放到一个数组中进行传递。
bind跟apply跟call的不同:改变this指向后,并不会主动度函数进行调用,需要再手动调用函数。
传参方式有两种:1、跟call相同,将后续参数依次传入。
2、在调用时进行参数的传递
注意点:在严格模式下,即“use strict”
function fn() { console.log(this); } fn()// 普通模式下this是window,在严格模式下this是undefined fn.call(); // 普通模式下this是window,在严格模式下this是undefined fn.call(null); // 普通模式下this是window,在严格模式下this是null fn.call(undefined); // 普通模式下this是window,在严格模式下this是undefined
call的实现原理,实现一个自己的call方法。
明确call做了哪些事情。
1.改变了this指向
2.传递了要传递的参数
3.主动调用了方法
Function.prototype.myCall = function(...arg){ let obj = [...arg][0] || window//将this要指向的对象赋值给一个新对象 obj.fn = this//给新对象添加新的属性fn为要改变this指向的方法,实现了this的改变,obj.fn的this指向的便是obj了 let result = obj.fn(...[...arg].slice(1))//实现主动调用,并将参数传递 delete obj.fn//删除fn属性,防止破坏原有对象 return result //若方法有返回值将返回值return出去 }
call的经典例子:
function fn1() { console.log(1); } function fn2() { console.log(2); } fn1.call(fn2); // 1 fn1.call.call(fn2); // 2
fn1.call(fn2); 因为并没有涉及到this所以打印的仍然是1
fn1.call.call(fn2)
fn1.call.call(fn2)//将fn1.call看做要被该边this指向的函数,结合自己实现的call函数 function(...arg){ let obj = [...arg][0] || window//将this要指向的对象赋值给一个新对象 obj.fn = this//给新对象添加新的属性fn为要改变this指向的方法,实现了this的改变,obj.fn的this指向的便是obj了 let result = obj.fn(...[...arg].slice(1))//实现主动调用,并将参数传递 delete obj.fn//删除fn属性,防止破坏原有对象 return result //若方法有返回值将返回值return出去 }.call(fn2)//将里面的this改为fn2,可以看到实际执行的就是fn2函数
原文链接:https://www.cnblogs.com/bravefuture/p/11286262.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- JavaScript中的apply和call函数详解 2020-01-07
- 详解jQuery bind事件的操作方法 2019-11-03
- javascript call方法使用说明 2019-10-08
- vue.js(3)--v-bind与v-on 2019-08-14
- 手写call,apply方法实现 2019-05-22
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash