当前位置: 首页 > news >正文

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.lryc.cn/news/206296.html

相关文章:

  • 酷开科技 | 酷开系统大屏电视,打造精彩家庭场景
  • GDPU 数据结构 天码行空6
  • 机器学习实验三:决策树-隐形眼镜分类(判断视力程度)
  • 广州华锐互动:VR技术应用到工程项目施工安全培训的好处
  • Hadoop3.0大数据处理学习1(Haddop介绍、部署、Hive部署)
  • C笔记:引用调用,通过指针传递
  • 【方法】如何给PDF文件添加“打开密码”?
  • 单源最短路径 -- Dijkstra
  • Java--多态及抽象类与接口
  • Python手搓C4.5决策树+Azure Adult数据集分析
  • 【tg】6: MediaManager的主要功能
  • NPM-安装报错connect ETIMEDOUT
  • 机器学习之查准率、查全率与F1
  • *Django中的Ajax 纯js的书写样式1
  • 谈谈node架构中的线程进程的应用场景、事件循环及任务队列
  • http代理IP它有哪些应用场景?如何提升访问速度?
  • Armv8/Armv9的VIPT的别名问题是如何解决的
  • java/javaswing/窗体程序,人脸识别系统,人脸追踪,计算机视觉
  • 设计模式(16)迭代器模式
  • Openssl数据安全传输平台011:秘钥协商服务端
  • 【23种设计模式】里氏替换原则
  • 嵌入式系统设计师考试笔记之操作系统基础复习笔记一
  • Unity开发之观察者模式(事件中心)
  • 16、window11+visual studio 2022+cuda+ffmpeg进行拉流和解码(RTX3050)
  • 【C++笔记】如何用检查TCP或UDP端口是否被占用
  • “华为杯”研究生数学建模竞赛2015年-【华为杯】D题:面向节能的单/多列车优化决策问题
  • 『第三章』雨燕栖息地:Swift 开发环境
  • elasticsearch-5.6.15集群部署,如何部署x-pack并添加安全认证
  • C++ list 模拟实现
  • Elasticsearch:使用 Open AI 和 Langchain 的 RAG - Retrieval Augmented Generation (三)