web-dev-qa-db-ja.com

js：親クラスのスコープにアクセスします

JavaScriptの通常のクラス内にjqueryクラスがあります。 jqueryクラスのコールバック関数から親クラスのスコープ内の変数にアクセスすることは可能ですか？

私が意味することの簡単な例を以下に示します

var simpleClass = function () {    
    this.status = "pending";
    this.target = jqueryObject;
    this.updateStatus = function() {
        this.target.fadeOut("fast",function () {
           this.status = "complete"; //this needs to update the parent class 
        });
    };
};

上の例では、コールバック関数はjqueryオブジェクトのスコープにアクセスしようとします。親クラスのステータス変数にアクセスする方法はありますか？

javascriptjqueryclassscopeparent
60
Sam

親関数の変数に「this」を設定してから、内部関数で使用します。

var simpleClass = function () {         
    this.status = "pending";     
    this.target = jqueryObject;     

    var parent = this;

    this.updateStatus = function() {         
            this.jqueryObject.fadeOut("fast",function () {            
                parent.status = "complete"; //this needs to update the parent class          
            });     
        }; 
    };
96
Tom Brothers

まだ誰もこれを投稿していないので、とにかくこの答えをこの古い質問に投稿します。

関数呼び出しでbindメソッドを使用して、thisが属するスコープを定義できます。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

通常、メソッドを作成するたびに、thisは関数の現在のスコープに属します。 scope2の変数はscope1の変数を見ることができません。

例えば.

_function(){
    // scope 1
    this.baz = 'foo';

    function(){
        // scope 2
        this.baz // not defined
    };
};
_

bindメソッドを使用すると、関数内のthisからスコープを定義できます。したがって、.bind(this)を使用すると、thisからの独自のスコープが、次のように親関数のスコープに参照されることを、呼び出された関数に伝えることができます。

_function(){
    // scope 1
    this.baz = 'foo';

    function(){
        // scope 1
        this.baz // foo
    }.bind(this);
};
_

あなたの場合、これはbindメソッドを使用した例です

_var simpleClass = function () {    
    this.status = "pending";
    this.target = jqueryObject;
    this.updateStatus = function() {
        this.target.fadeOut("fast",function () {
           this.status = "complete"; //this needs to update the parent class 
        }.bind(this));
    }.bind(this);
};
_
32
ins0

矢印関数 を使用

矢印関数には、独自のthisがありません。囲むレキシカルスコープのthis値が使用されます。矢印関数は、通常の変数検索規則に従います。そのため、現在のスコープに存在しないthisを検索しているときに、そのスコープを囲むthisを見つけることになります。

通常の関数構文

function(param1, param2) {}

矢印関数構文

(param1, param2) => {}

使用法

const simpleClass = function () {    
    this.status = "pending";
    this.target = jqueryObject;
    this.updateStatus = function() { 
        this.target.fadeOut("fast", () => { // notice the syntax here
           this.status = "complete"; // no change required here
        });
    };
};

ECMAScript 2015クラス内でArrow関数を使用する

class simpleClass {

    constructor() {
        this.status = 'pending';
        this.target = jqueryObject;
    }

    updateStatus() {
        this.target.faceOut('fast', () => {
            this.status = "complete";
        });
    }
}

const s = new simpleClass();
s.updateStatus();

記述されたコードは、 最新のブラウザ 。でのみ動作します

6
Lucky Soni

ごめんm8。次のように、参照をオブジェクトにネストする必要があります。

var simpleClass = function () {
    var _root = this;
    this.status = "pending";
    this.target = jqueryObject;
    this.updateStatus = function() {
        this.root = _root;
        _root.target.fadeOut("fast",function () {
           this.status = "complete"; //this needs to update the parent class 
        });
    };
};

var _root

2
Tokimon

"this"を変数に設定すると、簡単にアクセスできます。のような：

$("#ImageFile").change(function (e) {
    var image, file;
    var Parent=this;
    if ((file = Parent.files[0])) {
        var sFileExtension = file.name.split('.')[file.name.split('.').length - 1];

        if (sFileExtension === "jpg" || sFileExtension === "jpeg" || sFileExtension === "bmp" || sFileExtension === "png" || sFileExtension === "gif") {
            var reader = new FileReader();

            reader.onload = function (e) {
               alert(Parent.files[0].name);
            };
            reader.readAsDataURL(Parent.files[0]);
        }
        else { alert('Wrong file selected. Only jpg, jpeg, bmp, png and gif files are allowed.'); }
    }
})
2
Muhammad Awais

これを試して：

   var sc = (function(scc){

    scc = {};

    scc.target = jQueryObject;


    scc.stt = "stt init";

    scc.updateStatus = function(){
        var elem = this;

        this.target.click(function(){
            elem.stt= "stt change";
            console.log(elem.stt);
        })

    }

    return scc;


}(sc || {}));

ターゲットオブジェクトをプライベート変数として定義することもできます

1
mdikici

クロージャー変数を使用して状態を維持できます。

function simpleClass() {
   var _state = { status: "pending", target: jqueryObject; }

   this.updateStatus = function() {
      this.target.fadeOut("fast",function () {
         _state.status = "complete"; //this needs to update the parent class 
      });
   }
}

// Later...
var classInstance = new simpleClass();
0
Humberto