你不知道的javascript之this的全面解析之绑定规则(一)

2023-10-27

1.1 默认绑定

首先介绍的是函数调用类型:独立函数调用,在没有其他应用下的默认规则。
首先看以下代码

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

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

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

1.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绑定到这个上下文对象。
对象属性引用链只有上一层或者说最后一层在调用中起作用。

function foo(){
    console.log(this.a);
}

var obj = {
    a : 12,
    foo : foo
}

var obj2 = {
    a : 2,
    obj : obj
}

obj2.obj.foo()//12

1.2.1 隐式丢失

type1 :

function foo(){
    console.log(this.a);
}

var obj = {
    a : 2,
    foo : foo    
}

var bar = obj.foo;
var a = "happy new year";
bar ();//happy new yaer

type2 :

function foo(){
    console.log(this.a);
}

function doFoo(fn){
    fn();
}

var obj = {
    a : 2,
    foo:foo
}

var a = "hello world";

doFoo(obj.foo)//hello world

type3 :

function foo (){
    console.log(this.a);
}

var obj = {
    a : 2,
    foo : foo
}
var a = "gril !";
setTimeout(obj.foo,1000);//gril !

大家看了上述对this的解释,是否对this有了更加深刻的了解了呢?尽请看下期。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

你不知道的javascript之this的全面解析之绑定规则(一) 的相关文章

随机推荐

  • 栈系列之 递归实现一个栈的逆序

    算法专题导航页面 算法专题 栈 栈系列之 栈排序 栈系列之 最小栈的实现 栈系列之 用栈实现队列 栈系列之 递归实现一个栈的逆序 题目 使用递归来完成一个栈的逆序操作 其他限制 不能借助任何其他数据结构 图示 无 分析 递归思想原本就和栈这
  • 力扣第五十三道最大子数组和

    题目 给你一个整数数组 nums 请你找出一个具有最大和的连续子数组 子数组最少包含一个元素 返回其最大和 子数组 是数组中的一个连续部分 输入 nums 2 1 3 4 1 2 1 5 4 输出 6 解释 连续子数组 4 1 2 1 的和
  • Exploring Large Language Models for Knowledge Graph Completion

    本文是LLM系列文章 针对 Exploring Large Language Models for Knowledge Graph Completion 的翻译 探索用于知识图谱补全的大型语言模型 摘要 1 引言 2 相关工作 3 方法 4
  • C/C++中的日期和时间

    C C 中的日期和时间 撰文 周翔 摘要 本文从介绍基础概念入手 探讨了在C C 中对日期和时间操作所用到的数据结构和函数 并对计时 时间的获取 时间的计算和显示格式等方面进行了阐述 本文还通过大量的实例向你展示了time h头文件中声明的
  • 数据结构---单链表的增删改查(C语言实现)

    链表的创建 链表元素插入 头插 尾插 指定位置插入 链表元素的删除 链表元素的查看 1 链表的创建 有头链表 有头链表的创建就是创建一个头结点代表此链表 用一个结构体指针指向头结点 通常称为头指针 方便找到此链表 头结点的数据域一般不做处理
  • 软件测试笔记(五)- 动态黑盒测试

    了解在没有代码的情况甚至不懂得编程的情况下的软件测试技术 一 动态黑盒测试 戴上眼罩测试软件 不深入代码细节测试软件的方法称为 动态黑盒测试 它是动态的 因为程序在运行 软件测试员像用户一样使用它 同时 它是黑盒子 因为测试时不知道程序如何
  • STViT-R 代码阅读记录

    目录 一 SwinTransformer 1 原理 2 代码 二 STViT R 1 中心思想 2 代码与原文 本次不做具体的训练 只是看代码 所以只需搭建它的网络 执行一次前向传播即可 一 SwinTransformer 1 原理 主要思
  • H5C3部分面试题汇总

    1 HTML和HTML5 CSS和CSS3相比 有什么变化 HTML5中新增的内容有 自定义属性 data id 语义化更好的内容标签 header nav footer aside article section 音频 视频标签 audi
  • 复习之linux系统中的软件管理

    一 linux系统中软件包 1 软件包的类型 注意在rhel8中只能使用绿色软件 源码编译软件和rpm软件 类型 支持的条件 DEB UBlinux DEBlinux 用不了 RPM redhat centOS fadora bz2 gz
  • 栈破坏的分析

    在程序运行中 栈主要用来保存局部变量 函数参数 函数调用的返回地址以及栈底 以x86为例 与栈关系比较大的几个寄存器主要是 ebp 基址指针寄存器 extended base pointer 其内存放着一个指针 该指针永远指向系统栈最上面一
  • jvm-04运行时数据区(方法区)

    1 堆 栈 方法区的交互关系 运行时数据区结构图 堆 栈 方法区的交互关系 2 方法区的理解 Java虚拟机规范 中明确说明 尽管所有的方法区在逻辑上属于堆的一部分 但一些简单的实现可能不会选择去进行垃圾收集或者进行压缩 但对于HotSpo
  • QSPI协议详解(二)

    1 QSPI协议简介 QSPI是Queued SPI的简写 是Motorola公司推出的SPI接口的扩展 比SPI应用更加广泛 在SPI协议的基础上 Motorola公司对其功能进行了增强 增加了队列传输机制 推出了队列串行外围接口协议 即
  • Linux和Windows中下载FFmpeg

    Linux和Windows中下载FFmpeg 注意 在Linux下下载FFmpeg 必须要让 usr local ffmpeg中的目录为空 否则无法生成新的版本内容 我就是了 1 Linux下 1 打开官网 点击Download 然后点击L
  • coderforces round 894(div.3)

    Problem A Codeforces AC代码 include
  • 【跑实验03】如何可视化GT边界框,如何选择边界框内部的边界框,如何可视化GT框和预测框,如何定义IoU阈值下的不同边界框?

    文章目录 一 如何可视化GT边界框 二 GT框和预测框的可视化 三 根据IoU阈值来选择 一 如何可视化GT边界框 from PIL import Image ImageDraw def draw bboxes image bboxes c
  • Spring实现控制反转(IOC)的三种方式(零)——理解IOC

    学过Spring的应该都知道Spring的IOC和AOP 然而我刚接触Spring不久 学习了IOC 发现掌握的不是很好 停留在概念上 今天就以例子来总结一下Spring的IOC 也希望各位大大能够指点迷津 IOC 也就是控制反转 创建对象
  • 函数重载与函数模板

    键盘输入10个数 可能为整形 浮点型 双精度型及其字符类型 分别利用函数重载和函数模板 求出其中的最大值和最小值 函数重载 include
  • 连接数据库报错 -- Access denied for user ‘‘@‘192.168.121.1‘ (using password: NO)

    问题 用idea配置好数据库配置文件application yml 在连接虚拟机数据库时 控制台报错 Access denied for user 192 168 121 1 using password NO 解决方法 1 密码配置出错
  • Win10及Win11安装及使用Wsl2 Linux子系统

    一 安装Wsl2 环境要求 必须运行 Windows 10 版本 2004 及更高版本 内部版本 19041 及更高版本 或 Windows 11 WSL2 是 WSL 1 的升级版 带来的主要优势 提高文件系统性能 支持完全的系统调用兼容
  • 你不知道的javascript之this的全面解析之绑定规则(一)

    1 1 默认绑定 首先介绍的是函数调用类型 独立函数调用 在没有其他应用下的默认规则 首先看以下代码 function foo console log this a var a 2 foo 2 我们可以看到调用foo 时 this a被解析