JavaScript - Borrowing metode


Borrowing metode objekta

U JavaScript možete posuđivati metode od drugih objekata da biste izgradili neke funkcije bez nasljeđivanja svih njihovih svojstava i metoda. JavaScript pruža dvije metode za sve objektne funkcije, call() i apply(), koje omogućavaju pozivanje funkcije kao da je to metoda drugog objekta. Pogledajmo primjer:

var objA = {
    name: "objekt A",
    say: function(greet) {
        alert(greet + ", " + this.name);
    }
}

objA.say("Ćao"); // Ispisuje: Ćao, objekt A

var objB = {
    name: "objekt B"
}

/* ObjA nema say() metodu, ali je može posuditi od objA */
objA.say.call(objB, "Pozdrav"); // Ispisuje: Pozdrav, objekt B
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Pozivanje metode</title>
</head>
<body>
    <script> 
    var objA = {
        name: "objekt A",
        say: function(greet) {
            document.write(greet + ", " + this.name);
        }
    }
    
    objA.say("Ćao"); // Ispisuje: Ćao, objekt A
    document.write("<br>");
    
    var objB = {
        name: "objekt B"
    }
    
    /* ObjA nema say() metodu, ali je može posuditi od objA*/
    objA.say.call(objB, "Pozdrav"); // Ispisuje: Pozdrav, objekt B
    </script>
</body>
</html>


Razlika između metoda call() i apply()

Sintaksa metode apply() gotovo je identična call(), jedina razlika je u tome što metoda call() uzima listu argumenata poput call(thisObj, arg1, arg2,...), dok metoda apply() uzima jedan niz argumenata poput apply(thisObj, [argsArray]). Primijetite uglate zagrade ([]), koje označavaju niz, u posljednjem redu sljedećeg primjera:

var objA = {
    name: "objekt A",
    say: function(greet) {
        alert(greet + ", " + this.name);
    }
}

objA.say("Ćao"); // Ispisuje: Ćao, objekt A

var objB = {
    name: "objekt B"
}

/* ObjA nema say() metodu, ali je može posuditi od objA */
objA.say.apply(objB, ["Pozdrav"]); // Ispisuje: Pozdrav, objekt B
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Apply metoda</title>
</head>
<body>
    <script> 
    var objA = {
        name: "objekt A",
        say: function(greet) {
            document.write(greet + ", " + this.name);
        }
    }
    
    objA.say("Ćao"); // Ispisuje: Ćao, objekt A
    document.write("<br>");
    
    var objB = {
        name: "objekt B"
    }
    
    /* ObjA nema say() metodu, ali je može posuditi od objA*/
    objA.say.apply(objB, ["Pozdrav"]); // Ispisuje: Pozdrav, objekt B
    </script>
</body>
</html>


Korištenje ugrađenih metoda

Metoda apply() takođe vam omogućava da koristite ugrađene metode za brzo i jednostavno obavljanje nekih zadataka. Jedan od takvih primjera je upotreba Math.max() / Math.min() za pronalaženje maksimalne ili minimalne vrijednosti u nizu, koja bi inače zahtijevala petlju preko vrijednosti niza. Kao što već znate iz prethodnih lekcija, JavaScript nizovi nemaju max() metodu, ali metoda Math ima, tako da možemo primijeniti metodu Math.max(), ovako:

var numbers = [2, 5, 6, 4, 3, 7];

// Koriđtenje Math.max apply
var max = Math.max.apply(null, numbers);
alert(max); // Ispisuje: 7
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Primijena ugrađenih metode</title>
</head>
<body>
    <script> 
    var numbers = [2, 5, 6, 4, 3, 7];

    // Korištenje Math.max apply
    var max = Math.max.apply(null, numbers);
    document.write(max); // Ispisuje: 7
    document.write("<br>");
    
    var min = Math.min.apply(null, numbers);
    document.write(min); // Ispisuje: 2
    </script>
</body>
</html>

Novi ES6 operator širenja pruža kraći način za dobijanje maksimalne ili minimalne vrijednosti iz niza bez upotrebe metode apply(). Pogledajmo primjer:

var numbers = [2, 5, 6, 4, 3, 7];

// Korištenje reduce metode
var max = Math.max(...numbers);
alert(max); // Ispisuje: 7

Međutim, i spread(...) (širenje) i apply() ili neće uspjeti ili će vratiti netačan rezultat ako niz ima previše elemenata (npr. desetinke hiljade). U tom slučaju možete koristiti Array.reduce() da biste pronašli maksimalnu ili minimalnu vrijednost u numeričkom nizu, upoređujući svaku vrijednost, ovako:

var numbers = [2, 5, 6, 4, 3, 7];

// Korištenje reduce metode
var max = numbers.reduce(function(a, b) {
    return Math.max(a, b);
});
alert(max); // Ispisuje: 7