Zagwostka z dziedziny funkcji - Samoreferencja?

Question

Spotkałem się ostatnio z pewnym nietypowym dla mnie zapisem funkcji. Korzystam z niego w swoich programach, ale nie do końca go rozumiem.

function xyz() {

var inside=this;

}

I otóż mam pytanie co to jest, jak się nazywa i na jakich zasadach działa. Zauważyłem też że poniższe zapisy nie są równoznaczne w moim programie i działa on tylko z tym pierwszym:

inside.hkc = inside.kol.out;

this.hkc = this.kol.out;

 

Pierwszy działa jak na leży, a drugi nie wyrzuca błędu, ale nie daje pożądanego efektu. Więc czym owo zjawisko jest?

Comments

Zerknij na te przykłady kodu: https://forum.pasja-informatyki.pl/51989/jak-zapisac-this-podczas-tworzenia-obiektu-bez-konstruktora?show=52015#a52015

Answer 1

Warto, żebyś podał język, z którego pochodzą te przykłady… Jeśli to JS, to this można określić mianem "kontekstu wywołania", co jest bardzo złożonym tematem i bez sensownego przykładu niedziałającego kodu średnio da się to wytłumaczyć.

Comments

Tak chodzi o JS. Przykładu niedziałającego kodu Ci nie podam, bo mój kod działa jak należy, nie rozumiem właśnie tylko tej kwestii z this. Kiedy napisze wewnątrz jakiejś funkcji "var i = this" to czym staje się to "i".

---

Zależy od kontekstu wywołania – dlatego bez kodu nie da się wytłumaczyć ¯\_(ツ)_/¯

---

var Obiect = {
    ini: function(data) {
        var player = new Obiect.helpers.Player(data.pics,0,0,64,128);
    }, 
    helpers: {
        Image: function(img, x, y, w, h) {
            this.img = img;
            this.x = x;
            this.y = y;
            this.w = w;
            this.h = h;
        },         
        Player: function(img, posX, posY, sizeW, sizeH) {
            var self = this;
            
            this.image = new Obiect.helpers.Player(img,0,0,64,128);
            this.animationFrame = {
                Right: {
                    frame: [new Obiect.helpers.Player(img,0,0,64,128),new Obiect.helpers.Player(img,64,0,64,128),
                                  new Obiect.helpers.Player(img,0,0,64,128),new Obiect.helpers.Player(img,128,0,64,128)],
                    frameCount: 0          
                },
                Left: {
                    frame: [new Obiect.helpers.Player(img,0,128,64,128),new Obiect.helpers.Player(img,64,128,64,128),
                                  new Obiect.helpers.Player(img,0,128,64,128),new Obiect.helpers.Player(img,128,128,64,128)],
                    frameCount: 0          
                }
            };
            this.state = {
                walking: {
                    move: function() {
                        if(self.direction === "right") {
                            self.posX+=self.velX;
                        } else if(wnetrze.kierunek === "left") {
                            self.posX-=self.velX;
                        }
                    },
                    
                    animation: function(data) {
                        if(self.direction === "right") {
                            if(data.NumberOfFrame % 5 === 0) {
                                self.image = self.animationFrame.Right.frame[self.animationFrame.Right.frameCount];
                                self.animationFrame.Right.frameCount++;
                                
                                if(self.animationFrame.Right.frameCount > 3) {
                                    self.animationFrame.Right.frameCount = 0;
                                }                                
                            }
                        } else if(self.direction === "left") {
                            if(data.NumberOfFrame % 5 === 0) {
                                self.image = self.animationFrame.Left.frame[self.animationFrame.Left.frameCount];
                                self.animationFrame.Left.frameCount++;
                                
                                if(self.animationFrame.Left.frameCount > 3) {
                                    self.animationFrame.Left.frameCount = 0;
                                }                                
                            }
                        }
                    }
                }
            };
            this.stateNow = self.state.walking;
            this.direction = "right";
            this.posX = posX;
            this.posY = posY;
            this.sizeW = sizeW;
            this.sizeH = sizeH;
            this.velX = 32;
        }
    }
}

var Engine = {
    ini: function() {
        var pics = new Image();
        pics.src = "img/stylesheet.png";
                
        pics.addEventListener("load", function() {
            var pics = this;
        });

        var data = {
            NumberOfFrame: 0,
            pics: pics
        };
        
        Engine.start(data);
    },
    start: function(data) {
        var z = function() {
            data.NumberOfFrame++;
            
            window.requestAnimationFrame(z);
        };
        
        z();
    }
}

window.onload = Engine.ini();

 

 

14 i 79 linijka kodu.

---

W event listenerze (linia 79) this wskazuje na aktualnie wczytany obrazek (w event listenerach this domyślnie wskazuje na obiekt, do którego listener został doczepiony).

W linii 14 this wskazuje na obiekt stworzony przy pomocy tej funkcji (czyli w czasie wywołania new Player).

---

Okej. Wiem że może jestem trochę upierdliwy, ale chce zrozumieć do końca. Np. w linijce 42 mam komende:

self.image = self.animationFrame.Right.frame[self.animationFrame.Right.frameCount];

Więc skoro self = this;

to zapis powinien być równoważny z 

this.image = this.animationFrame.Right.frame[this.animationFrame.Right.frameCount];

jednak nie jest. Moja animacja działa przy pierwszym zapisie z self, natomiast z this już nie. Dlaczego?

---

A zauważ, gdzie jest to self zadeklarowane: powyżej this.state, więc odnosi się do this wewnątrz Player. Każda funkcja ma swoje własne this (oprócz tzw. arrow functions).

---

Ok. Czyli w tym przypadku this odnosi się do funkcji animation, a self do całego obiektu Mario. Dzięki.