微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > web前端 > js教程 > 正文

javascript函数中的this的四种绑定形式

小云云

发布： 2018-02-22 09:30:34

原创

1951人浏览过

一谈到this，很多让人晕晕乎乎的抽象概念就跑出来了，这里我就只说最核心的一点——函数中的this总指向调用它的对象，接下来的故事都将围绕这一点展开。

【故事】有一个年轻人叫"迪斯"（this）,有一天，迪斯不小心穿越到一个叫 “伽瓦斯克利”（javascript）的异世界，此时此刻迪斯身无分文，他首先要做的事情就是——找到他的住宿的地方——调用函数的对象

立即学习“Java免费学习笔记（深入）”；

即构数智人

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

即构数智人

36

即构数智人

javascript函数中的this的四种绑定形式

this的默认绑定

立即学习“Java免费学习笔记（深入）”；

【故事——线路1】如果迪斯（this）直到天黑前都没有找到能收留自己的住所，他眼看就要过上非洲难民的生活，这时候，一位乐善好施的魔法师村长——window救世主一般地出现了：先住在我家吧！

立即学习“Java免费学习笔记（深入）”；

【正文】

当一个函数没有明确的调用对象的时候，也就是单纯作为独立函数调用的时候，将对函数的this使用默认绑定：绑定到全局的window对象

function fire () {
     console.log(this === window)
}
fire(); // 输出true

登录后复制

立即学习“Java免费学习笔记（深入）”；

上面的例子我相信对大多数人都很简单，但有的时候我们把例子变一下就会具有迷惑性：

复制代码

function fire () {
  // 我是被定义在函数内部的函数哦！     function innerFire() {
  console.log(this === window)
      }
     innerFire(); // 独立函数调用}
fire(); // 输出true

登录后复制

复制代码

立即学习“Java免费学习笔记（深入）”；

函数 innerFire在一个外部函数fire里面声明且调用，那么它的this是指向谁呢？仍然是window

许多人可能会顾虑于fire函数的作用域对innerFire的影响，但我们只要抓住我们的理论武器——没有明确的调用对象的时候，将对函数的this使用默认绑定：绑定到全局的window对象，便可得正确的答案了

下面这个加强版的例子也是同样的输出true

复制代码

var obj = {
   fire: function () {
       function innerFire() {
          console.log(this === window)
        }
        innerFire();   // 独立函数调用     }
}
obj.fire(); //输出 true

登录后复制

复制代码

立即学习“Java免费学习笔记（深入）”；

【注意】在这个例子中， obj.fire()的调用实际上使用到了this的隐式绑定，这就是下面我要讲的内容，这个例子我接下来还会继续讲解

【总结】凡事函数作为独立函数调用，无论它的位置在哪里，它的行为表现，都和直接在全局环境中调用无异

javascript函数中的this的四种绑定形式

this的隐式绑定

【故事——线路2】迪斯（this）穿越来异世界“伽瓦斯克利”（javascript）的时候，刚好身上带了一些钱，于是他找到一个旅馆住宿了下来

立即学习“Java免费学习笔记（深入）”；

当函数被一个对象“包含”的时候，我们称函数的this被隐式绑定到这个对象里面了，这时候，通过this可以直接访问所绑定的对象里面的其他属性，比如下面的a属性

复制代码

var obj = {
     a: 1,
      fire: function () {
           console.log(this.a)
        }
}
obj.fire(); // 输出1

登录后复制

复制代码

立即学习“Java免费学习笔记（深入）”；

现在我们需要对平常司空见惯的的代码操作做一些更深的思考，首先，下面的这两段代码达到的效果是相同的：

复制代码

// 我是第一段代码function fire () {
      console.log(this.a)
}
  var obj = {
      a: 1,
      fire: fire
  }
obj.fire(); // 输出1
 // 我是第二段代码var obj = {
        a: 1,
        fire: function () {
             console.log(this.a)
         }
}
obj.fire(); // 输出1

登录后复制

复制代码

立即学习“Java免费学习笔记（深入）”；

fire函数并不会因为它被定义在obj对象的内部和外部而有任何区别，也就是说在上述隐式绑定的两种形式下，fire通过this还是可以访问到obj内的a属性，这告诉我们：

1. this是动态绑定的，或者说是在代码运行期绑定而不是在书写期

2. 函数于对象的独立性， this的传递丢失问题

（下面的描述可能带有个人的情感倾向而显得不太严谨，但这是因为我希望阅读者尽可能地理解我想表达的意思）

javascript函数中的this的四种绑定形式

隐式绑定下，作为对象属性的函数，对于对象来说是独立的

基于this动态绑定的特点，写在对象内部，作为对象属性的函数，对于这个对象来说是独立的。（函数并不被这个外部对象所“完全拥有”）

我想表达的意思是：在上文中，函数虽然被定义在对象的内部中，但它和“在对象外部声明函数，然后在对象内部通过属性名称的方式取得函数的引用”，这两种方式在性质上是等价的（而不仅仅是效果上）

定义在对象内部的函数只是“恰好可以被这个对象调用”而已，而不是“生来就是为这个对象所调用的”

借用下面的隐式绑定中的this传递丢失问题来说明：

复制代码

var obj = {
      a: 1,    // a是定义在对象obj中的属性   1      fire: function () {
   console.log(this.a)
        }
      }
 var a = 2;  // a是定义在全局环境中的变量    2var fireInGrobal = obj.fire;  
fireInGrobal(); //  输出 2

登录后复制

复制代码

立即学习“Java免费学习笔记（深入）”；

上面这段简单代码的有趣之处在于：这个于obj中的fire函数的引用（ fireInGrobal）在调用的时候，行为表现（输出）完全看不出来它就是在obj内部定义的，其原因在于：我们隐式绑定的this丢失了！！从而 fireInGrobal调用的时候取得的this不是obj，而是window

上面的例子稍微变个形式就会变成一个可能困扰我们的bug:

复制代码

var a = 2;var obj = {
    a: 1,    // a是定义在对象obj中的属性    fire: function () {
          console.log(this.a)
     }
}  
function otherFire (fn) {
     fn();
}  
otherFire(obj.fire); // 输出2

登录后复制

复制代码

立即学习“Java免费学习笔记（深入）”；

在上面，我们的关键角色是otherFire函数，它接受一个函数引用作为参数，然后在内部直接调用，但它做的假设是参数fn仍然能够通过this去取得obj内部的a属性，但实际上, this对obj的绑定早已经丢失了，所以输出的是全局的a的值(2),而不是obj内部的a的值（1）

javascript函数中的this的四种绑定形式

在一串对象属性链中，this绑定的是最内层的对象

在隐式绑定中，如果函数调用位置是在一串对象属性链中，this绑定的是最内层的对象。如下所示：

复制代码

var obj = {
      a: 1,
      obj2: {
           a: 2,
           obj3: {
                a:3,
                getA: function () {
                    console.log(this.a)   
                 }
           }
       }
}
 
obj.obj2.obj3.getA();  // 输出3

登录后复制

复制代码

立即学习“Java免费学习笔记（深入）”；

this的显式绑定：(call和bind方法)

【故事——线路3】迪斯（this）穿越来异世界“伽瓦斯克利”（javascript），经过努力的打拼，积累了一定的财富，于是他买下了自己的房子

立即学习“Java免费学习笔记（深入）”；

上面我们提到了this的隐式绑定所存在的this绑定丢失的问题，也就是对于 “ fireInGrobal = obj.fire”

fireInGrobal调用和obj.fire调用的结果是不同的，因为这个函数赋值的过程无法把fire所绑定的this也传递过去。这个时候，call函数就派上用场了

立即学习“Java免费学习笔记（深入）”；

call的基本使用方式： fn.call(object)

fn是你调用的函数，object参数是你希望函数的this所绑定的对象。

fn.call(object)的作用：

1.即刻调用这个函数（fn）

2.调用这个函数的时候函数的this指向object对象

例子：

复制代码

var obj = {
      a: 1,    // a是定义在对象obj中的属性      fire: function () {
         console.log(this.a)
      }
}
 var a = 2;  // a是定义在全局环境中的变量  var fireInGrobal = obj.fire;
fireInGrobal();   // 输出2fireInGrobal.call(obj); // 输出1

登录后复制

复制代码

立即学习“Java免费学习笔记（深入）”；

原本丢失了与obj绑定的this参数的fireInGrobal再次重新把this绑回到了obj

但是，我们其实不太喜欢这种每次调用都要依赖call的方式，我们更希望：能够一次性返回一个this被永久绑定到obj的fireInGrobal函数，这样我们就不必每次调用fireInGrobal都要在尾巴上加上call那么麻烦了。

