Javascript의 void 연산자에 대해 이야기해 보세요.

JS 표현은 번거로운 편이라 부담을 줄이고자 최근 Coffeescript를 사용하기 시작했습니다. 예를 들어, 집에 있는 첫 번째 개를 검색하려면 먼저 집 개체가 존재하는지 확인한 다음 house.dogs가 존재하는지 확인하고 마지막으로 house.dogs[0]을 검색해야 합니다. JS에서는 이렇게 써야 합니다

var dog = (typeof house !== 'undefined && house !== null) && house.dogs && house.dogs[0]

Coffee에서는 이렇게만 쓰면 됩니다

dog = house?.dogs?[0];

이쯤 되면 독자들은 이런 게 있느냐고 묻겠죠. "Javascript의 void"라는 제목과 관련이 있습니까? Coffee의 본질은 JS입니다. Coffee가 이렇게 잘 작동하는 이유는 효율적이고 견고한 JS 코드를 생성하기 때문입니다.

var dog, _ref;
dog = typeof house !== "undefined" && house !== null ? (_ref = house.dogs) != null ? _ref[0] : void 0 : void 0;

커피 코드 한 줄만으로도 이렇게 긴 JS 코드가 생성되었는데, 이는 앞서 JS에서 작성한 것보다 더 안정적이고 안전한 것 같습니다. 끝에도 void 0이 두 개 있습니다. 이거요?

위의 예를 구성하세요.

dog = (typeof house !== "undefined" && house !== null) ? 
        ((_ref = house.dogs) != null ? _ref[0] : void 0 ) 
        : void 0;

house가 정의되지 않거나 house가 null인 경우 void 0을 반환합니다.

house.dogs가 null인 경우 void 0을 반환합니다.

그러나 void 0의 값은 무엇입니까? 이것은 테스트하기 쉽습니다:

typeof void 0 //得到"undefined"console.log(void 0) //输出undefined

void 0이 정의되지 않은 것 같지만 이 방법은 너무 거칠고 충분히 엄격하지 않습니다. 답변: void 100, void hello(), void i++의 수많은 가능한 조합의 값은 무엇입니까?

기준이 무엇인지 살펴보겠습니다.

사양에 이렇게 나와 있습니다

ECMAScript 262 사양에는 다음과 같은 설명이 있습니다.

The void Operator
The production UnaryExpression : void UnaryExpression is evaluated as follows:
Let expr be the result of evaluating UnaryExpression.
Call GetValue(expr).
Return undefined.
NOTE: GetValue must be called even though its value is not used because it may have observable side-effects.

번역:

void操作符
产生式 UnaryExpression : void UnaryExpression 按如下流程解释:
令 expr 为解释执行UnaryExpression的结果。
调用 GetValue(expr).
返回 undefined.
注意：GetValue一定要调用，即使它的值不会被用到，但是这个表达式可能会有副作用(side-effects)。

키 요점은: void 뒤의 표현식이 무엇이든 void 연산자는 정의되지 않은 값을 반환하므로 위의 Coffee에서 컴파일한 코드를 다음과 같이 생각할 수 있습니다.

dog = (typeof house !== "undefined" && house !== null) ? 
        ((_ref = house.dogs) != null ? _ref[0] : undefined ) 
        : undefined ;

문제는 (void 0) === unundefined, 그냥 unundefined라고 쓰면 충분하지 않을까요?

왜 void를 사용하나요?

정의되지 않음은 자바스크립트의 예약어가 아니기 때문입니다. 즉, 다음과 같이 작성할 수 있습니다.

function joke() {
    var undefined = "hello world";
    console.log(undefined); //会输出"hello world"
}
console.log(undefined); //输出undefined

예, 함수 컨텍스트에서 변수 이름으로 undefine을 사용할 수 있으므로 이 컨텍스트에서 작성된 코드는 전역 범위에서만 undefound로 검색할 수 있습니다. , 예:

window.undefined //浏览器环境
GLOBAL.undefined //Node环境

그러나 window인 경우에도 GLOBAL은 여전히 ​​함수 컨텍스트에서 정의될 수 있으므로 window/GLOBAL에서 정의되지 않은 것을 얻는 것은 100% 신뢰할 수 없습니다. 예를 들면 다음과 같습니다.

function x() {
   var undefined = 'hello world',
       f = {},
       window = {
           'undefined': 'joke'
       };
   console.log(undefined);// hello world
   console.log(window.undefined); //joke
   console.log(f.a === undefined); //false
   console.log(f.a === void 0); //true
}

따라서 void를 사용하여 정의되지 않은 값을 얻는 것이 일반적인 규칙이 되었습니다. 예를 들어 underscore.js의 isUndefine은 다음과 같이 작성됩니다.

_.isUndefined = function(obj) {
    return obj === void 0;
}

정의되지 않은 값을 얻기 위해 void를 사용하는 것 외에 다른 방법이 있나요? 예, 또 다른 방법은 함수 호출을 이용하는 것입니다. 예를 들어 AngularJS의 소스 코드는 다음 메서드를 사용합니다.

(function(window, document, undefined) {    //.....
})(window, document);

매개 변수를 전달하지 않으면 정의되지 않은 매개 변수의 값이 정의되지 않음이 보장됩니다.

기타 기능

undefine을 취하는 것 외에 void를 다른 용도로 사용할 수 있는 방법이 있나요?

href를 채우는 공통 함수도 있습니다. 아래는 Weibo의 스크린샷입니다. 재게시물, 컬렉션 및 토론은 모두 하이퍼링크이지만 사용자는 이를 클릭하면 다른 페이지로 이동할 것이라고 기대하지 않지만 일부 대화형 작업이 실행됩니다.

이론적으로 이 3개의 하이퍼링크에는 URL이 없지만, 쓰지 않으면 ㅎㅎ 클릭하면 전체 페이지가 새로고침됩니다. 그래서 우리는 href="javascript:void(0)를 사용하여 클릭하면 완전히 지루한 void(0)가 실행되도록 했습니다.

또 다른 상황은 src 이미지에 대해 비어 있는 src 이미지를 생성하려는 경우입니다. src='javascript:void(0)'인 것 같습니다

마지막에 작성

void의 정의로 돌아가서 특히 헷갈리는 문장이 있습니다.

참고: 해당 값이 사용되지 않더라도 GetValue를 호출해야 하지만 이 표현식에는 부작용이 있을 수 있습니다

.

这是什么意思？这表示无论void右边的表达式是什么，都要对其求值。这么说可能不太明白，在知乎上winter大神有过阐述关于js中void，既然返回永远是undefined，那么GetValue有啥用？，我且拾人牙慧，代入一个场景，看代码：

var happiness = 10;
var girl = {
    get whenMarry() {
        happiness--;
        return 1/0; //Infinity
    },
    get happiness() {
        return happiness;
    }
};

console.log(girl.whenMarry); //调用了whenMarry的get方法
console.log(girl.happiness); // 9

void girl.whenMarry; //调用了whenMarry的get方法
console.log(girl.happiness); // 8

delete girl.whenMarry; //没有调用whenMarry的get方法
console.log(girl.happiness); //还是8

上述代码定义了一个大龄文艺女青年，每被问到什么时候结婚呀(whenMarry)，happiness都会减1。从执行情况可以看出，无论是普通访问girl.whenMarry，还是void girl.whenMarry都会使她的happiness--。而如果把void换成delete操作符写成delete girl.whenMarry，她的happiness就不会减了，因为delete操作符不会对girl.whenMarry求值。