Objekter i JavaScript

Hva

Nedenfor skal vi se litt på noen av de sentrale karakteristika ved objekter i JavaScript. Hensikten er primært å gjøre objektorientert programmering tilgjengelig som praktisk verktøy i JavaScript, bidra til en forståelse av hvordan JS-biblioteker er bygget opp og hvordan vi bruker dem.

I modulen Klasser skal vi se mer på hvordan vi kan lage klasser, og objekter (forekomster) av våre egendefinerte klasser.

Objekter

Vi kan lage et enkelt objekt, ikke en klasse, på følgende enkle måte:

var ole={
 navn:"ole olsen",
 adresse:"moss",
}

var T=ole.navn+' fra '+ole.adresse;

vil gi T : ole olsen fra moss

Vi kan gjøre slik:

var pedersen={
 "navn":"pedersen",
 "adresse":"moss",
 "alder":58
}

var T=pedersen.alder;

vil gi T : 58

Vi kan også gjøre slik:

var per={
 navn:"per pettersen",
 adresse:"sarp",
 showMe:function(){return this.navn+' fra '+this.adresse;}
}

var T=per.showMe();

vil gi T : per pettersen fra sarp
og vi må bruke this i funksjonen for å angi at det er dette objektets verdier vi skal ha tak i.

Hvis vi ser nærmere på formen vi har gitt til objektene,

{
 name:value,
 name:value,
}

så er det den samme formen som vi har som utgangspunkt når vi skal produsere JSON-tekst, se modulen JSON . Det betyr, uten at det er viktig i denne sammenhengen, at dersom vi har et objekt uten funksjoner, skal vi kunne klone objektet ole slik:

var jens=JSON.parse(JSON.stringify(ole));

Objekter som parameter

Vi kan bruke objekter som parametere. Det gir oss en fleksibel måte å operere med et variablet antall verdier til en funksjon.

Antall "name:value"-par vil variere. Det er lett for mottageren å sjekke om en egenskap er satt ved ganske enkelt å spørre:

if (ole.showMe)
 alert(ole.showme())

Dersom en verdi ikke er satt vil vi vanligvis bruke en default verdi

La oss se på følgende enkle eksempel:

function changeP(Inp){
  var element=document.getElementById(Inp.id);
  if(element){
    if(Inp.color)
      element.style.color=color;
    if(Inp.text)
      element.innerHTML=text;
  }
}

Og vi kan kalle på flere måter

 changeP({id:'hei'})
 changeP({id:'hei', color:'red'})
 changeP({id:'hei', color:'green', text:'Hurra'})
 changeP({id:'hei',text:'Heisann'})

Prøv (rekkefølge som over):

Dette er den samme formen vi f.eks. vil vi initiere et AJAX-kall i JQuery, se modulen jQuery , med noe slikt:

$.ajax(
{
 url:address,
 async=False,
 success:function(data){
  // do something
 },
 error:function(data){
  // do something else
 },
}
);

Merk at her setter vi også funksjoner. Mottageren, JQuery, er litt annerledes enn vår enkle eksempel, se mer om dette modulen Klasser

Objekter som returverdi

Vi kan også bruke objekter som returverdi fra en funksjon. La oss se på et enkelt eksempel. Vi vi lage en funksjon som regner ut areal og omkrets av et rektangel.

function beregnRect(bredde,hoyde){
  return({areal:bredde*hoyde,
          omkrets:2*(bredde+hoyde)})
}

og vi kan bruke den slik:

resultat= beregnRect(3,4);
var a=resultat.areal;
var om=resultat.omkrets;

Eller vi kan jo ha følgende konstruksjon:

function beregnRect(R){
  return({areal:R.bredde*R.hoyde,
          omkrets:2*(R.bredde+R.hoyde)})
}
var R={bredde:3,hoyde:4};
resultat= beregnRect(R);
var a=resultat.areal;
var om=resultat.omkrets;

Vi finner denne mekanismen med retur av objekter i flere funksjoner, f.eks. i funksjonen getBoundingClientRect() som er tilgjengelig i alle elementer. Funksjonen returnerer top,left, bottom,right.

var rect = element.getBoundingClientRect();
var bredden=rect.right-rect.left;

( Merk forøvrig at denne funksjonen i noen situasjoner er litt mer komplisert å bruke enn en skulle tro fordi den er avhengig av scrolling og egenskaper ved foreldrenodene, se f.eks. [1] . )

Referanser

Get an Element's Position Using JavaScript KIRUPA www.kirupa.com/html5/get_element_position_using_javascript.htm 03-09-2016