快捷導(dǎo)航

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

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

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

普通函數(shù)

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

示例：

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

普通函數(shù)，均可以通過(guò)其 bind、call、apply 方法來(lái)改變其內(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'}
})()

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

示例：

(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ù)，不管是作為獨(dú)立的方法或是作為對(duì)象的屬性值，其內(nèi)部的 this 均指向該箭頭函數(shù)被定義時(shí)所在的上下文中對(duì)應(yīng)的 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ù)作為對(duì)象屬性值 */
        const obj = {
            arrowfunc,
            arrowfunc1,
            param: {
                arrowfunc,
                arrowfunc1,
                arrowfunc2: () => console.log(this)
            }
        }
        
        console.log('-- 函數(shù)作為對(duì)象屬性值 --');
        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ù)一樣可以通過(guò)這三個(gè)方法預(yù)設(shè)箭頭函數(shù)的入?yún)⒅怠?/p>

試圖通過(guò)這三個(gè)方法改變箭頭函數(shù)內(nèi)部 this 的指向，雖不會(huì)報(bào)錯(cuò)但卻是無(wú)效的。

示例：

(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ù)使用，強(qiáng)制使用 new 運(yùn)算符作用在箭頭函數(shù)上，將會(huì)報(bào)如下錯(cuò)誤

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

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

(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ù)沒有這個(gè)屬性。

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

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

您可能感興趣的文章: