ES5新增函数之二: Function.prototype.bind();

最新推荐文章于 2022-08-15 09:46:44 发布

liuhe688

最新推荐文章于 2022-08-15 09:46:44 发布

阅读量4k

点赞数

分类专栏： Front End

本文链接：https://blog.csdn.net/liuhe688/article/details/51016768

版权

本文详细探讨了ES5中的bind函数，它用于将函数与特定对象绑定，确保函数在特定上下文中执行。通过示例展示了bind如何解决执行环境和作用域问题，特别是在setTimeout等场景中的应用。此外，文章还解释了bind函数的参数结构，包括预设参数的使用，并提出在不支持bind的旧版浏览器中实现bind的必要性。

摘要由CSDN通过智能技术生成

在上一篇文章里我们分析了ES5对几个常用类新增的函数，今天就重点来讲解一下Function中的bind函数。

简单来说，bind函数用于将当前函数和指定对象绑定，返回一个新的函数，当新函数被调用时，代码会在指定对象的上下文中执行。

这就涉及到JavaScript程序执行上下文Context的知识了，在JavaScript中函数内部如果存在与Context有关的代码，如果我们在调用之前改变其Context，那么执行结果就不同，这一点我们可以用一个最基本的例子来说明：

var name = 'Global';

var student = {
  name: 'John'
};

var person = {
  name: 'Scott',
  getName: function() {
    return this.name;
  }
};

console.log(person.getName());      // Scott

var getName = person.getName;
console.log(getName());             // Global
console.log(getName.call(student)); // John

如上所示，我们在全局声明一个name变量，然后声明student和person对象，分别都有name属性，其中person包含一个getName函数，用于返回所在对象的name属性。第一步我们直接调用person的getName函数，返回Scott；然后我们先去到person的getName函数引用，之后直接调用，注意，这次调用跟第一步是不同的，它的执行环境