iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript函数中this指向问题详解
  • 776
分享到

JavaScript函数中this指向问题详解

2024-04-02 19:04:59 776人浏览 安东尼
摘要

this关键字 哪个对象调用函数,函数里面的this指向哪个对象。 **严格模式下:**在全局环境中,this指向的是undefined **非严格模式下:**在全局环境中,thi

this关键字

哪个对象调用函数,函数里面的this指向哪个对象。

**严格模式下:**在全局环境中,this指向的是undefined

**非严格模式下:**在全局环境中,this指向的是window

全局定义的函数直接调用,this => window


function fn(){
	console.log(this);
	// 此时 this 指向 window
}
fn();
// 相当于 window.fn()

对象内部的函数调用,this => 调用者


var obj = {
	fn:function(){
		console.log(this);
	}
}
obj.fn();
// 此时 this 指向 obj

定时器的处理函数,this => window


setTimeout(function(){
	console.log(this);	
},0)
// 此时定时器处理函数里面的this 指向 window

事件处理函数,this => 事件源


div.onclick = function(){
	console.log(this);
}
//当你点击 div 的时候,this指向 div

自调用函数,this => window


(function () {
  console.log(this)
})()
// 此时 this 指向 window

改变 this 指向

刚才我们说过的都是函数的基本调用方式里面的 this 指向,我们还有三个方法可以忽略函数本身的 this 指向转而指向别的地方。这三个方法就是 call / apply / bind,是强行改变 this 指向的方法。

  • call/apply/bind附加在函数调用后面使用,可以忽略函数本身的 this 指向
  • call和apply使用时会立即自动调用函数,bind使用时会创建一个函数,但是需要另外去手动调用

call

语法:fn.call(fn 函数体内 this 的指向哪里,arg1, arg2, ...);

作用:调用被绑定的函数fn,指定它的 this 指向并传参

参数:

  • 第一个参数:是 this 指向
  • 其余的参数:需要传入的值,可以是多个,用逗号隔开

使用 call 方法不传参


var num = 666;

function fn() {
  console.log('num = ', this.num);
}

fn.call();  // num = 666

使用 call 方法指定this


var name = 'Rose';
var obj = {name:'Jack'};
function fn(){
	console.log(this.name);
}
fn();	// Rose
fn.call();	// Rose
fn.call(obj);  // jack

使用 call 方法指定this并传参


var name = 'Rack';
var obj = {name:'Jack'};
function fn(a,b){
	console.log(this,a,b);
}
fn(1,2);	// window 1 2
fn.call(obj,1,2);	// obj 1 2
fn(1,3);	// window 1 3

apply

apply方法接受的是一个包含多个参数的数组

语法:fn.apply(fn 函数体内 this 的指向哪里,[arg1, arg2, ...]);

作用:调用被绑定的函数fn,指定它的 this 指向并传参

参数:

  • 第一个参数:this 指向的对象
  • 第二个参数:一个包含多个参数的数组

var obj = {name:'jack'};
function fn(a,b){
	console.log(this,a,b);
}
fn(1,2);	// window 1 2
fn.apply(obj,[1,2]);	// obj 1 2

使用 apply 合并数组

使用push将元素追加到数组中,如果参数是数组,它会将该数组作为单个元素添加,而不是将这个数组内的每个元素添加进去,因此我们最终会得到一个数组内的数组


var arr1 = [1,2];
var arr2 = [3,4];
arr1.push(arr2);
console.log(arr1);	//	[1,2,[3,4]]	

concat虽然可以合并数组,但它并不是将元素添加到现有数组,而是创建并返回一个新数组。


var arr1 = [1,2];
var arr2 = [3,4];

var arr3 = arr1.concat(arr2);
console.log(arr1);	// [1,2]
console.log(arr3);	// [1,2,3,4]

如果我们要将元素追加到现有数组又该怎么做?循环?No!这是apply就派上用场了


var arr1 = [1,2];
var arr2 = [3,4];

arr1.push.apply(arr1,arr2);
console.log(arr1);	// [1,2,3,4]

使用 apply 与内置函数连用



var numbers = [5, 6, 2, 3, 7];

var max = Math.max(numbers)
var min = Math.min(numbers)
console.log(min,max);	// NaN NaN

var max = Math.max.apply(null, numbers); 

var min = Math.min.apply(null, numbers);
console.log(min,max);	// 2 7

bind

语法:fn.bind(fn 函数体内 this 的指向, arg1, arg2, ...);

作用:创建一个新的绑定函数,指定它的 this 指向并传参,必须调用它才会被执行

参数:

  • 第一个参数:this 指向的对象
  • 其余的参数:需要传入的值,可以是多个,用逗号隔开

var obj = {name:'jack'};
function fn(a,b){
	console.log(this,a,b);
}
fn(1,2);	// window 1 2
fn.bind(obj,1,2);	// 未调用不执行
fn.bind(obj,1,3)()	// obj 1 3
var newFn = fn.bind(obj,3,4);
newFn();	// obj 1 4
newFn(5,6);	// obj 3 4

总结

