站長資訊網
        最全最豐富的資訊網站

        es6箭頭方法中this的指向是什么

        在es6中,箭頭函數體內的this對象,就是定義該函數時所在的作用域指向的對象。箭頭函數中this的指向就是上下文里對象this指向,偶爾沒有上下文對象,this就指向window;即使是call、apply、bind等方法也不能改變箭頭函數this的指向。

        es6箭頭方法中this的指向是什么

        前端(vue)入門到精通課程:進入學習
        Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調試工具:點擊使用

        本教程操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。

        箭頭函數相信大家在日常開發中用到的地方非常之多,因為它很簡潔,可讀性強,但是它最大的好處,其實是解決了匿名函數的this指向問題,有利于封裝回調函數。

        先來個總結:

        箭頭函數體內的this對象,就是定義該函數時所在的作用域指向的對象,而不是使用時所在的作用域指向的對象。

        ES6箭頭函數中this

        • (1)默認指向定義它時,所處上下文的對象的this指向。即ES6箭頭函數里this的指向就是上下文里對象this指向,偶爾沒有上下文對象,this就指向window

        • (2)即使是call,apply,bind等方法也不能改變箭頭函數this的指向

        下面是普通函數的列子:

        var name = 'window'; // 其實是window.name = 'window'  var A = {    name: 'A',    sayHello: function(){       console.log(this.name)    } }  A.sayHello();// 輸出A  var B = {   name: 'B' }  A.sayHello.call(B);//輸出B  A.sayHello.call();//不傳參數指向全局window對象,輸出window.name也就是window
        登錄后復制

        從上面可以看到,sayHello這個方法是定義在A對象中的,當當我們使用call方法,把其指向B對象,最后輸出了B;可以得出,sayHello的this只跟使用時的對象有關。

        改造一下:

        var name = 'window';  var A = {    name: 'A',    sayHello: () => {       console.log(this.name)    } } A.sayHello();// 還是以為輸出A ? 錯啦,其實輸出的是window
        登錄后復制

        我相信在這里,大部分同學都會出錯,以為sayHello是綁定在A上的,但其實它綁定在window上的,那到底是為什么呢?

        一開始,我重點標注了“該函數所在的作用域指向的對象”,作用域是指函數內部,這里的箭頭函數,也就是sayHello,所在的作用域其實是最外層的js環境,因為沒有其他函數包裹;然后最外層的js環境指向的對象是winodw對象,所以這里的this指向的是window對象。

        那如何改造成永遠綁定A呢:

        var name = 'window';   var A = {    name: 'A',    sayHello: function(){       var s = () => console.log(this.name)       return s//返回箭頭函數s    } }  var sayHello = A.sayHello(); sayHello();// 輸出A   var B = {    name: 'B'; }  sayHello.call(B); //還是A sayHello.call(); //還是A
        登錄后復制

        OK,這樣就做到了永遠指向A對象了,我們再根據“該函數所在的作用域指向的對象”來分析一下:

        • 該函數所在的作用域:箭頭函數s 所在的作用域是sayHello,因為sayHello是一個函數。

        • 作用域指向的對象:A.sayHello指向的對象是A。

        所以箭頭函數s 中this就是指向A啦 ~~

        —————-finish————-

        最后是使用箭頭函數其他幾點需要注意的地方

        • 不可以當作構造函數,也就是說,不可以使用new命令,否則會拋出一個錯誤。

        • 不可以使用arguments對象,該對象在函數體內不存在。如果要用,可以用 rest 參數代替。

        • 不可以使用yield命令,因此箭頭函數不能用作 Generator 函數。

        【推薦學習:javascript視頻教程】

        贊(1)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 国产成人精品一区二区三区| 日韩三级精品| 欧美成人精品第一区二区| 精品人妻中文字幕有码在线 | 亚洲精品国产自在久久| 奇米精品一区二区三区在线观看| 亚洲AV乱码久久精品蜜桃| 国产欧美日韩综合精品一区二区三区 | 精品欧美一区二区三区久久久| 国产精品福利在线播放| 亚洲人精品午夜射精日韩| 精品久久久久久国产免费了| 337P亚洲精品色噜噜| 久久精品国产69国产精品亚洲| 日韩精品乱码AV一区二区| 午夜精品久久影院蜜桃| 精品日韩在线视频一区二区三区| 99久久精品免费国产大片| 九九热这里只有在线精品视 | 欧美+亚洲+精品+三区| 97精品国产手机| 国产精品免费高清在线观看| 精品无码AV无码免费专区| 亚洲动漫精品无码av天堂| 最新国产成人精品2024| 四虎国产精品成人| 亚洲精品无码久久不卡| 亚洲日韩中文在线精品第一| 亚洲精品无码99在线观看 | 精品无码一区二区三区爱欲| 亚洲2022国产成人精品无码区 | 亚洲精品无码99在线观看| 一本大道无码日韩精品影视| 亚洲精品无码AV中文字幕电影网站 | 一区二区国产精品 | 自拍中文精品无码| 人妻精品久久无码专区精东影业| 亚洲精品一级无码鲁丝片| 自拍偷在线精品自拍偷无码专区 | 无码精品A∨在线观看中文| 色欲精品国产一区二区三区AV|