JS中this的绑定规则

如果有人问你this指向哪里?但又不给你说调用位置,那他就是在耍流氓。 – 龚港浩

1、默认绑定

首先要介绍的是最常用的函数调用类型:独立函数调用。可以把这条规则看作是无法应用其他规则时的默认规则。

function foo() {console.log( this.a );
}
var a = 2;
foo(); // 2

你应该注意到的第一件事是,声明在全局作用域中的变量(比如 var a = 2)就是全局对象的一个同名属性。它们本质上就是同一个东西,并不是通过复制得到的。

接下来我们可以看到当调用 foo() 时,this.a 被解析成了全局变量 a。为什么?因为在本例中,函数调用时应用了 this 的默认绑定,因此 this 指向全局对象。那么我们怎么知道这里应用了默认绑定呢?可以通过分析调用位置来看看 foo() 是如何调用的。在代码中,foo() 是直接使用不带任何修饰的函数引用进行调用的,因此只能使用默认绑定,无法应用其他规则。

如果使用严格模式(strict mode),那么全局对象将无法使用默认绑定,因此 this 会绑定到 undefined:

function foo() {"use strict";console.log( this.a );
}
var a = 2;
foo(); // TypeError: this is undefined

2、隐式绑定

另一条需要考虑的规则是调用位置是否有上下文对象,或者说是否被某个对象拥有或者包含,不过这种说法可能会造成一些误导。

function foo() {console.log( this.a );
}
var obj = {a: 2,foo: foo
};
obj.foo(); // 2

首先需要注意的是 foo() 的声明方式,及其之后是如何被当作引用属性添加到 obj 中的。但是无论是直接在 obj 中定义还是先定义再添加为引用属性,这个函数严格来说都不属于obj 对象。

然而,调用位置会使用 obj 上下文来引用函数,因此你可以说函数被调用时 obj 对象“拥有”或者“包含”它。

无论你如何称呼这个模式,当 foo() 被调用时,它的落脚点确实指向 obj 对象。当函数引用有上下文对象时,隐式绑定规则会把函数调用中的 this 绑定到这个上下文对象。因为调用 foo() 时 this 被绑定到 obj,因此 this.a 和 obj.a 是一样的。

对象属性引用链中只有最顶层或者说最后一层会影响调用位置。举例来说:

function foo() {console.log( this.a );
}
var obj2 = {a: 42,foo: foo
};
var obj1 = {a: 2,obj2: obj2
};
obj1.obj2.foo(); // 42

3、显式绑定

就像我们刚才看到的那样,在分析隐式绑定时,我们必须在一个对象内部包含一个指向函数的属性,并通过这个属性间接引用函数,从而把 this 间接(隐式)绑定到这个对象上。那么如果我们不想在对象内部包含函数引用,而想在某个对象上强制调用函数,该怎么做呢?

JavaScript 中的“所有”函数都有一些有用的特性,可以用来解决这个问题。具体点说,可以使用函数的 call(…) 和apply(…) 方法。严格来说,JavaScript 的宿主环境有时会提供一些非常特殊的函数,它们并没有这两个方法。但是这样的函数非常罕见,JavaScript 提供的绝大多数函数以及你自己创建的所有函数都可以使用 call(…) 和 apply(…) 方法。

这两个方法是如何工作的呢?它们的第一个参数是一个对象,它们会把这个对象绑定到this,接着在调用函数时指定这个 this。因为你可以直接指定 this 的绑定对象,因此我们称之为显式绑定。

function foo() {console.log( this.a );
}
var obj = {a:2
};
foo.call( obj ); // 2

通过 foo.call(…),我们可以在调用 foo 时强制把它的 this 绑定到 obj 上。

如果你传入了一个原始值(字符串类型、布尔类型或者数字类型)来当作 this 的绑定对象,这个原始值会被转换成它的对象形式(也就是 new String(…)、new Boolean(…) 或者new Number(…))。这通常被称为“装箱”。

4、new绑定

首先我们重新定义一下 JavaScript 中的“构造函数”。在 JavaScript 中,构造函数只是一些使用 new 操作符时被调用的函数。它们并不会属于某个类,也不会实例化一个类。实际上,它们甚至都不能说是一种特殊的函数类型,它们只是被 new 操作符调用的普通函数而已。

使用 new 来调用函数,或者说发生构造函数调用时,会自动执行下面的操作:

  1. 创建(或者说构造)一个全新的对象
  2. 这个新对象会被执行 [[ 原型 ]] 连接
  3. 这个新对象会绑定到函数调用的 this
  4. 如果函数没有返回其他对象,那么 new 表达式中的函数调用会自动返回这个新对象
function foo(a) {this.a = a;
}
var bar = new foo(2);
console.log( bar.a ); // 2

使用 new 来调用 foo(…) 时,我们会构造一个新对象并把它绑定到 foo(…) 调用中的 this上。new 是最后一种可以影响函数调用时 this 绑定行为的方法,我们称之为 new 绑定。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/118555.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

查找算法-斐波那契查找法(Fibonacci Search)

目录 查找算法-斐波那契查找法(Fibonacci Search) 1、说明 2、算法分析 3、C代码 查找算法-斐波那契查找法(Fibonacci Search) 1、说明 斐波那契查找法又称为斐氏查找法,此查找法和二分法一样都是以分割范围来进…

有六家机器视觉公司今年11月份初放假到明年春节后,除夕不放假看住企业不跑路,不倒闭,明年大家日子会越来越甜

不幸的消息一个接着一个,请大家注意下面的消息 我已经收到已经有6家机器视觉公司今年11月份初放假到明年春节后,他们真的没有订单了,其中4家宣布员工可以自行寻找工作,今年除夕不放假是经济下行经济考量吗?看住企业不…

