Osztály vs Gyár funkció: a továbblépés feltárása

A BookAuthority a Discover Functional JavaScript- et az egyik legjobb új funkcionális programozási könyvnek nevezte el !

Az ECMAScript 2015 (más néven ES6) a classszintaxissal érkezik , így most két versengő mintánk van az objektumok létrehozására. Összehasonlításukhoz létrehozom ugyanazt az objektumdefiníciót (TodoModel), mint egy osztályt,majd gyári funkcióként.

A TodoModel mint osztály

class TodoModel { constructor(){ this.todos = []; this.lastChange = null; } addToPrivateList(){ console.log("addToPrivateList"); } add() { console.log("add"); } reload(){} }

A TodoModel mint gyári funkció

function TodoModel(){ var todos = []; var lastChange = null; function addToPrivateList(){ console.log("addToPrivateList"); } function add() { console.log("add"); } function reload(){} return Object.freeze({ add, reload }); }

Egységbezárás

Először azt vesszük észre, hogy az osztályobjektum összes tagja, mezője és metódusa nyilvános.

var todoModel = new TodoModel(); console.log(todoModel.todos); //[] console.log(todoModel.lastChange) //null todoModel.addToPrivateList(); //addToPrivateList

A beágyazás hiánya biztonsági problémákat okozhat. Vegyünk egy példát egy globális objektumra, amelyet közvetlenül a Developer Console-ból lehet módosítani.

A gyári funkció használatakor csak az általunk kitett módszerek nyilvánosak, minden más be van zárva.

var todoModel = TodoModel(); console.log(todoModel.todos); //undefined console.log(todoModel.lastChange) //undefined todoModel.addToPrivateList(); //taskModel.addToPrivateList is not a function

ez

thisa kontextus elvesztésével kapcsolatos problémák továbbra is fennállnak az osztály használata során. Például thiselveszíti a kontextust a beágyazott függvényekben. Ez nemcsak a kódolás során bosszantó, hanem a hibák állandó forrása is.

class TodoModel { constructor(){ this.todos = []; } reload(){ setTimeout(function log() { console.log(this.todos); //undefined }, 0); } } todoModel.reload(); //undefined

vagy thiselveszíti a kontextust, amikor a módszert visszahívásként használják, például egy DOM eseményhez.

$("#btn").click(todoModel.reload); //undefined

Gyári funkció használatakor nincs ilyen probléma, mivel egyáltalán nem használja this.

function TodoModel(){ var todos = []; function reload(){ setTimeout(function log() { console.log(todos); //[] }, 0); } } todoModel.reload(); //[] $("#btn").click(todoModel.reload); //[]

ez és a nyíl funkció

A nyíl függvény részben megoldja az thisosztályok elvesztő kontextusproblémáit, ugyanakkor új problémát hoz létre:

  • this már nem veszíti el a kontextust a beágyazott függvényekben
  • this elveszíti a kontextust, amikor a módszert visszahívásként használják
  • a nyíl funkció elősegíti az anonim függvények használatát

Átdolgoztam a TodoModelnyíl funkció használatát. Fontos megjegyezni, hogy a nyílfüggvény visszafejlesztése során elveszíthetünk az olvashatóság szempontjából nagyon fontos valamit, a függvény nevét. Nézze meg például:

//using function name to express intent setTimeout(function renderTodosForReview() { /* code */ }, 0); //versus using an anonymous function setTimeout(() => { /* code */ }, 0);

Fedezze fel a funkcionális JavaScript- et nevezték el az egyika BookAuthority legjobb új funkcionális programozási könyvei !

Ha többet szeretne megtudni a funkcionális programozási technikák alkalmazásáról a React-ben, tekintse meg a Functional React cikket .

Tanulja meg a funkcionális React projekt alapú módon, a React és Redux funkciós architektúrával .

Kövesse a Twitteren