JavaScriptの中でthisの指す修正

JavaScriptでthisが指す原理を紹介しましたが、今日はthisが指すいくつかの複雑な解析と、どのようにthisの方向を変えるかを紹介します.
thisの指向については、いくつかの点に注意が必要です.

thisが指すのは、対象だけです.

thisは、作成時に決定されるのではなく、関数の実行環境に依存します.

匿名関数の実行環境は、大域的である.

は、一般的な関数の呼び出しに対して、thisをnull

にバインドしています.
一、this問題
一つ挙げますか

function getAge() {
    var y = new Date().getFullYear();
    return y - this.birth;
}

const xiaoming = {
    name: '  ',
    birth: 1990,
    age: getAge
};

xiaoming.age(); // 29,     
getAge(); // NaN

this指向関数が呼び出されたオブジェクト(実行環境).これは巨大な設計ミスであるため、ECMAは、strictモードで関数のthisをundefinedに向けるように規定している.上ですかstrictモードでgetAge()を呼び出すと、エラーが発生します.この決定はエラーを直ちに暴露させるだけで、thisが指すべき正しい位置を解決していません.
クローズドの作成方法によっては、thisの指向性が問題になり、発見されにくい場合があります.もう一つ

const name = 'this window'
const obj = {
    name : 'my object',

    getName : function(){
        function getNameFunc(){
            return this.name
        }
        return getNameFunc()
    }
}
obj.getName()  //undefined

getNameFuncは匿名関数で実行され、匿名関数の実行環境は大域的であり、thisはまたwindowを指す.
二、thisの向きを変える

により、that変数を定義し、thisを取得する

.
二つ目の修復

const name = 'this window'
const obj = {
    name : 'my object',

    getName : function(){
        const that = this;  //that  this   obj
        function getNameFunc(){
            return that.name
        }
        return getNameFunc()
    }
}
obj.getName()  //my object

関数自体のappy、call、bindを呼び出して、関数のthisがどのオブジェクトを指すかを指定できます.

appy

applyは2つのパラメータを受信し、最初のパラメータは結合を必要とするthis変数であり、2番目のパラメータはArayであり、関数自体のパラメータを表している.最初の修復

function getAge() {
    const y = new Date().getFullYear();
    return y - this.birth;
}

const xiaoming = {
    name: '  ',
    birth: 1990,
    age: getAge
};

xiaoming.age(); // 29,     
getAge.apply(xiaoming,[]); // 29,    

コール

callはappyと同様に、唯一の違いは、apply()がパラメータをArayにカプセル化して入ってきたのに対し、call()はパラメータを順番に入力したことである.

bind

関数のbindはオブジェクトを指定して、このオブジェクトにthisをバインドします.bindで最初の修復?

function getAge() {
    const y = new Date().getFullYear();
    return y - this.birth;
}

const xiaoming = {
    name: '  ',
    birth: 1990,
    age: getAge
};


xiaoming.age(); // 29,     
getAge.bind(xiaoming)() //29,    

三、矢印関数(ES 6)
矢印関数によって,this指向混迷問題が解決された.thisオブジェクトの指向は可変ですが、矢印関数では固定されています.矢印関数には重要な特性があります.関数内のthisオブジェクトは定義時のオブジェクトです.使用時のオブジェクトではなく、下の理由を説明します.thisがないからこそ、コンストラクタとしては使えません.二つ目の修復

const name = 'this window'
const obj = {
    name : 'my object',

    getName : function(){
        const getNameFunc = ()=> {
            return this.name
        }
        return getNameFunc()
    }
}
obj.getName()  //my object

転載はソースを明記してください.sherrybabyのブログです.