返回顶部
首页 > 资讯 > 前端开发 > JavaScript >javascript改变this指向的方法汇总
  • 950
分享到

javascript改变this指向的方法汇总

2024-04-02 19:04:59 950人浏览 独家记忆
摘要

目录一、this指向1、全局作用下,this指向的是window2、函数独立调用时,函数内部的this也指向window3、被嵌套的函数独立调用时,this默认指向了window4、

一、this指向

this随处可见,一般谁调用,this就指向谁。this在不同环境下,不同作用下,表现的也不同。

以下几种情况,this都是指向window

1、全局作用下,this指向的是window

console.log(window);
console.log(this);
console.log(window == this); // true

2、函数独立调用时,函数内部的this也指向window

function fun() {
   console.log('我是函数体');
   console.log(this);  // Window 
}
fun();

3、被嵌套的函数独立调用时,this默认指向了window

function fun1() {
    function fun2() {
        console.log('我是嵌套函数');
        console.log(this);  // Window
    }
    fun2();
}
fun1();

4、自调执行函数(立即执行)中内部的this也是指向window

(function() {
    console.log('立即执行');
    console.log(this);   // Window
})()

需要额外注意的是:

  • 构造函数中的this,用于给类定义成员(属性和方法)
  • 箭头函数中没有this指向,如果在箭头函数中有,则会向上一层函数中查找this,直到window

二、改变this指向

1、call() 方法

call() 方法的第一个参数必须是指定的对象,然后方法的原参数,挨个放在后面。

(1)第一个参数:传入该函数this执行的对象,传入什么强制指向什么;
(2)第二个参数开始:将原函数的参数往后顺延一位

用法: 函数名.call()

function fun() {
    console.log(this);  // 原来的函数this指向的是 Window
}
fun();
 
function fun(a, b) {
    console.log(this); // this指向了输入的 字符串call
    console.log(a + b);
}
//使用call() 方法改变this指向,此时第一个参数是 字符串call,那么就会指向字符串call
fun.call('call', 2, 3)  // 后面的参数就是原来函数自带的实参

2、apply() 方法

apply() 方法的第一个参数是指定的对象,方法的原参数,统一放在第二个数组参数中。

(1)第一个参数:传入该函数this执行的对象,传入什么强制指向什么;
(2)第二个参数开始:将原函数的参数放在一个数组中

用法: 函数名.apply()

function fun() {
    console.log(this);  // 原来的函数this指向的是 Window
}
fun();
 
function fun(a, b) {
    console.log(this); // this指向了输入的 字符串apply
    console.log(a + b);
}
//使用apply() 方法改变this指向,此时第一个参数是 字符串apply,那么就会指向字符串apply
fun.apply('apply', [2, 3])  // 原函数的参数要以数组的形式呈现

3、bind() 方法

bind() 方法的用法和call()一样,直接运行方法,需要注意的是:bind返回新的方法,需要重新调用是需要自己手动调用的

用法: 函数名.bind()

function fun() {
    console.log(this);  // 原来的函数this指向的是 Window
}
fun();
 
function fun(a, b) {
    console.log(this); // this指向了输入的 字符串bind
    console.log(a + b);
}
//使用bind() 方法改变this指向,此时第一个参数是 字符串bind,那么就会指向字符串bind
let c = fun.bind('bind', 2, 3);
c(); // 返回新的方法,需要重新调用
// 也可以使用下面两种方法进行调用
// fun.bind('bind', 2, 3)();
// fun.bind('bind')(2, 3);

到此这篇关于javascript改变this指向的方法汇总的文章就介绍到这了,更多相关javascript改变this指向内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: javascript改变this指向的方法汇总

