জাভাস্ক্রিপ্ট ফাংশন ক্রম: কেন এটি গুরুত্বপূর্ণ?


106

আসল প্রশ্ন:

আমার জাভাস্ক্রিপ্ট কল করার চেয়ে পৃষ্ঠায় আরও নীচে সংজ্ঞায়িত এমন ফাংশনটিকে কল করে যখন জেএসহিন্ট অভিযোগ করে। তবে, আমার পৃষ্ঠাটি একটি গেমের জন্য, এবং পুরো জিনিসটি ডাউনলোড না হওয়া পর্যন্ত কোনও ফাংশন কল করা হয় না। তাহলে কেন আমার কোড বিষয়ে অর্ডার ফাংশন উপস্থিত হয়?

সম্পাদনা: আমার ধারণা আমি উত্তরটি খুঁজে পেয়েছি।

http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting

আমি ভিতরে ক্রন্দন করছি। দেখে মনে হচ্ছে ছয় হাজার লাইনের কোডের পুনরায় অর্ডার দেওয়ার জন্য আমার আর কোনও দিন ব্যয় করতে হবে। জাভাস্ক্রিপ্ট সহ শেখার বক্ররেখা মোটেও খাড়া নয়, তবে এটি খুব লুওউওং।


আপডেটে দুর্দান্ত রেফারেন্সের জন্য +1। এবং আমি আশা করি যে আপনাকে সত্যই নিশ্চিত করে যে আপনার কোডটি পুনরায় অর্ডার করার দরকার নেই। :)
এএমএম

উত্তর:


294

tl; dr যদি আপনি সবকিছু লোড না করা পর্যন্ত কিছু কল না করেন, আপনার ভাল হওয়া উচিত।


সম্পাদনা করুন: একটি সংক্ষিপ্তসার জন্য যা কিছু ES6 ঘোষণাপত্রও অন্তর্ভুক্ত করে ( let, const): https://developer.mozilla.org/en-US/docs/Web/JavaScript/References/Scope_Cheatsheet

এই অদ্ভুত আচরণ উপর নির্ভর করে

  1. আপনি কীভাবে কার্যকারিতা সংজ্ঞায়িত করেন এবং
  2. আপনি যখন তাদের কল।

এখানে কিছু উদাহরণ।

bar(); //This won't throw an error
function bar() {}

foo(); //This will throw an error
var foo = function() {}
bar();
function bar() {
    foo(); //This will throw an error
}
var foo = function() {}
bar();
function bar() {
    foo(); //This _won't_ throw an error
}
function foo() {}
function bar() {
    foo(); //no error
}
var foo = function() {}
bar();

এটি উত্তোলন নামক কোনও কারণে !

ফাংশন সংজ্ঞায়িত করার দুটি উপায় রয়েছে: ফাংশন ডিক্লেয়ারেশন এবং ফাংশন এক্সপ্রেশন । পার্থক্যটি বিরক্তিকর এবং মিনিট, সুতরাং আসুন আমরা এই সামান্য ভুল জিনিসটি বলি: আপনি যদি এটি এটি লিখতে থাকেন তবে function name() {}এটি একটি ঘোষণা এবং আপনি যখন এটির মতো লিখেন var name = function() {}(বা কোনও বেনামে ফাংশন যেমন একটি জিনিসকে অর্পণ করা হয়েছে) তবে এটি এটি it's একটি ফাংশন এক্সপ্রেশন

প্রথমে আসুন কীভাবে ভেরিয়েবলগুলি পরিচালনা করা হয় তা দেখুন:

var foo = 42;

//the interpreter turns it into this:
var foo;
foo = 42;

এখন, কীভাবে ফাংশন ঘোষণাগুলি পরিচালনা করা হয়:

var foo = 42;
function bar() {}

//turns into
var foo; //Insanity! It's now at the top
function bar() {}
foo = 42;

