JavaScript Academy · บทเรียน

การประยุกต์ใช้ฟังก์ชันบางส่วน

กำหนดอาร์กิวเมนต์บางส่วนไว้ล่วงหน้าและนำฟังก์ชันกลับมาใช้ใหม่

การประยุกต์ใช้ฟังก์ชันบางส่วน เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

การประยุกต์บางส่วนคืออะไร

การประยุกต์บางส่วนหมายถึงการนำฟังก์ชันที่ต้องรับอาร์กิวเมนต์หลายตัวมากำหนดค่าบางส่วนไว้ล่วงหน้า แล้วสร้างฟังก์ชันใหม่ที่ต้องรับเฉพาะอาร์กิวเมนต์ที่เหลือ

วิธีนี้ช่วยให้คุณสร้างฟังก์ชันเฉพาะทางจากฟังก์ชันทั่วไปได้ เช่น multiply(a, b) ทั่วไปสามารถกลายเป็น double(b) ที่เฉพาะทางได้ด้วยการกำหนด a = 2

ฟังก์ชันที่มีอาร์กิวเมนต์หลายตัว

เริ่มจากฟังก์ชันอเนกประสงค์ ในที่นี้ add รับตัวเลขสามตัว บ่อยครั้งคุณจะเรียกใช้ฟังก์ชันนี้ซ้ำแล้วซ้ำเล่าด้วยอาร์กิวเมนต์ตัวแรกเดิม

function add(a, b, c) {
  return a + b + c;
}

console.log(add(1, 2, 3));
console.log(add(1, 10, 100));

การกำหนดอาร์กิวเมนต์ด้วยตนเอง

การประยุกต์บางส่วนที่ง่ายที่สุดคือการสร้างฟังก์ชันครอบที่กำหนดอาร์กิวเมนต์หนึ่งตัวเป็นค่าตายตัว แล้วส่งต่ออาร์กิวเมนต์ที่เหลือ

function add(a, b, c) {
  return a + b + c;
}

function addTen(b, c) {
  return add(10, b, c);
}

console.log(addTen(2, 3));
console.log(addTen(20, 30));

การประยุกต์บางส่วนด้วย bind

Function.prototype.bind ถูกออกแบบมาสำหรับงานนี้ อาร์กิวเมนต์ตัวแรกจะกำหนดค่า this ส่วนอาร์กิวเมนต์ทุกตัวหลังจากนั้นจะถูก เติมค่าไว้ล่วงหน้า โดยเริ่มจากด้านซ้าย

ส่ง null ให้กับ this เมื่อคุณไม่สนใจค่าของมัน

function add(a, b, c) {
  return a + b + c;
}

const addTen = add.bind(null, 10);

console.log(addTen(2, 3));
console.log(addTen(20, 30));

การผูกอาร์กิวเมนต์มากกว่าหนึ่งตัว

คุณสามารถกำหนดอาร์กิวเมนต์นำหลายตัวพร้อมกันได้ ฟังก์ชันที่ส่งคืนมาจะรับอาร์กิวเมนต์ที่เหลือ

function add(a, b, c) {
  return a + b + c;
}

const addElevenAndTwo = add.bind(null, 11, 2);

console.log(addElevenAndTwo(7));
console.log(addElevenAndTwo(100));

ตัวช่วยการประยุกต์บางส่วนที่ใช้ซ้ำได้

คุณสามารถเขียน partial ของตนเองเพื่อจับอาร์กิวเมนต์ที่กำหนดไว้ล่วงหน้าด้วยพารามิเตอร์ส่วนที่เหลือ แล้วผสานเข้ากับอาร์กิวเมนต์ภายหลังด้วยการกระจายค่า

function partial(fn, ...preset) {
  return function (...later) {
    return fn(...preset, ...later);
  };
}

function greet(greeting, name) {
  return greeting + ', ' + name + '!';
}

const sayHello = partial(greet, 'Hello');
console.log(sayHello('Ada'));
console.log(sayHello('Linus'));

การสร้างฟังก์ชันทั่วไปให้เป็นฟังก์ชันเฉพาะทาง

การประยุกต์บางส่วนมีประโยชน์อย่างยิ่งเมื่อฟังก์ชันทั่วไปหนึ่งตัวสร้างฟังก์ชันเฉพาะทางขนาดเล็กที่อ่านเข้าใจง่ายได้หลายตัว

