ECMAScript 6 – Klasser og pilfunksjoner – Pilfunksjon

View Github Repository Open presentation in a new window

haraldringvold

See all presentation from haraldringvold

ECMAScript 6 – Klasser og pilfunksjoner – Pilfunksjon

0 0

es6-lyntale

On Github haraldringvold / es6-lyntale

ECMAScript 6

Klasser og pilfunksjoner

Harald Ringvold / @harrir

Tilbakemelding: http://bit.ly/klasseogpil

=>

(pilfunksjon, arrow function)

Pilfunksjon

  • Leksikalsk binding av this: Verdien av this er faktisk det du trodde den skulle være.
  • Kan ikke new-es: Kan ikke brukes som konstruktør og vil kaste en feil om den brukes med new.
  • Kan ikke endre this: Verdien av this inne i funksjonen kan ikke endres. Den er det samme gjennom hele funksjonens livssyklus.
leksikalsk, (lat. lexicalis, af gr. leksikon), vedr. et ords grundbetydning, dvs. den betydning, der opfattes som konstant, i modsætning til de varierende betydningsnuancer, som skyldes konteksten. - Det Store Danske (leksikon)

Et parameter

            
var reflect = value => value;

// effectively equivalent to:

var reflect = function(value) {
    return value;
};

Flere parameter

            
var sum = (num1, num2) => { return num1 + num2; }

// effectively equivalent to:

var sum = function(num1, num2) {
    return num1 + num2;
};

Inni curly braces: Mer eller mindre likt som insiden av en vanlig funksjon.

Uten parametere

            
var sum = () => 1 + 2;

// effectively equivalent to:

var sum = function() {
    return 1 + 2;
};

Returnere 'object literals'

            
var getTempItem = id => ({ id: id, name: "Temp" });

// effectively equivalent to:

var getTempItem = function(id) {

    return {
        id: id,
        name: "Temp"
    };
};

Mer eksempeler?

jaokda!

              
var PageHandler = {

    id: "123456",

    init: function() {
        document.addEventListener("click", function(event) {
            this.doSomething(event.type);
        }, false);
    },

    doSomething: function(type) {
        console.log("Handling " + type  + " for " + this.id);
    }
};
            
            
              
var PageHandler = {

  id: "123456",

  init: function() {
      document.addEventListener("click", (function(event) {
          this.doSomething(event.type);
      }).bind(this), false);
  },

  doSomething: function(type) {
      console.log("Handling " + type  + " for " + this.id);
  }
};

Pilfunksjon

              
var PageHandler = {

  id: "123456",

  init: function() {
      document.addEventListener("click",
              event => this.doSomething(event.type), false);
  },

  doSomething: function(type) {
      console.log("Handling " + type  + " for " + this.id);
  }
};

Kjekt å vite

  • Operatøren typeof returnerer "function" for pilfunksjoner.
  • Pilfunksjoner er fortsatt et instans av Function så instanceof funkerer som tidligere.
  • Metodene call(), apply(), and bind() kan fortsatt brukes men endrer ikke this
  • Foreløpig bare støttet av Firefox

class

ES6-klasser er enkel syntaktisk sukker over prototyp-basert OO-teknikk.

En praktisk deklarativ form som uttrykker programmererens hensikt i stedet for den underliggende maskineriet.

Javascripts konstruktør funksjoner, prototyper og instanser er mer en nok til å løse det klasser gjør i andre språk.

ES6 klasser er disse tre under panseret.

Utkast, fortsatt i endring. Siste endring var rev. 28, 14. oktober

            
var Language = function(config) {
  this.name = config.name;
  this.founder = config.founder;
  this.year = config.year;
};

Language.prototype.summary = function() {
  return this.name + " was created by " + this.founder + " in " + this.year;
};
            
          
              
class Language {
  constructor(name, founder, year) {
    this.name = name;
    this.founder = founder;
    this.year = year;
  }

  summary() {
    return this.name + " was created by " + this.founder + " in " + this.year;
  }
}
              
            
              
class MetaLanguage extends Language {
  constructor(x, y, z, version) {
    super(x, y, z);
    this.version = version;
  }

  static isItMeta() {
    return "YEEEEESH!" ;
  }
}

Kjekt å vite

Spørsmål..

..svares etter beste evne.

Takk for meg! :)

Husk å gi tilbakemelding!

bit.ly/klasseogpil

Kilder

Pilfunksjoner

Klasser