बाबेल आयातित फंक्शन को (0, fn) (…) पर फिर से क्यों लिखता है?


100

जैसी इनपुट फाइल दी

import { a } from 'b';

function x () {
  a()
}

कोलाहल के लिए यह संकलन होगा

'use strict';

var _b = require('b');

function x() {
  (0, _b.a)();
}

लेकिन जब ढीली मोड में संकलित किया जाता है तो फ़ंक्शन कॉल आउटपुट के रूप में होता है _b.a();

मैंने कुछ शोध किए हैं जहां अल्पविराम ऑपरेटर को इस उम्मीद में जोड़ा गया है कि एक टिप्पणी थी जो इसे समझा रही थी। इसे जोड़ने के लिए जिम्मेदार कोड यहां है


4
_b.a.call()इरादा साफ करने के लिए उन्हें ऐसा करना चाहिए था ।
बरगी

@Bergi मुझे यकीन है कि इसका कारण यह है (0,) के साथ स्थानान्तरण कोड में जगह बचाने के लिए है।
एंडी


जवाबों:


138

(0, _b.a)()यह सुनिश्चित करता है कि फ़ंक्शन _b.aको thisवैश्विक ऑब्जेक्ट पर सेट के साथ कहा जाता है (या यदि सख्त मोड सक्षम है, तो undefined)। यदि आपको _b.a()सीधे कॉल करना था , तो सेट टू के _b.aसाथ बुलाया जाता thisहै _b

(0, _b.a)(); के बराबर है

0; // Ignore result
var tmp = _b.a;
tmp();

( ,कॉमा ऑपरेटर है, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator देखें )।


3
लिंक के लिए धन्यवाद। इस पर कई बार पारित किया और अंत में यह पता लगाने का फैसला किया कि क्या हो रहा था।
theflowersoftime

@RobW मुझे लगता var _a = (0, _b.a)है कि फ़ाइल के शीर्ष पर जोड़ना और फिर कॉल _aकरना बहुत सारे मामलों में अधिक स्थान बचाएगा, कोई भी विचार जो उन्होंने नहीं किया?
एंडी

1
@ और आपके सुझाव के साइड इफेक्ट्स हो सकते हैं, उदाहरण के लिए जब _b.aएक (डायनामिक) गेट्टर है।
रोब डब्ल्यू

@RobW मैं देख रहा हूं, इसलिए आप विचार कर रहे हैं कि संभावित दुष्प्रभावों से बचने के लिए जब तक कि फ़ंक्शन को कॉल करने की आवश्यकता न हो।
एंडी

ध्यान दें कि मॉड्यूल हमेशा सख्त कोड होते हैं, इसलिए यह हमेशा होता है this === undefinedऔर आपको वैश्विक वस्तु का उल्लेख करने की भी आवश्यकता नहीं है
बर्गी

22

अल्पविराम ऑपरेटर अपने प्रत्येक ऑपरेंड (बाएं से दाएं) का मूल्यांकन करता है और अंतिम ऑपरेंड का मान लौटाता है।

console.log((1, 2)); // Returns 2 in console
console.log((a = b = 3, c = 4)); // Returns 4 in console

तो, एक उदाहरण देखते हैं:

var a = {
  foo: function() {
    console.log(this === window);
  }
};

a.foo(); // Returns 'false' in console
(0, a.foo)(); // Returns 'true' in console

अब, fooविधि में, (क्योंकि जुड़ा हुआ है ) के thisबराबर है । इसलिए यदि आप सीधे कॉल करते हैं ), यह कंसोल में लॉग इन करेगा ।afooaa.foo(false

लेकिन, अगर आपको कॉल किया गया था (0, a.foo)()। अभिव्यक्ति (0, a.foo)अपने प्रत्येक ऑपरेंड (बाएं से दाएं) का मूल्यांकन करेगी और अंतिम ऑपरेंड का मान लौटाएगी। दूसरे शब्दों में, (0, a.foo)के बराबर है

function() {
  console.log(this === window);
}

चूंकि यह फ़ंक्शन अब किसी भी चीज़ से जुड़ा नहीं है, thisइसलिए यह वैश्विक वस्तु है window। इसीलिए trueकॉल करते समय कंसोल में लॉग इन करें (0, a.foo)()


console.log(this === window);देव कंसोल में चल रहा है प्रिंट प्रिंट नहीं करता है।
कुशदीप

2
यह मेरे दिमाग को उड़ा रहा था। यहां कुंजी यह है कि कोमा ऑपरेटर "अंतिम ऑपरेंड का मान लौटाता है" - "मूल्य" यहां फ़ंक्शन है जो अपने माता-पिता को अनुपस्थित करता है - इसलिए फू अब अंदर नहीं रहता है।
martinp999
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.