varবিবৃতি "ছোঁড়ার" সৃষ্টি এর fooখুব শীর্ষে, কিন্তু এখনো এটা মান নির্ধারণ করে না। ফাংশন ঘোষণাটি পরের লাইনে আসে এবং শেষ পর্যন্ত একটি মান নির্ধারিত হয় foo

এবং এই সম্পর্কে কি?

bar();
var foo = 42;
function bar() {}
//=>
var foo;
function bar() {}
bar();
foo = 42;

শুধু ঘোষণা এর fooউপরে সরিয়ে নেওয়া হয়েছে। অ্যাসাইনমেন্টটি কল করার পরে কেবল আসে bar, যেখানে এটি সমস্ত উত্তোলনের আগে ঘটেছিল।

এবং পরিশেষে, সংক্ষিপ্ততার জন্য:

bar();
function bar() {}
//turns to
function bar() {}
bar();

এখন, ফাংশন এক্সপ্রেশন সম্পর্কে কি ?

var foo = function() {}
foo();
//=>
var foo;
foo = function() {}
foo();

নিয়মিত ভেরিয়েবল মত, প্রথম fooহয় ঘোষিত সুযোগ সর্বোচ্চ বিন্দুতে, তাহলে এটি একটি মান নির্ধারিত হয়।

দ্বিতীয় উদাহরণটি ত্রুটি কেন ছুঁড়ে দেখা যাক।

bar();
function bar() {
    foo();
}
var foo = function() {}
//=>
var foo;
function bar() {
    foo();
}
bar();
foo = function() {}

যেমনটি আমরা আগেও দেখেছি, কেবল তৈরি fooকরা উত্তোলন করা হয়, অ্যাসাইনমেন্টটি আসে যেখানে এটি "আসল" (অন-উত্তোলিত) কোডে উপস্থিত হয়েছিল। যখন barডাকা হয়, এটির আগে fooএকটি মান নির্ধারিত হয় foo === undefined। এখন ফাংশন-বডিটিতে bar, এটি এমন হয় যেন আপনি করছেন undefined()যা একটি ত্রুটি ছুড়ে দেয়।


এটি খননের জন্য দুঃখিত, তবে অ্যারে.প্রোটোটাইপ.সোমমেথোড = ফাংশন () {isted উত্তোলনের মতো ওভারলোডগুলি কী? এই ধরণের জিনিসগুলি আমার স্ক্রিপ্টের শেষে থাকলে আমি ত্রুটিগুলি পেয়ে যাচ্ছি বলে মনে হচ্ছে।
এজ

আপনি কীভাবে নিশ্চিত হন যে সবকিছু লোড হয়েছে ? কোন সাধারণ অনুশীলন আছে?
zwcloud

6

মূল কারণ সম্ভবতঃ জেএসলিন্ট ফাইলটিতে কেবল একটি পাস করে তাই এটি জানেন না যে আপনি এই জাতীয় ফাংশনটি সংজ্ঞায়িত করবেন

যদি আপনি ফাংশন স্টেটমেন্ট সিনট্যাক্স ব্যবহার করেন

function foo(){ ... }

আপনি যেখানে ফাংশনটি ঘোষণা করেন সেখানে আসলে কোনও পার্থক্য নেই (এটি সর্বদা এমন আচরণ করে যেমন ঘোষণাটি শুরু হয়)।

অন্যদিকে, যদি আপনার ফাংশনটি নিয়মিত ভেরিয়েবলের মতো সেট করা থাকে

var foo = function() { ... };

আপনাকে গ্যারান্টি দিতে হবে যে আপনি এটি সূচনা করার আগে কল করবেন না (এটি আসলে বাগের উত্স হতে পারে)।


যেহেতু প্রচুর সংখ্যক কোড পুনরায় অর্ডার করা জটিল এবং এটি নিজের মধ্যে বাগের উত্স হতে পারে, তাই আমি আপনাকে পরামর্শ দিতে চাই যে আপনি একটি কাজের সন্ধান করুন। আমি নিশ্চিত যে আপনি জেএসলিন্টকে বৈশ্বিক ভেরিয়েবলের নাম আগেই বলতে পারবেন যাতে এটি অঘোষিত স্টাফ সম্পর্কে অভিযোগ না করে।

ফাইলটির ভিক্ষা সম্পর্কে একটি মন্তব্য দিন

/*globals foo1 foo2 foo3*/

বা তার জন্য আপনি সেখানে একটি পাঠ্য বাক্স ব্যবহার করতে পারেন। (আমি আরও মনে করি আপনি যদি এটির সাথে হস্তক্ষেপ করতে পারেন তবে আপনি অভ্যন্তরীণ jslint ফাংশনে যুক্তিগুলিতে এটি পাস করতে পারেন))


