亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

JavaScript設計模式基礎之this、call、apply

標簽:
JavaScript

1.this的指向

除去不常用的with和eval,具体应用中this指向大概能分为4种情况分别是

  1.作为对象的方法调用。

  2.作为普通函数的方法调用。

  3.Function.prototype.call或Function.prototype.appy

1.如果作为对象方法的调用,this是指向该对象:

复制代码

 let obj = {
            objName:'obj',
            objThis(){
                alert(this.objName);
            }
        }    
        obj.objThis();

复制代码

输出如下:

对象obj里面的方法objThis的this是指向该对象

2.作为普通函数调用,this指向全局对象也就是window对象

复制代码

var objName = 'window';        //  let obj = {
        //     objName:'obj',
        //     objThis(){
        //         alert(this.objName);
        //     }
        // }    
        function objThis(){
            alert(this.objName);
        }
        objThis();

复制代码

输出:

函数里面的this默认指向全局window

3.构造器调用(es6类调用),this指向实例化对象

复制代码

class Obj{
            constructor(str,nub){                this.str = str;                this.nub = nub;
            }
            num(){
                console.log(this.str,this.nub,this)
            }
        }        //类实例
        let obj = new Obj('hello',123);
        obj.num();

复制代码

输出:

this输出的是类的实例对象 构造函数或者类中this指向自身实例

总结:在谁里面使用this,this指向谁

2.call和apply

1.区别

  appy接收2个参数,第一个参数指定函数体内this对象的指向,第二个参数为一个带下标的集合,这个集合可以为数组,也可以为类数组,appy方法吧这个集合中的原生

  作为参数传递给呗调用的函数。

 

  call传入的参数数量不固定第一个参数和apply相同,后面的每个参数依次传入只是不是以集合的方式而是参数的方式

复制代码

     //apply
        let apply1 = function(){
            alert(arguments)//输出[1,2,3]        }
        apply1.apply(null,[1,2,3])        //call
        let call1 = function(){
            alert(arguments)//输出[1,2,3]        }
        call1.call(null,1,2,3)

复制代码

call是包装在apply上面的语法糖,如果我们传入的第一个参数是null,那么函数体内的this会默认指向宿主对象,在浏览器中就是全局window 

call和apply能改变this指向和借用其他对象的方法 这里就不一一阐述了 网上特别多 

为后面的设计模式做基础 是必须会的

原文出处:https://www.cnblogs.com/y-y-y-y/p/9655706.html  

點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消