🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 思源笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

实现一个功能和 `Function.prototype.bind` 相同的函数

2019-01-08

题目

/**
  请按要求实现 `bind` 函数:以下代码执行时,需返回正确结果且运行过程中无异常
*/
let example = function () {
  console.log(this)
}
const boundExample = bind(example, { a: true })
boundExample.call({ b: true }) // { a: true }

回答

  • bind 需接受两个参数:函数和上下文
  • bind 需创建一个新函数,并且在调用时设置上下文为 this
const bind = (fn, context) => () => fn.apply(context)

加分回答

  • example 函数需要传参的话,可如下进行实现:
const bind = (fn, context) => (...args) => fn.apply(context, args)
  • Function.prototype.bind() 会创建一个新的函数,在调用时设置 this。会返回一个原函数的拷贝,并拥有指定的 this 和初始参数。
  • Function.prototype.bind() 可解决 setTimeoutthis 为 window 的问题。还可使一个函数拥有预设初始参数的能力,如:
// setTimeout
class LateBloomer {
    constructor() {
        this.petalCount = Math.ceil(Math.random() * 12) + 1;
    }
    declare() {
        console.log('I am a beautiful flower with ' + this.petalCount + ' petals!');
    }
    bloom() {
        window.setTimeout(this.declare.bind(this), 1000);
    }
}
var flower = new LateBloomer();
flower.bloom();
// 预设初始参数
const list = function () {
    return Array.prototype.slice.call(arguments);
}
// 创建一个函数,它拥有预设参数列表。
const leadingThirtysevenList = list.bind(null, 37);
console.log(leadingThirtysevenList()); // [37]
console.log(leadingThirtysevenList(1, 2, 3)); // [37, 1, 2, 3]
  • Function.prototype.apply() 会调用一个具有给定 this 的函数,如果这个函数处于非严格模式且给定为 null 或 undefined 时,this 将指向全局对象,除此还提供一个数组作为该函数的参数。他会返回调用给定 this 值和参数的函数结果。
  • Function.prototype.call()apply() 类似。唯一区别就是 call()方法接受的是参数列表,而 apply() 方法接受的是一个参数数组。

返回总目录

每天 30 秒


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步