怎么办呢？聪明的你一定能想到，在fireInGrobal.call(obj)外面包装一个函数不就可以了嘛！

复制代码

var obj = {
      a: 1,    // a是定义在对象obj中的属性      fire: function () {
        console.log(this.a)
      }
}
 var a = 2;  // a是定义在全局环境中的变量  var fn = obj.fire;var fireInGrobal = function () {
    fn.call(obj)   //硬绑定}
       
fireInGrobal(); // 输出1

登录后复制

复制代码

立即学习“Java免费学习笔记（深入）”；

如果使用bind的话会更加简单

var fireInGrobal = function () {
    fn.call(obj)   //硬绑定}

登录后复制

立即学习“Java免费学习笔记（深入）”；

可以简化为：

var fireInGrobal = fn.bind(obj);

登录后复制

立即学习“Java免费学习笔记（深入）”；

call和bind的区别是：在绑定this到对象参数的同时：

1.call将立即执行该函数

2.bind不执行函数，只返回一个可供执行的函数

【其他】：至于apply，因为除了使用方法，它和call并没有太大差别，这里不加赘述

在这里，我把显式绑定和隐式绑定下，函数和“包含”函数的对象间的关系比作买房和租房的区别。

立即学习“Java免费学习笔记（深入）”；

因为this的缘故

在隐式绑定下：函数和只是暂时住在“包含对象“的旅馆里面，可能过几天就又到另一家旅馆住了

在显式绑定下：函数将取得在“包含对象“里的永久居住权，一直都会”住在这里“

javascript函数中的this的四种绑定形式

new绑定

【故事】迪斯（this）组建了自己的家庭，并生下多个孩子（通过构造函数new了许多个对象）

立即学习“Java免费学习笔记（深入）”；

执行new操作的时候，将创建一个新的对象，并且将构造函数的this指向所创建的新对象

复制代码

function foo (a) {     this.a = a;
}
 var a1  = new foo (1);var a2  = new foo (2);var a3  = new foo (3);var a4  = new foo (4);
 
console.log(a1.a); // 输出1console.log(a2.a); // 输出2console.log(a3.a); // 输出3console.log(a4.a); // 输出4

登录后复制

相关推荐：

以上就是javascript函数中的this的四种绑定形式的详细内容，更多请关注php中文网其它相关文章！

相关标签：

javascript js

大家都在看：

JavaScript与Rust/Wasm互操作中的浮点数精度差异及解决方案 JavaScript实现表单数据序列化_javascript表单 JavaScript与Rust WASM浮点数计算精度差异及解决方案优化JavaScript事件处理：事件委托与状态跟踪实现动态变量赋值 JavaScript中的类(Class)与继承详解_js ES6+

java速学教程(入门到精通)

java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

来源：php中文网

上一篇：JavaScript如何严格判断NaN 下一篇：JS实现文字间歇循环滚动

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章

JS实现的ajax和同源策略详解

1970-01-01 08:00:00
最新php程序员工具箱 v1.0版本介绍

1970-01-01 08:00:00
Vue filter介绍及其使用

1970-01-01 08:00:00
JS 数字和字符串之间相互转化详解

1970-01-01 08:00:00
Dreamweaver网页中添加电子邮箱链接的实例分享

1970-01-01 08:00:00
vue-cli 自定义指令directive 添加验证滑块详解

1970-01-01 08:00:00
PHP之IMAP收取邮件实例详解

2023-03-19 18:36:02
php基础知识笔记分享

2023-03-20 14:32:01
Redis常见的使用场景分享

2023-03-21 07:36:01
微信小程序文件类API详解

1970-01-01 08:00:00

最新问题

JavaScript与Rust/Wasm互操作中的浮点数精度差异及解决方案本文探讨了在JavaScript与Rust通过wasm_bindgen进行互操作时，因浮点数精度不一致导致的计算结果差异问题。核心原因是JavaScript默认使用双精度浮点数（f64），而Rust函数可能错误地使用了单精度浮点数（f32）。通过将Rust函数中的浮点数类型切换为f64，可以有效解决这一精度不匹配问题，确保跨语言计算结果的一致性。

2025-11-16 23:32:01

673

Forge AES解密不完整文本问题的解决方案与安全实践在使用Forge库进行AES-ECB解密时，若遇到解密结果不完整的问题，通常是由于Forge默认的PKCS#7填充与加密源（如R语言的digest::AES）不匹配所致。本文将详细介绍如何通过禁用Forge的默认填充机制来解决此问题，并强调在使用块加密模式（如ECB）和密钥派生时的重要安全考量，以确保解密完整性和数据安全。

2025-11-16 23:27:05

416

JS柯里化函数_参数复用技巧柯里化是将多参数函数转换为单参数函数序列的技术。例如，curry(add)(1)(2)(3)返回6，通过fn.length判断参数是否收集完毕，支持参数复用，如预设日志级别或校验规则，提升代码灵活性与复用性。

2025-11-16 23:21:05

454

JS函数怎样定义匿名函数_JS匿名函数定义与立即执行方法匿名函数是无名函数，常用于回调或立即执行。通过函数表达式定义，如constmyFunc=function(){}；箭头函数()=>{}更简洁；IIFE(function(){})()或(()=>{})()可立即执行，避免全局污染。

2025-11-16 23:15:06

777

JS箭头函数怎么写_JS箭头函数语法与使用场景详细说明箭头函数是ES6提供的简洁函数语法，使用=>定义，如()=>console.log(‘Hello’)；它不绑定this，继承外层作用域的this，适用于数组方法、回调等场景，但不能用于对象方法或构造函数。

2025-11-16 23:13:17

872

JavaScript实现表单数据序列化_javascript表单答案：文章介绍了Web开发中将HTML表单数据序列化的三种常用方法。首先推荐使用FormData对象，它能自动收集表单数据并支持文件上传，兼容IE10及以上版本，适合普通提交和AJAX请求；其次可手动拼接URL查询字符串，通过遍历表单元素生成name=value格式的字符串，适用于轻量级或需兼容旧浏览器的场景；最后是将表单转为JSON格式，便于对接RESTAPI，利用JavaScript构造对象后序列化为JSON字符串，适合后端期望接收JSON数据的情况。根据实际需求选择合适方式即可。

2025-11-16 23:12:05

225

js脚本如何制作页面元素渐变背景_js渐变背景动态效果脚本编写通过JavaScript动态修改CSS线性渐变实现背景动画，使用setInterval或requestAnimationFrame定时更新角度与颜色，结合transition使过渡更流畅，配合border-radius等样式增强视觉效果，形成平滑且美观的渐变动画。

2025-11-16 23:09:08

766

Promise异步编程入门_从回调地狱中解脱 Promise是解决回调地狱的关键，它通过pending、fulfilled、rejected三种状态管理异步操作，支持.then()、.catch()、.finally()链式调用，提升代码可读性与错误处理能力。

2025-11-16 23:09:06

770

Forge AES解密中的填充问题与解决方案本文深入探讨了在使用JavaScriptforge库进行AES解密时，因默认填充机制导致文本截断的问题。核心解决方案是，当加密端未应用PKCS#7填充或使用了其他填充方式时，需在forge解密时通过decipher.finish(()=>true)显式禁用默认的PKCS#7去填充操作，以确保完整恢复原始明文。文章还强调了填充一致性、ECB模式的安全隐患及密钥派生最佳实践。

2025-11-16 23:08:12

337

怎样开发一个轮播图插件_JavaScript轮播图插件开发完整教程轮播图插件开发需掌握核心逻辑：图片切换、自动播放、按钮控制与指示器同步。1.采用面向对象设计，支持配置参数与独立作用域；2.HTML结构简洁，包含轮播项、按钮与指示器；3.创建Carousel构造函数，初始化元素与参数；4.绑定事件监听，实现左右切换与指示器跳转；5.核心方法next、prev、goTo更新当前索引并调用update同步UI；6.自动播放通过setInterval实现，用户交互时重置计时器；7.调用newCarousel传入容器与选项即可启用。插件结构清晰，易于扩展动画与触摸功能

2025-11-16 23:05:02

698

相关专题

更多>

热门推荐

开源免费商场系统

广告

热门教程

更多>

相关推荐

热门推荐

最新课程

JavaScript

86184次学习
收藏
JavaScript教程

120651次学习
收藏
JavaScript 参考手册

296807次学习
收藏

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明举报中心意见反馈讲师合作广告合作最新更新 English: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

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

PHP学习

技术支持

返回顶部