빈 프로토 타입으로 객체 교체

Question

일부 데이터는 빈 값을 갖는 키 세트가있는 객체로 대체하여 플러시하려고합니다.

하나 sportScratchpad의의 값이 변경됩니다 때마다

const sportPrototype = { 
    name: '', 
    players: '', 
    displacement: '', 
    points: '', 
    leagues: [] 
} 

var profileScratchpadOne = { 
    sportScratchpad: { 
    name: 'Soccer', 
    players: '16', 
    displacement: 'Foot', 
    points: 'unlimited', 
    leagues: ["Fifa"] 
    } 
} 

profileScratchpadOne.sportScratchpad = sportPrototype 
profileScratchpadTwo.sportScratchpad = sportPrototype 

, 그것은 profileScratchpadOne 및 profileScratchpadTwo 모두 않습니다.

나는 참조가 통과되고 있다고 생각한다.

저는 스프레드 연산자, 프로토 타입, 생성자를 조사했으며 방탄적이고 간결한 접근법을 아직 찾지 못했습니다.

이 문제를 해결하고 매번 새로운 개체를 전달하는 가장 간결한 방법은 무엇입니까?

Answer 1

으로 Object.assign()는 개체의 단순 복사본을 만들 수있는 하나의 방법입니다. 그러나

const sportPrototype = { 
 
    name: '', 
 
    players: '', 
 
    displacement: '', 
 
    points: '', 
 
    leagues: [] 
 
} 
 

 
var profileScratchpadOne = { 
 
    sportScratchpad: { 
 
    name: 'Soccer', 
 
    players: '16', 
 
    displacement: 'Foot', 
 
    points: 'unlimited', 
 
    leagues: ["Fifa"] 
 
    } 
 
} 
 

 
var profileScratchpadTwo = {} 
 

 
profileScratchpadOne.sportScratchpad = Object.create(sportPrototype) 
 
profileScratchpadTwo.sportScratchpad = Object.create(sportPrototype) 
 

 
console.log(sportPrototype.name); 
 
console.log(profileScratchpadOne.sportScratchpad.name); 
 
console.log(profileScratchpadTwo.sportScratchpad.name); 
 

 
profileScratchpadOne.sportScratchpad.name = 'Jai Alai' 
 
profileScratchpadTwo.sportScratchpad.name = 'Curling' 
 

 
console.log(sportPrototype.name); 
 
console.log(profileScratchpadOne.sportScratchpad.name); 
 
console.log(profileScratchpadTwo.sportScratchpad.name);

모두 Object.create : 또 다른 옵션은 새 개체의 속성에 값을 할당하는 프로토 타입의 속성을 덮어 쓰지 않도록 Object.create(), "랩"객체를 사용하는 것입니다 그리고 Object.assign은 leagues 속성에 문제가있을 수 있습니다. 이는 참조 형식이므로 변경할 경우 요소를 추가하여 모든 복사본간에 공유됩니다. 따라서 프로토 타입을 복사 할 때 leagues (및 기타 참조 유형 속성)에 대해 새 빈 배열을 만들어야합니다.

당신은 같은 공장 기능이 돌볼 수 :

function sportDefaults() { 
    var newObj = Object.create(sportPrototype); 
    newObj.leagues = []; 

    return newObj; 
} 

profileScratchpadOne.sportScratchpad = sportDefaults() 

편집 :Object.create의 장점은 필요에 따라 생성 원래 프로토 타입 및 새로운 특성의 사본이 있다는 것입니다 이것은 메모리를 절약합니다. 메모리에 관심이있는 모든 사람이 아니라면 매번 새로운 프로토 타입을 반환하는 함수를 만들 수 있습니다. 이 참조 형식으로 상기 문제를 회피 것 : 여기서 일 것이다

function sportDefaults() { 
 
    return { 
 
    name: '', 
 
    players: '', 
 
    displacement: '', 
 
    points: '', 
 
    leagues: [] 
 
    } 
 
} 
 

 
var profileScratchpadOne = {} 
 
var profileScratchpadTwo = {} 
 

 
profileScratchpadOne.sportScratchpad = sportDefaults() 
 
profileScratchpadTwo.sportScratchpad = sportDefaults() 
 

 
console.log('- before assignment') 
 
console.log(profileScratchpadOne.sportScratchpad.name) 
 
console.log(profileScratchpadTwo.sportScratchpad.name) 
 

 
profileScratchpadOne.sportScratchpad.name = 'Jai Alai' 
 
profileScratchpadTwo.sportScratchpad.name = 'Curling' 
 

 
console.log('- after assignment') 
 
console.log(profileScratchpadOne.sportScratchpad.name) 
 
console.log(profileScratchpadTwo.sportScratchpad.name)

Answer 2

편집 : sportPrototype에 적어도 하나의 객체 (배열)가 있기 때문에 얕은 사본이 올바른 선택이 아닙니다. 간단한 깊은 복사본을 선택할 수 있습니다 : 다른 언급

function deepCopy(o) { 
    return JSON.parse(JSON.stringify(o)); 
} 

const sportPrototype = { 
    name: '', 
    players: '', 
    displacement: '', 
    points: '', 
    leagues: [] 
} 

var profileScratchpadOne = { 
    sportScratchpad: { 
    name: 'Soccer', 
    players: '16', 
    displacement: 'Foot', 
    points: 'unlimited', 
    leagues: ["Fifa"] 
    } 
} 

profileScratchpadOne.sportScratchpad = deepCopy(sportPrototype); 
profileScratchpadTwo.sportScratchpad = deepCopy(sportPrototype); 

Answer 3

Object.assign 있지만, 객체는 여전히 같은 leagues 배열을 공유 할 것입니다. 기본 유형의 속성 만 별도의 수명을 유지합니다. 당신은 깊은 복사를 수행하는 함수를 찾을 수있는,하지만 난 당신이 생성자 패턴을 사용할 수 있습니다이 경우 생각 : 완전히 독립적 인 객체를 생성합니다

function SportPrototype() { 
    this.name = ''; 
    this.players = ''; 
    this.displacement = ''; 
    this.points = ''; 
    this.leagues = []; 
} 

var profileScratchpadOne = {}; 
var profileScratchpadTwo = {}; 

var o = new SportPrototype(); 
o.name = 'Soccer'; 
o.players = '16'; 
o.displacement = 'Foot'; 
o.points = 'unlimited'; 
o.leagues = ["Fifa"]; 
profileScratchpadOne.sportScratchpad = o; 

profileScratchpadOne.sportScratchpad = new SportPrototype(); 
profileScratchpadTwo.sportScratchpad = new SportPrototype(); 

이제

마지막 두 과제를.