JavaScript函数中this指向问题详解

 更新时间:2021年05月07日 09:59:24   作者:一颗不甘坠落的流星  
这篇文章主要给大家介绍了关于JavaScript函数中this指向问题的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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); 
/* 基本等同于 Math.max(numbers[0], ...) 或 Math.max(5, 6, ..) */
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指向内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Javascript实现base64的加密解密方法示例

    Javascript实现base64的加密解密方法示例

    下文是base64用javascript写出来的函数和方法。非常不错,具有参考借鉴价值,需要的的朋友参考下吧
    2017-06-06
  • 微信小程序实现红包功能(后端PHP实现逻辑)

    微信小程序实现红包功能(后端PHP实现逻辑)

    这篇文章主要为大家详细介绍了微信小程序实现红包功能,以及后端PHP实现逻辑,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • javascript将中国数字格式转换成欧式数字格式的简单实例

    javascript将中国数字格式转换成欧式数字格式的简单实例

    下面小编就为大家带来一篇javascript将中国数字格式转换成欧式数字格式的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • JavaScript中的全局对象介绍

    JavaScript中的全局对象介绍

    这篇文章主要介绍了JavaScript中的全局对象介绍,对于任何JavaScript程序,当程序开始运行时,JavaScript解释器都会初始化一个全局对象以供程序使用,需要的朋友可以参考下
    2015-01-01
  • 用函数式编程技术编写优美的 JavaScript_ibm

    用函数式编程技术编写优美的 JavaScript_ibm

    函数式编程语言在学术领域已经存在相当长一段时间了,但是从历史上看,它们没有丰富的工具和库可供使用。随着 .NET 平台上的 Haskell 的出现,函数式编程变得更加流行。一些传统的编程语言,例如 C++ 和 JavaScript,引入了由函数式编程提供的一些构造和特性。在许多情况下,JavaScript 的重复代码导致了一些拙劣的编码。如果使用函数式编程,就可以避免这些问题。此外,可以利用函数式编程风格编写更加优美的回调。
    2008-05-05
  • JS实现页面滚动到关闭时的位置与不滚动效果

    JS实现页面滚动到关闭时的位置与不滚动效果

    这篇文章主要介绍了JS实现页面滚动到关闭时的位置与不滚动效果,滚动有两种方案,其一,利用路由中的meta,在离开页面时缓存 top 信息,其二,利用keep-alive缓存整个页面。但是仅限于没有实时数据变动的页面,需要的朋友可以参考下本文
    2022-06-06
  • IntersectionObserver API 详解篇

    IntersectionObserver API 详解篇

    这篇文章主要介绍了IntersectionObserver API 详解篇,需要的朋友可以参考下
    2016-12-12
  • 新浪微博字数统计 textarea字数统计实现代码

    新浪微博字数统计 textarea字数统计实现代码

    从新浪微博代码里抄的,非常不错,需要的朋友可以参考下。
    2011-08-08
  • 使用js实现雪花飘落效果

    使用js实现雪花飘落效果

    以下是对使用js实现雪花飘落的效果进行了介绍。需要的朋友可以 过来参考下
    2013-08-08
  • 原生JS封装vue Tab切换效果

    原生JS封装vue Tab切换效果

    这篇文章主要为大家详细介绍了原生JS封装vue Tab切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04

最新评论