到此这篇关于javascript函数中this指向问题的文章就介绍到这了,更多相关JavaScript函数this指向内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript函数中this指向问题详解

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

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

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript函数中this指向问题详解
    this关键字 哪个对象调用函数,函数里面的this指向哪个对象。 **严格模式下:**在全局环境中,this指向的是undefined **非严格模式下:**在全局环境中,thi...
    99+
    2022-11-12
  • JavaScript函数this指向问题详解
    目录一、 函数内 this 的指向1、普通函数2、构造函数3、对象方法4、事件绑定方法5、定时器函数6、立即执行函数二、改变函数内部 this 指向1、call 方法2、apply ...
    99+
    2022-11-12
  • JavaScript中的this指向问题详解
    前言 相信我,只要记住本文的 7️⃣ 步口诀,就能彻底掌握 JS 中的 this 指向。 先念口诀:箭头函数、new、bind、apply 和 call、欧...
    99+
    2022-11-12
  • 如何理解JavaScript函数this指向问题
    这篇文章给大家介绍如何理解JavaScript函数this指向问题,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。一、 函数内 this 的指向这些 this的指向,是当调用函数的时候确定的。 调用方式的不同决...
    99+
    2023-06-21
  • JavaScript 中this指向问题案例详解
    总结 全局环境 ➡️ window 普通函数 ➡️ window 或 undefined 构造函数 ...
    99+
    2022-11-12
  • 一文详解JavaScript中this指向的问题
    目录1. 默认绑定2. 隐式绑定3. 显示绑定4. new 绑定5. 箭头函数的this6. 优先级7. 总结前提:文章讨论的都是非严格模式下this指向 1. 默认绑定 例子1 ...
    99+
    2023-05-14
    JavaScript this指向 JavaScript this
  • JS函数(普通函数,箭头函数)中this的指向问题详解
    目录普通函数箭头函数普通函数 具名普通函数、匿名普通函数,在不作为对象的属性值的情况下,其内部的 this 总是指向代码运行环境下的全局对象 ( 例如,浏览器中的 window )。...
    99+
    2022-11-13
  • 详解JavaScript原型对象的this指向问题
    目录一、this指向二、修改this指向1、call()方法2、apply()方法总结 一、this指向 构造函数中的this 指向实例对象。那么原型对象this的指向呢? 如下:...
    99+
    2022-11-12
  • JavaScript中this指向问题怎么理解
    这篇文章主要介绍“JavaScript中this指向问题怎么理解”,在日常操作中,相信很多人在JavaScript中this指向问题怎么理解问题上存在疑惑,小编查阅了各式资料,...
    99+
    2022-10-19
  • Javascript中函数分类&this指向的实例详解
    JS中定义函数的三种方式 通过实例来说明吧 <script> //method1 function fn() { ...
    99+
    2022-11-12
  • JavaScript中this指向的问题怎么解决
    今天小编给大家分享一下JavaScript中this指向的问题怎么解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。1. 默...
    99+
    2023-07-05
  • JavaScript中的this指向问题怎么解决
    这篇文章主要介绍了一文搞懂JavaScript中的this指向问题的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇一文搞懂JavaScript中的this指向问题文章都会有所收获,下面我们一起来看看吧。this的...
    99+
    2023-07-04
  • JavaScript进阶教程之函数的定义、调用及this指向问题详解
    目录前言一:函数的定义 1.1 命名函数 1.2 匿名函数 1.3 利用 new Function() 声明函数1.4 重要结论&n...
    99+
    2022-11-13
  • JavaScript this绑定与this指向问题如何解决
    本篇内容主要讲解“JavaScript this绑定与this指向问题如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript this绑定与this指向问...
    99+
    2023-07-05
  • JS 箭头函数的this指向详解
    箭头函数是ES6中的新增特性,他没有自己的this,其this指向从外层代码库继承。 使用箭头函数时要注意一下几点: 箭头函数不能用作构造函数,用的话会抛出一个错误 ...
    99+
    2022-11-12
  • Vue中关于this指向的问题示例详解
    目录由Vue管理的函数不被vue管理的函数this指向大致分类总结在Vue中,方法体里用this调用vue实例的数据,有时会指向window,导致调用失败报错。 由Vue管理的函数 ...
    99+
    2022-11-13
  • 一文搞懂JavaScript中的this指向问题
    一、全局环境下的this指向在全局作用域下,this始终指向全局对象window,无论是否是严格模式!congsole.log()完整的写法是window.console.log(),window可以省略,window调用了console....
    99+
    2023-05-14
    javascript
  • JavaScript中this指向问题的示例分析
    这篇文章将为大家详细讲解有关JavaScript中this指向问题的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1. 箭头函数箭头函数排在第一个是因为它的 this 不会被改变,所以只要当前函数...
    99+
    2023-06-14
  • JS中的this指向问题详细介绍
    这篇文章主要介绍“JS中的this指向问题详细介绍”,在日常操作中,相信很多人在JS中的this指向问题详细介绍问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JS中的this...
    99+
    2022-10-19
  • 如何解决js中this指向问题
    本篇文章给大家分享的是有关如何解决js中this指向问题,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。JS中this指向问题相信我,只要记住本...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作