腳本之家服務器常用軟件

快捷導航

JS函數(shù)(普通函數(shù),箭頭函數(shù))中this的指向問題詳解

更新時間：2022年09月04日 15:42:56 作者：hello_exec

這篇文章主要給大家介紹了JS中普通函數(shù)和箭頭函數(shù)的this指向，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

普通函數(shù)

具名普通函數(shù)、匿名普通函數(shù)，在不作為對象的屬性值的情況下，其內(nèi)部的 this 總是指向代碼運行環(huán)境下的全局對象 ( 例如，瀏覽器中的 window )。

示例：

(function() {
    console.log(this); // window
    (function() {
        console.log(this); // window
        (function() {
            console.log(this); // window
        })()
    })()
})()

普通函數(shù)，均可以通過其 bind、call、apply 方法來改變其內(nèi)部 this 的指向。

示例：

(function() {
    const func = (function() { console.log(this) }).bind('hello')
    const obj = {
        func,
        func1: (function() { console.log(this) }).bind('hello'),
        func2: (function F() { console.log(this) }).bind('hello')
    }
    func() // String {'hello'}
    obj.func() // String {'hello'}
    obj.func1() // String {'hello'}
    obj.func2() // String {'hello'}
})()

當普通函數(shù)( 具名的、匿名的、外部定義的方法 )，作為對象的屬性值被引用的時候，其內(nèi)部的 this 指向該屬性所直接歸屬的對象。

示例：

(function() {
    const func = function() { console.log(this) }
    const obj = {
        func,
        func1: function F() { console.log(this) },
        func2() { console.log(this) },
        param: {
            func,
            func1: function F() { console.log(this) },
            func2() { console.log(this) }
        }
    }
    func() // window
    obj.func() // obj
    obj.func1() // obj
    obj.func2() // obj
    obj.param.func() // obj.param
    obj.param.func1() // obj.param
    obj.param.func2() // obj.param
})()

箭頭函數(shù)

箭頭函數(shù)，不管是作為獨立的方法或是作為對象的屬性值，其內(nèi)部的 this 均指向該箭頭函數(shù)被定義時所在的上下文中對應的 this。

示例：

(function() {
    /** 外層作用域 */
    const arrowfunc = () => console.log(this)
    
    console.log('-- 外層作用域 --');
    console.log(this); // String {'hello'}
    arrowfunc(); // String {'hello'}
    
    (function() {
        /** 內(nèi)層作用域 */
        const arrowfunc1 = () => console.log(this)
        
        console.log('-- 內(nèi)層作用域 --');
        console.log(this); // String {'world'}
        arrowfunc() // String {'hello'}
        arrowfunc1() // String {'world'}
 
        /** 函數(shù)作為對象屬性值 */
        const obj = {
            arrowfunc,
            arrowfunc1,
            param: {
                arrowfunc,
                arrowfunc1,
                arrowfunc2: () => console.log(this)
            }
        }
        
        console.log('-- 函數(shù)作為對象屬性值 --');
        obj.arrowfunc() // String {'hello'}
        obj.arrowfunc1() // String {'world'}
        obj.param.arrowfunc() // String {'hello'}
        obj.param.arrowfunc1() // String {'world'}
        obj.param.arrowfunc2() // String {'world'}
    }).bind('world')()
}).bind('hello')()

箭頭函數(shù) 也有 bind、call、apply 方法，與普通函數(shù)一樣可以通過這三個方法預設(shè)箭頭函數(shù)的入?yún)⒅怠?/p>

試圖通過這三個方法改變箭頭函數(shù)內(nèi)部 this 的指向，雖不會報錯但卻是無效的。

示例：

(function() {
    console.log(this); // String {'hello'}
    (() => {
        console.log(this); // String {'hello'}
        (() => {
            console.log(this) // String {'hello'}
        }).bind('bbb')()
    }).bind('aaa')();
    
    ((a, b, c) => {
        console.log(this) // String {'hello'}
        console.log(a) // a
        console.log(b) // b
        console.log(c) // c
    }).bind(null, 1, 2)(3)
}).bind('hello')()

附：

* 箭頭函數(shù)不能作為構(gòu)造函數(shù)使用，強制使用 new 運算符作用在箭頭函數(shù)上，將會報如下錯誤

new (() => {}) // Uncaught TypeError: (intermediate value) is not a constructor

* 箭頭函數(shù)內(nèi)部沒有定義 arguments 變量，箭頭函數(shù)所在的作用域也不存在 arguments 的情況下，應用該變量會報錯。

(function() {
    ((a) => {
        console.log(a) // 1
        console.log(arguments) // Arguments ['hello']
    })(1)
})('hello');
 
(() => {
    console.log(arguments) // Uncaught ReferenceError: arguments is not defined
})();

* 普通函數(shù)都有原型屬性 prototype，箭頭函數(shù)沒有這個屬性。

(function() {}).prototype // {constructor: ?}
(() => {}).prototype // undefined

到此這篇關(guān)于JS函數(shù)(普通函數(shù),箭頭函數(shù))中this的指向問題詳解的文章就介紹到這了,更多相關(guān)JS函數(shù)this的指向內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

JS函數(shù)(普通函數(shù),箭頭函數(shù))中this的指向問題詳解

目錄

普通函數(shù)

箭頭函數(shù)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具