微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

ECMAScript5(ES5)中bind方法使用小结_基础知识

php中文网
发布： 2016-05-16 16:00:33
原创
1327人浏览过

一直以来对和this有关的东西模糊不清，譬如call、apply等等。这次看到一个和bind有关的笔试题，故记此文以备忘。

　　bind和call以及apply一样，都是可以改变上下文的this指向的。不同的是，call和apply一样，直接引用在方法上，而bind绑定this后返回一个方法，但内部核心还是apply。

直接看例子：

What-the-Diff
What-the-Diff

检查请求差异，自动生成更改描述

What-the-Diff 103
查看详情 What-the-Diff
复制代码 代码如下:

var obj = {
  a: 1,
  b: 2,
  getCount: function(c, d) {
    return this.a + this.b + c + d;
  }
};
 
window.a = window.b = 0;
console.log(obj.getCount(3, 4));  // 10
var func = obj.getCount;
console.log(func(3, 4));  // 7

为何会这样？因为func在上下文中的this是window！bind的存在正是为了改变this指向获取想要的值：

复制代码 代码如下:

var obj = {
  a: 1,
  b: 2,
  getCount: function(c, d) {
    return this.a + this.b + c + d;
  }
};
 
window.a = window.b = 0;
var func = obj.getCount.bind(obj);
console.log(func(3, 4));  // 10

　　bind是function的一个函数扩展方法，bind以后代码重新绑定了func内部的this指向（obj），但是不兼容ie6~8，兼容代码如下：

复制代码 代码如下:

var obj = {
  a: 1,
  b: 2,
  getCount: function(c, d) {
    return this.a + this.b + c + d;
  }
};
 
Function.prototype.bind = Function.prototype.bind || function(context) {
  var that = this;
  return function() {
    // console.log(arguments); // console [3,4] if ie
    return that.apply(context, arguments);
 
  }
}
window.a = window.b = 0;
var func = obj.getCount.bind(obj);
console.log(func(3, 4));  // 10

　　其实在我看来bind的核心是返回一个未执行的方法，如果直接使用apply或者call：

复制代码 代码如下:

var ans = obj.getCount.apply(obj, [3, 4]);
console.log(ans); // 10

　　无法使用简写的func函数构造，所以用bind传递this指向，再返回一个未执行的方法，实现方式相当巧妙。

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：javascript十六进制及二进制转化的方法_javascript技巧 下一篇：js实现键盘上下左右键选择文字并显示在文本框的方法_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
在React应用中正确处理Axios异步数据响应 本文详细讲解在React应用中如何正确地处理Axios发起的异步数据请求。针对常见的TypeError:response.mapisnotafunction错误，文章阐明了异步函数返回Promise的本质，并提供了使用async/await和.then()两种方式来有效获取并处理Promise中实际数据的方法，确保开发者能够顺利地对API响应进行操作。
2025-11-23 13:35:18
787
JavaScript实现深色模式下DIV元素边框颜色动态切换教程 本教程详细讲解如何使用JavaScript在深色/浅色模式切换时，动态改变特定DIV元素的下边框颜色。文章将重点阐述正确的DOM元素选择方法（如getElementsByClassName）和CSS属性（borderBottomColor）的应用，并提供完整的代码示例，帮助开发者实现无缝的用户界面主题切换体验。
2025-11-23 13:28:38
442
React组件中异步数据获取与状态更新：解决数据不渲染问题 本教程旨在解决React组件中异步获取数据后，UI不更新的问题。核心在于理解React的状态管理机制：组件仅在state或props改变时重新渲染。文章将详细阐述如何通过useState正确管理异步获取的数据，优化数据结构（如使用对象数组存储API响应），以及确保所有异步操作完成后再更新状态，从而实现数据的正确渲染。
2025-11-23 13:28:01
775
Svelte应用中集成外部库全局回调函数的最佳实践 在Svelte应用中集成需要全局回调函数的第三方库时，开发者常面临如何在组件内部定义回调函数以利用Svelte模块导入，同时确保其对外部库可见的挑战。本文将详细介绍一种Svelte化的解决方案，通过在onMount生命周期钩子中程序化地初始化外部库并传递组件内部定义的回调函数，从而优雅地解决全局作用域可见性与模块依赖共存的问题，提高代码的模块化和可维护性。
2025-11-23 13:26:02
238
使用CSS实现滚动条反向移动的教程 本教程详细介绍了如何利用CSS的direction属性来改变滚动条的默认行为，使其实现反向移动。通过为滚动容器设置direction:rtl;并为内部内容重新设置direction:ltr;，可以在不影响内容显示方向的前提下，让水平滚动条在内容向右移动时向左移动，从而实现独特的交互体验。
2025-11-23 13:17:10
459
JavaScript实现深色模式与动态边框样式切换 本教程详细介绍了如何使用JavaScript实现网页的深色模式切换功能，并特别解决了在切换模式时，动态修改特定div元素border-bottom颜色的问题。文章将涵盖HTML结构、CSS样式定义以及核心JavaScript逻辑，包括正确的元素选择方法和样式属性设置，确保用户界面在不同模式下保持视觉一致性，并提供代码示例，同时探讨如何利用localStorage实现用户偏好持久化。
2025-11-23 13:09:06
970
JavaScript量子计算_量子算法模拟实现 JavaScript可通过Q.js等库模拟量子算法，如用Quantum.js创建贝尔态展示纠缠，或实现Deutsch-Jozsa算法判断函数特性，也可手动构建基于向量矩阵的简易模拟器，尽管受限于指数级资源消耗，仅适用于20比特内小规模演示，但适合教学、可视化与交互式学习。
2025-11-23 13:08:02
286
JavaScript实现深色模式切换：动态修改元素边框样式与状态管理 本教程详细阐述如何使用JavaScript实现网页的深色/浅色模式切换功能，并着重解决动态修改特定元素边框颜色的问题。文章将解释正确的DOM元素选择方法、CSS属性操作技巧，并通过示例代码展示如何同步切换页面背景、文本颜色及自定义元素边框，并探讨用户偏好持久化的策略。
2025-11-23 12:59:45
190
JavaScript ES模块在HTML中导入的最佳实践 本文详细阐述了如何在HTML文件中正确导入和使用JavaScriptES模块（如类）。核心在于理解的必要性，并确保import语句中使用完整的相对路径和文件扩展名（.js），以避免常见的模块加载错误，从而实现模块化代码的顺畅运行。
2025-11-23 12:44:41
678
深入理解JavaScript中的立即调用类表达式（IICE）及其执行机制 本文深入探讨JavaScript中立即调用类表达式（IICE）的执行机制，通过一个嵌套继承的示例，详细解析其声明、继承、实例化及构造函数调用顺序。我们将识别父子类关系，揭示属性初始化时序对结果的影响，并提供修正方案，旨在帮助开发者理解此类复杂结构的行为和潜在陷阱。
2025-11-23 12:33:01
836
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部