如何避免阿里云对象储存OSS被盗刷

网站app图片的云端存储离不开对象存储oss,而最难为的问题就是app做的出名了,少不了同行的攻击,包含ddos,cc攻击以及oss外链被盗刷! 防盗链功能通过设置Referer白名单以及是否允许空Referer,限制仅白名单中的域名可以访…

OpenFeign实现分析、源码解析

什么是openfeign? 是springcloud全家桶的组件之一,其核心作用是为Rest API提供高效简洁的rpc调用方式。 为什么只定义接口而没有实现类? 源码解读(省略) 总结: 源码分析:如何发送http请求? …

竞赛 深度学习卫星遥感图像检测与识别 -opencv python 目标检测

文章目录 0 前言1 课题背景2 实现效果3 Yolov5算法4 数据处理和训练5 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 **深度学习卫星遥感图像检测与识别 ** 该项目较为新颖,适合作为竞赛课题方向,学长非常推荐…

图像处理入门 1(Introduction to image processing)

如何获得一张照片 (How to obtain a photo)? 每次看到一些光学设备的规格介绍的时候,一些专用名词,例如:等效焦距,曝光模式 等 让你一头雾水。爱学习的你一定十分好奇他们是什么意思。每次看到…

L2-026 小字辈 - java

L2-026 小字辈 时间限制 400 ms 内存限制 64 MB 题目描述: 本题给定一个庞大家族的家谱,要请你给出最小一辈的名单。 输入格式: 输入在第一行给出家族人口总数 N(不超过 100 000 的正整数) —— 简单起见&#xff0c…

vscode json文件添加注释报错

在vscode中创建json文件,想要注释一波时,发现报了个错:Comments are not permitted in JSON. (521),意思是JSON中不允许注释 以下为解决方法: 在vscode的右下角中找到这个,点击 在出现的弹窗中输入json wit…

封装一个PHP可控限速下载文件的方法

说明 实测下载后的文件与源文件哈希值一致,保证数据传输安全一致。如果下载到的文件每次都165KB左右,和源文件大小不符合,需要用IDE打开下载的文件,看看是否报致命错误,提示超过最大内存限制。这个与php.ini中的“mem…

Docker 深度清除镜像缓存 (overlay2)

Docker 深度清除镜像缓存 (overlay2) 一般情况下,运维清理镜像是通过命令 docker rm i 删除镜像的。但是这条命令不会删除docker build命令产生的缓存文件。 这个时候需要使用 docker system 的系列命令来做相关处理。 docker system --hel…

selenium4 元素定位

selenium4 9种元素定位 ID driver.find_element(By.ID,"kw")NAME driver.find_element(By.NAME,"tj_settingicon")CLASS_NAME driver.find_element(By.CLASS_NAME,"ipt_rec")TAG_NAME driver.find_element(By.TAG_NAME,"area")LINK_T…

python time 模块

时间的三种格式time模块中的其他函数时间三种格式之间的转化 一,时间的三种模块 在python中对于时间的描述存在三种格式:1,时间戳,2,时间结构体 3,按某种格式形式展示的字符串 1,时间戳 import time pr…

cola架构:有限状态机(FSM)源码分析

目录 0. cola状态机简述 1.cola状态机使用实例 2.cola状态机源码解析 2.1 语义模型源码 2.1.1 Condition和Action接口 2.1.2 State 2.1.3 Transition接口 2.1.4 StateMachine接口 2.2 Builder模式 2.2.1 StateMachine Builder模式 2.2.2 ExternalTransitionBuilder-…

Laplacian算子详解及例程

Laplacian算子是一种常用的边缘检测算法,它是通过对图像进行二阶微分来检测图像的边缘。Laplacian算子的优点是能够对不同方向的边缘进行检测,对于边缘的粗细和强度变化也比较敏感。 Laplacian算子的计算公式为: ∇f ∂f/∂x ∂f/∂y其中…

AUTOSAR汽车电子嵌入式编程精讲300篇-基于CAN总线的温度场测量装置的研究与设计

目录 前言 国内外研究现状 2 温度场测量装置的方案设计 2.1 技术指标

热搜榜:最热门的话题文本排行榜API接口

近年来,随着社交媒体的兴起,热门话题的数量和更新速度都在不断增加,因此热门话题排行榜的需求也越来越大。在这篇文章中,我们将探讨如何使用#热搜榜# API接口获取最热门的话题文本排行榜,并给出相关代码示例。 一、API…

Centos7 Linux系统下生成https的crt和key证书

linux下生成https的crt和key证书 步骤如下: x509证书一般会用到三类文,key,csr,crt Key 是私用密钥openssl格,通常是rsa算法。 Csr 是证书请求文件,用于申请证书。在制作csr文件的时,必须使…

电脑QQ如何录制视频文件?

听说QQ可以录制视频,还很方便,请问该如何录制呢?是需要先打开QQ才可以录制吗?还是可以直接使用快捷键进行录制呢?录制的质量又如何呢? 不要着急,既然都打开这篇文章看了,那小编今天…

苹果IOS安装IPA, plist形式 Safari 浏览器点击安装

快速链接 苹果开发者账号链接 网址: https://developer.apple.com/account 苹果应用上架链接 网址: https://appstoreconnect.apple.com/ 应用证书文件及打包 参考教程: 最新uniapp打包IOS详细步骤(2022) 证书在线制作工具 网址: https://app.121xuexi.…

【Javascript】通过浏览器书签构建与执行自动刷新脚本

0x00 前言 日常工作中,经常遇到需要时不时点一下刷新这样的事情(怪前端想不到写一个自动刷新) 但是…… 没有自动刷新按钮,在这页面手动点刷新还是太浪费时间了。 有时候懒得等了去做别的事情,过一小时回来刷新一下&a…