JavaScript Academy · Lektion

Säker objektsammanslagning, frysning och försegling

Slå samman objekt utan överraskningar, undvik prototype pollution och skydda data med Object.freeze och Object.seal.

Lektion 2 av 38 steg

Säker objektsammanslagning, frysning och försegling är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 2 av 3. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 3 lektioner.

Varför säker merge?

Mål: Slå ihop säkert och skydda tillståndet.

  • Gör en ytlig merge med spread eller Object.assign
  • Undvik prototype pollution genom att filtrera nycklar
  • Använd Object.create(null) för säkra målobjekt
  • Använd freeze och seal för att låsa objekt
Säker objektsammanslagning, frysning och försegling — illustration 1

Ytlig merge (spread)

Använd spread eller Object.assign({}, a, b) för att skapa ett nytt objekt. Ändra inte indataobjekten.

// Shallow merge with spread keeps sources unchanged
const a = { x: 1, y: 2 };
const b = { y: 9, z: 3 };

// Later keys win on conflicts
const merged1 = { ...a, ...b };

console.log("a:", a);
console.log("b:", b);
console.log("merged1:", merged1);
Säker objektsammanslagning, frysning och försegling — illustration 2

Undvik prototype pollution

När nycklar kommer utifrån ska du skriva en liten allowlist/denylist och använda Object.create(null) som målobjekt.

// Avoid prototype pollution: use a null-prototype target and skip special keys
function safeMergeUntrusted(pairs) {
  // target has no prototype
  const out = Object.create(null);

  // keys to skip
  const BLOCK = new Set(["__proto__", "prototype", "constructor"]);

  for (const [k, v] of pairs) {
    if (typeof k !== "string") continue;
    if (BLOCK.has(k)) continue;
    out[k] = v;
  }
  return out;
}

const inputPairs = [
  ["name", "Ayla"],
  ["__proto__", { hacked: true }],
  ["role", "user"]
];

const safe = safeMergeUntrusted(inputPairs);

console.log("safe.name:", safe.name);
console.log("safe.role:", safe.role);
console.log("safe.__proto__ is undefined?", safe.__proto__ === undefined);
Säker objektsammanslagning, frysning och försegling — illustration 3

Klona + assign

Object.assign({}, ...) är ett säkert mönster som nybörjare lätt kan läsa.

// Object.assign can also create a new object
const base = { a: 1, b: 2 };
const patch = { b: 5 };

// New object as first arg → sources untouched
const merged2 = Object.assign({}, base, patch);

console.log("base:", base);
console.log("patch:", patch);
console.log("merged2:", merged2);
Säker objektsammanslagning, frysning och försegling — illustration 4

Freeze jämfört med seal

freeze blockerar alla ändringar, medan seal blockerar att egenskaper läggs till eller tas bort men tillåter uppdatering av befintliga egenskaper.

// Freeze: no add/remove/change
const frozen = Object.freeze({ id: 1, tag: "locked" });
// Seal: no add/remove, but you may change existing values
const sealed = Object.seal({ id: 2, tag: "open" });

// Attempts (silently fail in non-strict mode)
frozen.tag = "new";
sealed.tag = "updated";
sealed.newKey = 123;

console.log("frozen:", frozen);
console.log("sealed:", sealed);
Säker objektsammanslagning, frysning och försegling — illustration 5

Säkra mergevanor

Tips:

  • Föredra nya objekt: {...a, ...b} eller Object.assign({}, a, b).
  • För opålitliga nycklar: använd Object.create(null) och hoppa över __proto__, prototype och constructor.
  • Skydda konfigurationer med Object.freeze och modeller med Object.seal.
Säker objektsammanslagning, frysning och försegling — illustration 6

Quiz: grunderna i prototype pollution

Snabb kontroll: Det säkraste målobjektet vid merge med opålitliga data.

Säker objektsammanslagning, frysning och försegling — illustration 7

Sammanfattning

Sammanfattning: Skapa nya objekt när du gör merge, filtrera opålitliga nycklar och använd freeze/seal för att skydda viktiga datastrukturer.

Säker objektsammanslagning, frysning och försegling — illustration 8
Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
59
Lektioner
200

Vanliga frågor

Är lektionen ”Säker objektsammanslagning, frysning och försegling” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Säker objektsammanslagning, frysning och försegling”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 3 lektioner.

Vad lär jag mig i ”Säker objektsammanslagning, frysning och försegling”?

Slå samman objekt utan överraskningar, undvik prototype pollution och skydda data med Object.freeze och Object.seal. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 3.

Hur lång tid tar lektionen ”Säker objektsammanslagning, frysning och försegling”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Indatavalidering och grunderna i escaping
  2. Säker objektsammanslagning, frysning och försegling
  3. Feldomäner (konceptuellt) utan ramverk
← Tillbaka till JavaScript Academy