“var FOO = FOO || {}”(변수 또는 해당 변수에 빈 개체 할당)는 Javascript에서 의미합니까?

온라인 소스 코드를 살펴보면 여러 소스 파일 상단에서 이것을 발견했습니다.

var FOO = FOO || {};
FOO.Bar = …;

그러나 나는 무엇을하는지 전혀 모른다 || {}.

나는 그것이 {}같다는 것을 알고 new Object()있고 나는 ||"이미 존재한다면 그 가치를 사용하고 그렇지 않으면 새로운 객체를 사용하라.

소스 파일의 맨 위에 왜 이것을 볼 수 있습니까?

의 의도에 대한 귀하의 추측 || {}은 매우 가깝습니다.

파일 상단에서 볼 때이 특정 패턴은 네임 스페이스 , 즉 전역 객체를 부당하게 오염시키지 않고 함수와 변수를 만들 수있는 명명 된 객체 를 만드는 데 사용됩니다 .

그 이유 이유 는 사용의 너무입니다 당신이 파일을 두가 (또는 그 이상)의 경우 :

var MY_NAMESPACE = MY_NAMESPACE || {};
MY_NAMESPACE.func1 = {
}

과

var MY_NAMESPACE = MY_NAMESPACE || {};
MY_NAMESPACE.func2 = {
}

둘 다 동일한 네임 스페이스를 공유하므로 두 파일이로드되는 순서는 중요하지 않습니다 . 객체 내에서 올바르게 정의 func1되고 func2올바르게 정의 MY_NAMESPACE됩니다.

로드 된 첫 번째 파일 은 초기 개체 를 만들고MY_NAMESPACE 이후에로드 된 파일은 개체 를 증가 시킵니다.

유용하게도 이는 동일한 네임 스페이스를 공유하는 스크립트의 비동기 로드를 허용 하여 페이지로드 시간을 개선 할 수 있습니다. 는 IF <script>태그가 가지고있는 defer속성은있는 그들이 그렇게으로 그 문제도이 수정 위의 설명, 해석됩니다 주문 알 수 없다 설정합니다.

var AEROTWIST = AEROTWIST || {};

기본적으로이 줄은 AEROTWIST변수를 변수 값으로 AEROTWIST설정하거나 빈 객체로 설정하는 것입니다.

이중 파이프 ||는 OR 문이며 OR의 두 번째 부분은 첫 번째 부분이 false를 반환하는 경우에만 실행됩니다.

따라서 AEROTWIST이미 값이있는 경우 해당 값으로 유지되지만 이전에 설정되지 않은 경우 빈 개체로 설정됩니다.

기본적으로 다음과 같이 말하는 것과 같습니다.

if(!AEROTWIST) {var AEROTWIST={};}

도움이 되었기를 바랍니다.

||에 대한 또 다른 일반적인 용도 정의되지 않은 함수 매개 변수에 대한 기본값을 설정하는 것입니다.

function display(a) {
  a = a || 'default'; // here we set the default value of a to be 'default'
  console.log(a);
}

// we call display without providing a parameter
display(); // this will log 'default'
display('test'); // this will log 'test' to the console

일반적으로 다른 프로그래밍에서 동등한 것은 다음과 같습니다.

function display(a = 'default') {
  // ...
}

var FOO = FOO || {};다루는 두 가지 주요 부분이 있습니다.

# 1 재정의 방지

코드를 여러 파일로 분할하고 동료도 FOO. 그러면 누군가 이미 FOO기능을 정의 하고 할당 한 경우 (예 : skateboard기능)로 이어질 수 있습니다 . 그런 다음 이미 존재하는지 확인하지 않으면 재정의합니다.

문제가있는 경우 :

// Definition of co-worker "Bart" in "bart.js"
var FOO = {};

FOO.skateboard = function() {
  alert('I like skateboarding!');
};

// Definition of co-worker "Homer" in "homer.js"
var FOO = {};

FOO.donut = function() {
  alert('I like donuts!');
};

이 경우 skateboard당신은 자바 스크립트 파일을로드하는 경우 기능은 사라질 것입니다 homer.js후 bart.js호머가 새로운 정의 때문에 HTML에 FOO객체를 (따라서 바트에서 기존보다 우선) 그것은 단지에 대해 알 수 있도록 donut기능.

따라서 var FOO = FOO || {};"FOO가 FOO (이미 존재하는 경우)에 할당되거나 새 빈 개체 (FOO가 이미 존재하지 않는 경우)에 할당된다는 의미 를 사용해야 합니다.

해결책:

var FOO = FOO || {};

// Definition of co-worker Bart in bart.js
FOO.skateboard = function() {
  alert('I like skateboarding!');
};

// Definition of co-worker Homer in homer.js
var FOO = FOO || {};

FOO.donut = function() {
  alert('I like donuts!');
};

바트와 호머 지금의 존재 여부를 확인하기 때문에 FOO그들의 방법을 정의하기 전에, 당신은로드 할 수 있습니다 bart.js와 homer.js(서로 다른 이름이있는 경우) 서로 다른 방법을 무시하지 않고 임의의 순서로한다. 그래서 당신은 항상 FOO메소드 skateboard와 donut(Yay!)를 가진 객체를 얻을 것 입니다.

# 2 새 개체 정의

첫 번째 예제를 읽었다면 이미 || {}.

기존 FOO개체 가 없으면 OR 케이스가 활성화되고 새 개체가 생성되므로 여기에 기능을 할당 할 수 있습니다. 처럼:

var FOO = {};

FOO.skateboard = function() {
  alert('I like skateboarding!');
};

AEROTWIST에 값이 없거나 null이거나 정의되지 않은 경우 새 AEROTWIST에 할당 된 값은 {} (빈 개체)입니다.

||오퍼레이터는 두 개의 값을 취

a || b

a가 진실 이면 반환 a됩니다. 그렇지 않으면을 반환 b합니다.

falsy 값은 null, undefined, 0, "", NaN와 false. 진실 된 가치는 그 밖의 모든 것입니다.

따라서 a설정되지 않은 경우 ( undefined그 것인지) 반환 b됩니다.

일부 버전의 IE에서는이 코드가 예상대로 작동하지 않습니다. 때문에 var, 변수는 재정의 하고 있으므로 할당 - 나는 문제를 올바르게 기억하는 경우 - 당신은 항상 새로운 객체를 가지고 될 겁니다. 그러면 문제가 해결됩니다.

var AEROTWIST;
AEROTWIST = AEROTWIST || {};