function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2);
const triple = multiply.bind(null, 3);

console.log(double(5));
console.log(triple(5));

การประยุกต์บางส่วนกับอาร์เรย์

ฟังก์ชันเฉพาะทางช่วยให้โค้ดอ่านได้ราบรื่นภายในเมธอดของอาร์เรย์ เช่น map

function power(exponent, base) {
  return Math.pow(base, exponent);
}

const square = power.bind(null, 2);

console.log([1, 2, 3, 4].map(square));

การเติมการตั้งค่าไว้ล่วงหน้า

การใช้งานจริงที่พบได้บ่อยคือการกำหนดค่าการตั้งค่าอย่างหนึ่งไว้ล่วงหน้า เช่น อัตราภาษีหรือสัญลักษณ์สกุลเงิน แล้วนำผลลัพธ์ไปใช้ซ้ำได้ทุกที่

function format(symbol, amount) {
  return symbol + amount.toFixed(2);
}

const usd = format.bind(null, '$');
const eur = format.bind(null, '\u20AC');

console.log(usd(9.5));
console.log(eur(9.5));

การประยุกต์บางส่วนกับพารามิเตอร์เริ่มต้น

พารามิเตอร์เริ่มต้นจะให้ค่าใช้แทนเมื่ออาร์กิวเมนต์ ขาดหายไป ส่วนการประยุกต์บางส่วนจะ กำหนดค่าไว้ตายตัว ทำให้ผู้เรียกไม่สามารถเปลี่ยนค่าสำหรับตำแหน่งนั้นได้อีก

ทั้งสองอย่างแก้ปัญหาคนละแบบ พารามิเตอร์เริ่มต้นเป็นตัวเลือกเสริม ส่วนการประยุกต์บางส่วนเป็นค่าคงที่

function log(level, message) {
  return '[' + level + '] ' + message;
}

const error = log.bind(null, 'ERROR');
console.log(error('Disk full'));
console.log(error('Timeout'));

เหตุผลที่การประยุกต์บางส่วนสำคัญ

การประยุกต์บางส่วนช่วยลดการเขียนซ้ำ สื่อเจตนาได้ชัดเจน และเป็นพื้นฐานของการทำเคอร์รี เมื่อใดก็ตามที่คุณส่งอาร์กิวเมนต์ตัวแรกเดิมซ้ำ ๆ ให้พิจารณากำหนดค่านั้นไว้เพียงครั้งเดียว

function between(min, max, value) {
  return value >= min && value <= max;
}

const isPercentage = between.bind(null, 0, 100);

console.log(isPercentage(50));
console.log(isPercentage(150));

ตรวจสอบความเข้าใจอย่างรวดเร็ว

fn.bind(null, 5) ส่งคืนอะไร

ทบทวน: การประยุกต์บางส่วน

คุณได้เรียนรู้วิธีกำหนดอาร์กิวเมนต์ไว้ล่วงหน้า:

ฟังก์ชันครอบด้วยตนเองกำหนดอาร์กิวเมนต์หนึ่งตัวเป็นค่าตายตัวและส่งต่อส่วนที่เหลือ
bind(null, ...args)เติมอาร์กิวเมนต์ไว้ล่วงหน้าโดยเริ่มจากด้านซ้าย
ตัวช่วย partial ที่สร้างขึ้นเองใช้พารามิเตอร์ส่วนที่เหลือและการกระจายค่า
การประยุกต์บางส่วนสร้างฟังก์ชันเฉพาะทางที่ชัดเจนและนำกลับมาใช้ซ้ำได้ พร้อมปูพื้นฐานไปสู่การทำเคอร์รี

คำถามที่พบบ่อย

บทเรียน “การประยุกต์ใช้ฟังก์ชันบางส่วน” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การประยุกต์ใช้ฟังก์ชันบางส่วน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การประยุกต์ใช้ฟังก์ชันบางส่วน”

กำหนดอาร์กิวเมนต์บางส่วนไว้ล่วงหน้าและนำฟังก์ชันกลับมาใช้ใหม่ คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “การประยุกต์ใช้ฟังก์ชันบางส่วน” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ JavaScript Academy