js 怎么用partial实现函数部分应用

Function.prototype.bind

Function.prototype.bind()

this

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

const addWithTen = add.bind(null, 10); // null表示不改变this上下文，或者说我们不关心它

console.log(addWithTen(5, 2)); // 10 + 5 + 2 = 17
console.log(addWithTen(1, 3)); // 10 + 1 + 3 = 14

bind

this

bind

this

partial

partial

const partial = (fn, ...presetArgs) => {
  return function(...remainingArgs) {
    // 使用 apply 来调用原函数，并确保 this 上下文正确传递
    // presetArgs 在前，remainingArgs 在后
    return fn.apply(this, presetArgs.concat(remainingArgs));
  };
};

// 使用我们自己的 partial 函数
const addWithFive = partial(add, 5);

console.log(addWithFive(10, 20)); // 5 + 10 + 20 = 35

const addFiveAndTen = partial(add, 5, 10);
console.log(addFiveAndTen(2)); // 5 + 10 + 2 = 17

partial

bind

bind

log(level, tag, message)

level

tag

'INFO'

'API'

log('INFO', 'API', '...')

logApiInfo = partial(log, 'INFO', 'API')

logApiInfo('...')

authenticateUser(username, password)

loginAsAdmin(password)

map

filter

reduce

Function.prototype.bind

partial

...rest

...spread

Function.prototype.apply

this

const partial = (fn, ...presetArgs) => {
  return function(...remainingArgs) {
    // 关键点：
    // 1. 使用闭包捕获 fn 和 presetArgs
    // 2. 新函数接收剩余参数 remainingArgs
    // 3. 使用 apply 或 call 调用 fn，将 presetArgs 和 remainingArgs 合并后传入
    // 4. apply(this, ...) 确保了新函数调用时的 this 上下文能够传递给 fn
    return fn.apply(this, presetArgs.concat(remainingArgs));
  };
};

apply

concat

bind

partial

bind

this

request(method, url, data)

/api/users

/api/products

// 假设这是你的通用请求函数
function request(method, url, data) {
  console.log(`Sending ${method} request to ${url} with data:`, data);
  // 这里通常会是 fetch 或 axios 调用
  return Promise.resolve({ status: 200, message: `Success for ${url}` });
}

// 使用 bind 创建特定类型的请求函数
const get = request.bind(null, 'GET');
const post = request.bind(null, 'POST');

// 再进一步，创建特定资源的请求函数
const getUsers = get.bind(null, '/api/users');
const createProduct = post.bind(null, '/api/products');

getUsers(); // Sending GET request to /api/users with data: undefined
createProduct({ name: 'New Widget', price: 99 }); // Sending POST request to /api/products with data: { name: 'New Widget', price: 99 }

function handleButtonClick(buttonId, event) {
  console.log(`Button ${buttonId} was clicked! Event:`, event.type);
}

document.getElementById('saveBtn').addEventListener('click', handleButtonClick.bind(null, 'save'));
document.getElementById('deleteBtn').addEventListener('click', handleButtonClick.bind(null, 'delete'));

handleButtonClick.bind(null, 'save')

event.target.id

log(level, message)

logInfo = log.bind(null, 'INFO')

logError = log.bind(null, 'ERROR')

transformData(formatter, data)

formatter

formatAsCurrency = transformData.bind(null, currencyFormatter)

formatAsDate = transformData.bind(null, dateFormatter)