本文链接: https://lsjlt.com/news/167671.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • javascript改变this指向的方法汇总
    目录一、this指向1、全局作用下,this指向的是window2、函数独立调用时,函数内部的this也指向window3、被嵌套的函数独立调用时,this默认指向了window4、...
    99+
    2024-04-02
  • JavaScript怎么改变this指向
    本文小编为大家详细介绍“JavaScript怎么改变this指向”,内容详细,步骤清晰,细节处理妥当,希望这篇“JavaScript怎么改变this指向”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,...
    99+
    2024-04-02
  • 如何改变函数的this指向
    本篇内容介绍了“如何改变函数的this指向”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! 如果是函数声明...
    99+
    2024-04-02
  • JavaScript中this指向方法实例分析
    这篇文章主要讲解了“JavaScript中this指向方法实例分析”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript中this指向方法实例分...
    99+
    2024-04-02
  • JavaScript深入刨析this的指向以及如何修改指向
    目录this方法中对象中隐藏的this严格模式可以改变this指向this 老规矩先看代码: 方法中 function test(){ console.log(this)...
    99+
    2024-04-02
  • javascript中的this指向什么
    这篇文章主要介绍“javascript中的this指向什么”,在日常操作中,相信很多人在javascript中的this指向什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”...
    99+
    2024-04-02
  • 怎么修改Vue.js this的指向
    这篇文章主要讲解了“怎么修改Vue.js this的指向”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么修改Vue.js this的指向”吧!修改 thi...
    99+
    2024-04-02
  • javascript的this指向怎么理解
    本文小编为大家详细介绍“javascript的this指向怎么理解”,内容详细,步骤清晰,细节处理妥当,希望这篇“javascript的this指向怎么理解”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深...
    99+
    2024-04-02
  • JavaScript中的this关键词指向
    目录1、es5中的this的指向2、es6中的this1、es5中的this的指向 this是JavaScript的一个关键字,他是函数执行过程中,自动生成的一个内部对象,指当前的对...
    99+
    2024-04-02
  • JavaScript进阶学习之初识类、函数进阶、如何改变this指向
    以上就是JavaScript进阶学习之初识类、函数进阶、如何改变this指向的详细内容,更多请关注编程网其它相关文章!...
    99+
    2022-11-22
    javascript
  • javascript改变鼠标指针形状的方法
    这篇文章主要介绍javascript改变鼠标指针形状的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!javascript改变鼠标指针形状的方法:首先新建文件,创建div,id为a,并赋予宽高与背景色;然后添加sc...
    99+
    2023-06-14
  • JavaScript中的this指向问题详解
    前言 相信我,只要记住本文的 7️⃣ 步口诀,就能彻底掌握 JS 中的 this 指向。 先念口诀:箭头函数、new、bind、apply 和 call、欧...
    99+
    2024-04-02
  • JavaScript中 this 的绑定指向规则
    目录问题来源this 绑定规则1.默认绑定2.隐式绑定3.显示绑定4.new 绑定5.内置方法6.规则优先级7.规则之外8.实践问题来源 在 js 中,...
    99+
    2024-04-02
  • JavaScript中this指向的示例分析
    小编给大家分享一下JavaScript中this指向的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!this先看代码:方法中function t...
    99+
    2023-06-25
  • MySQL修改密码方法汇总
    MySQL5.7版本之前修改密码的方法: 方法1: 用SET PASSWORD命令 mysql -u root mysql> SET PASSWORD FOR 'root'@'localhost' ...
    99+
    2024-04-02
  • javascript改变css的方法
    这篇文章将为大家详细讲解有关javascript改变css的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。javascript改变css的方法:首先新建一个html文件,并使用p标签创建一行文字;然后...
    99+
    2023-06-14
  • javascript函数的4种调用方式与this的指向
    目录独立调用和方法调用构造函数调用间接调用严格模式下javascript 中作用域链和 this(上下文)的指向是很容易混淆的,简单的说就是: 作用域链取决于函数声明的位置,函数声明...
    99+
    2023-05-19
    javascript函数调用方式 javascript函数调用 javascript this指向 javascript this
  • JavaScript this的原理以及指向详解
    怎么判断this指向? ①在全局环境中调用就指向window。 ②作为对象的方法调用就指向该对象。 ③作为构造函数调用就指向这个新创建的对象。 ④可...
    99+
    2024-04-02
  • JavaScript 自定义对象方法汇总
    目录一使用object创建对象二使用构造函数创建对象三字面量创建对象四this关键字this表示当前对象五基本数据类型和引用数据类型基本数据类型引用数据类型六闭包如何理解闭包?闭包的...
    99+
    2024-04-02
  • JavaScript删除字符串中指定字符的4种方法汇总
    目录方法一:使用replace()方法方法二:使用slice()方法方法三:使用substring()方法方法四:分隔成数组补充:js去掉字符串中的某个字段,字符,标点符号...
    99+
    2022-12-09
    js字符串中删除指定字符 js去掉字符串中的某个字符 js去除字符串中某个字符
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作