JavaScript - Borrowing metode


Borrowing metode iz objekta

U JavaScript-u 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. Evo 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.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 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(). Evo primjera:

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