pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

JavaScript中call,apply,bind方法的總結

call和apply都是改變上下文中的this并立即執行這個函數,bind方法可以讓對應的函數想什么時候調就什么時候調用,并且可以將參數在執行的時候添加,這是它們的區別,根據自己的實際情

  why?call,apply,bind干什么的?為什么要學這個?

  一般用來指定this的環境,在沒有學之前,通常會有這些問題。

var a = {
    user:"追夢子",
    fn:function(){
        console.log(this.user);
    }
}
var b = a.fn;
b(); //undefined

  我們是想打印對象a里面的user卻打印出來undefined是怎么回事呢?如果我們直接執行a.fn()是可以的。

var a = {
    user:"追夢子",
    fn:function(){
        console.log(this.user);
    }
}
a.fn(); //追夢子

  這里能夠打印是因為,這里的this指向的是函數a,那為什么上面的不指向a?我們如果需要了解this的指向問題,請看徹底理解js中this的指向,不必硬背這篇文章。

  雖然這種方法可以達到我們的目的,但是有時候我們不得不將這個對象保存到另外的一個變量中,那么就可以通過以下方法。

  1、call()

var a = {
    user:"追夢子",
    fn:function(){
        console.log(this.user); //追夢子
    }
}
var b = a.fn;
b.call(a);

  通過在call方法,給第一個參數添加要把b添加到哪個環境中,簡單來說,this就會指向那個對象。

  call方法除了第一個參數以外還可以添加多個參數,如下:

var a = {
    user:"追夢子",
    fn:function(e,ee){
        console.log(this.user); //追夢子
        console.log(e+ee); //3
    }
}
var b = a.fn;
b.call(a,1,2);

  2、apply()

  apply方法和call方法有些相似,它也可以改變this的指向

var a = {
    user:"追夢子",
    fn:function(){
        console.log(this.user); //追夢子
    }
}
var b = a.fn;
b.apply(a);

  同樣apply也可以有多個參數,但是不同的是,第二個參數必須是一個數組,如下:

var a = {
    user:"追夢子",
    fn:function(e,ee){
        console.log(this.user); //追夢子
        console.log(e+ee); //11
    }
}
var b = a.fn;
b.apply(a,[10,1]);

  或者

var a = {
    user:"追夢子",
    fn:function(e,ee){
        console.log(this.user); //追夢子
        console.log(e+ee); //520
    }
}
var b = a.fn;
var arr = [500,20];
b.apply(a,arr);

  //注意如果call和apply的第一個參數寫的是null,那么this指向的是window對象

var a = {
    user:"追夢子",
    fn:function(){
        console.log(this); //Window {external: Object, chrome: Object, document: document, a: Object, speechSynthesis: SpeechSynthesis…}
    }
}
var b = a.fn;
b.apply(null);

  3、bind()

  bind方法和call、apply方法有些不同,但是不管怎么說它們都可以用來改變this的指向。

  先來說說它們的不同吧。

var a = {
    user:"追夢子",
    fn:function(){
        console.log(this.user);
    }
}
var b = a.fn;
b.bind(a);

  我們發現代碼沒有被打印,對,這就是bind和call、apply方法的不同,實際上bind方法返回的是一個修改過后的函數。

var a = {
    user:"追夢子",
    fn:function(){
        console.log(this.user);
    }
}
var b = a.fn;
var c = b.bind(a);
console.log(c); //function() { [native code] }

  那么我們現在執行一下函數c看看,能不能打印出對象a里面的user

var a = {
    user:"追夢子",
    fn:function(){
        console.log(this.user); //追夢子
    }
}
var b = a.fn;
var c = b.bind(a);
c();

  ok,同樣bind也可以有多個參數,并且參數可以執行的時候再次添加,但是要注意的是,參數是按照形參的順序進行的。

var a = {
    user:"追夢子",
    fn:function(e,d,f){
        console.log(this.user); //追夢子
        console.log(e,d,f); //10 1 2
    }
}
var b = a.fn;
var c = b.bind(a,10);
c(1,2);

  總結:call和apply都是改變上下文中的this并立即執行這個函數,bind方法可以讓對應的函數想什么時候調就什么時候調用,并且可以將參數在執行的時候添加,這是它們的區別,根據自己的實際情況來選擇使用。


來源:http://www.admin10000.com/document/7025.html

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