ধন্যবাদ। তাহলে / * গ্লোবালস * / লাইন কাজ করবে? ভাল - আমার পছন্দ করার জন্য জেএসহিন্টকে পাওয়ার জন্য যে কোনও কিছুই। আমি এখনও জাভাস্ক্রিপ্টে নতুন এবং আমি কোনও পৃষ্ঠা রিফ্রেশ করার সময় অবর্ণনীয় বিরতি পেতে পারি, তবুও কোনও রিপোর্ট করা বাগ নেই। সুতরাং আমি বুঝতে পেরেছিলাম যে সমাধানটি সমস্ত বিধি দ্বারা চালানো হয়েছিল এবং তারপরে দেখুন এটি এখনও ঘটে কিনা।
ক্রিস টোলেবল

4

জাভাস্ক্রিপ্ট কীভাবে লেখা উচিত সে সম্পর্কে অনেকগুলি স্বেচ্ছাচারী নিয়মকে চাপ দিচ্ছেন। বেশিরভাগ নিয়মগুলি সম্পূর্ণ জঞ্জাল।

ফাংশন উত্তোলন জাভাস্ক্রিপ্টের একটি বৈশিষ্ট্য কারণ এটি একটি ভাল ধারণা।

আপনার যদি অভ্যন্তরীণ ফাংশন থাকে যা প্রায়শই অভ্যন্তরীণ ফাংশনগুলির ইউটিলিটি হয়, বাইরের ফাংশনটির শুরুতে এটি যুক্ত করা লিখিত কোডের একটি গ্রহণযোগ্য শৈলী, তবে এতে কী কী তা পেতে আপনাকে বিশদটি পড়তে হবে এমন অসুবিধা আছে বাইরের কাজটি করে

আপনার কোডবেস জুড়ে আপনার একটি নীতিটি আটকে থাকা উচিত নয়তো আপনার মডিউল বা ফাংশনে প্রাইভেট ফাংশনগুলি প্রথমে বা শেষ করা উচিত। জেএসহিন্ট ধারাবাহিকতা প্রয়োগের জন্য ভাল, তবে আপনার প্রয়োজন অনুসারে আপনার .jshintrc সামঞ্জস্য করা উচিত, আপনার উত্স কোডটি অন্য লোকেদের নকল কোডিং ধারণার সাথে সামঞ্জস্য করবেন না।

একটি কোডিং স্টাইল যা আপনি বন্যের মধ্যে দেখতে পাচ্ছেন তা এড়ানো উচিত কারণ এটি আপনাকে কোনও সুবিধা দেয় না এবং কেবল সম্ভাব্য রিফ্যাক্টরিং ব্যথা দেয়:

function bigProcess() {
    var step1,step2;
    step1();
    step2();

    step1 = function() {...};
    step2 = function() {...};
}

ঠিক এটাই হ'ল ফাংশন উত্তোলন এড়াতে। কেবল ভাষা শিখুন এবং এর শক্তিগুলি কাজে লাগান।


আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.