由于實際運行環境是在瀏覽器中,因此性能還取決于JavaScript解釋器的效率,指定的FPS幀速在低性能解釋器中可能不會達到,所以這部分不是開發者能夠決定的,開發者能作的是盡可能通
本文將使用HTML5提供的VideoAPI做一個自定義的視頻播放器,需要用到HTML5提供的video標簽、以及HTML5提供的對JavascriptAPI的擴展。,HTML5中國,中國最大的HTML5中文門戶。
隨著 Hybrid 應用的豐富,HTML5 工程師們已經不滿足于把桌面端體驗簡單移植到移動端,他們覬覦移動原生應用人性化的操作體驗,特別是原生應用與生俱來的豐富的手勢系統。HTML5 沒有提
你想要在自己網站上分享一個產品,或者是一個作品集,又或者僅僅只是一個靈感。在你發布到網上之前,你想讓它看起來有吸引力,專業,或者至少得看起來像那么回事。那么你接下
H5廣告,包括H5廣告的設計流程,究竟有什么講究,和階段。為了能幫助更多的人了解H5廣告,我專門做了一個講義。同時,也讓我意外的收到了非常好反饋和認!這是對我的極大鼓勵!我的
本文主要內容有:框架與組件、構建生態、開發技巧與調試、html、css與重構、native/hybrid/桌面開發、前端/H5優化、全棧/全端開發、研究實驗、數據分析與監控、其它軟技能、前端技術網
主站蜘蛛池模板: 钣金加工厂家-钣金加工-佛山钣金厂-月汇好 | 油罐车_加油机_加油卷盘_加油机卷盘_罐车人孔盖_各类球阀_海底阀等车用配件厂家-湖北华特专用设备有限公司 | MES系统-WMS系统-MES定制开发-制造执行MES解决方案-罗浮云计算 | 圆窗水平仪|伊莉莎冈特elesa+ganter| 伸缩器_伸缩接头_传力接头-巩义市润达管道设备制造有限公司 | 厂房出租-厂房规划-食品技术-厂房设计-厂房装修-建筑施工-设备供应-设备求购-龙爪豆食品行业平台 | 防火窗_耐火窗_防火门厂家_防火卷帘门-重庆三乐门业有限公司 | 南京交通事故律师-专打交通事故的南京律师 | 美侍宠物-专注宠物狗及宠物猫训练|喂养|医疗|繁育|品种|价格 | 质检报告_CE认证_FCC认证_SRRC认证_PSE认证_第三方检测机构-深圳市环测威检测技术有限公司 | 喷涂流水线,涂装流水线,喷漆流水线-山东天意设备科技有限公司 | 微信聊天记录恢复_手机短信删除怎么恢复_通讯录恢复软件下载-快易数据恢复 | 法兰螺母 - 不锈钢螺母制造厂家 - 万千紧固件--螺母街 | 依维柯自动挡房车,自行式国产改装房车,小型房车价格,中国十大房车品牌_南京拓锐斯特房车 - 南京拓锐斯特房车 | 超高频感应加热设备_高频感应电源厂家_CCD视觉检测设备_振动盘视觉检测设备_深圳雨滴科技-深圳市雨滴科技有限公司 | 浙江华锤电器有限公司_地磅称重设备_防作弊地磅_浙江地磅售后维修_无人值守扫码过磅系统_浙江源头地磅厂家_浙江工厂直营地磅 | 南汇8424西瓜_南汇玉菇甜瓜-南汇水蜜桃价格| 杭州中央空调维修_冷却塔/新风机柜/热水器/锅炉除垢清洗_除垢剂_风机盘管_冷凝器清洗-杭州亿诺能源有限公司 | 右手官网|右手工业设计|外观设计公司|工业设计公司|产品创新设计|医疗产品结构设计|EMC产品结构设计 | 耳模扫描仪-定制耳机设计软件-DLP打印机-asiga打印机-fitshape「飞特西普」 | 缝纫客| 深圳天际源广告-形象堆头,企业文化墙,喷绘,门头招牌设计制作专家 | 河南卓美创业科技有限公司-河南卓美防雷公司-防雷接地-防雷工程-重庆避雷针-避雷器-防雷检测-避雷带-避雷针-避雷塔、机房防雷、古建筑防雷等-山西防雷公司 | 彩信群发_群发彩信软件_视频短信营销平台-达信通 | 网络推广公司_网络营销方案策划_企业网络推广外包平台-上海澜推网络 | LINK FASHION 童装·青少年装展| 龙门加工中心-数控龙门加工中心厂家价格-山东海特数控机床有限公司_龙门加工中心-数控龙门加工中心厂家价格-山东海特数控机床有限公司 | 识禅_对禅的了解,从这里开始 | 婚博会2024时间表_婚博会门票领取_婚博会地址-婚博会官网 | 浩方智通 - 防关联浏览器 - 跨境电商浏览器 - 云雀浏览器 | 防水套管|柔性防水套管|伸缩器|伸缩接头|传力接头-河南伟创管道 防水套管_柔性防水套管_刚性防水套管-巩义市润达管道设备制造有限公司 | 球磨机,节能球磨机价格,水泥球磨机厂家,粉煤灰球磨机-吉宏机械制造有限公司 | 保镖公司-私人保镖-深圳保镖公司【环宇兄弟保镖】 | 德国进口电锅炉_商用电热水器_壁挂炉_电采暖器_电热锅炉[德国宝] | 高压管道冲洗清洗机_液压剪叉式升降机平台厂家-林君机电 | 网络推广公司_网络营销方案策划_企业网络推广外包平台-上海澜推网络 | 山东PE给水管厂家,山东双壁波纹管,山东钢带增强波纹管,山东PE穿线管,山东PE农田灌溉管,山东MPP电力保护套管-山东德诺塑业有限公司 | 国际金融网_每日财经新资讯网| 常州减速机_减速机厂家_常州市减速机厂有限公司 | 天空彩票天下彩,天空彩天空彩票免费资料,天空彩票与你同行开奖,天下彩正版资料大全 | 砍排机-锯骨机-冻肉切丁机-熟肉切片机-预制菜生产线一站式服务厂商 - 广州市祥九瑞盈机械设备有限公司 |