this指向问题
2021/10/13 6:16:17
本文主要是介绍this指向问题,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
首先补一下 this 是什么?
this 是和执行上下文绑定的,也就是说每个执行上下文中都有一个 this。
箭头函数和普通函数的区别如下:
普通函数:根据调用我的人(谁调用我,我的this就指向谁)
箭头函数:根据所在的环境(我定义在哪个作用域,我的this就指向谁)
1.普通函数 --- this指向函数的调用对象
var name = '不想打代码'; function f() { var name = '但没办法啊'; console.log(this.name); //不想打代码 console.log(this); //window } f();
2.对象方法中调用 ---- this 指向上级对象
var name = '不想秃头'; var obj = { name: "不秃也得秃", fn: function() { console.log(this.name); //不秃也得秃 } } obj.fn();
【注1】这里要注意一点,就是在对象中可能有多层嵌套的对象,但是this指向的都是他调用地方的上级对象
var obj = { name: "打代码使我快乐???", b: { name: "打代码", fn: function() { console.log(this.name); // 打代码 } } } obj.b.fn();
如上,虽然是在obj里面this调用,但是因为是在obj.b这个对象中,所以this指向的是 obj.b
【注2】注意不能只看上级对象,更关键的是调用对象
var name = '猪吧!'; var obj = { name: "柯基?", b: { name: "猫吧!", fn: function() { console.log(this.name); // 猪吧! } } } var f = obj.b.fn; f()
如上,this其实是在f执行的时候调用的,这时候,f的this的调用对象是window,那么就可以理解window.name 为 输出的是全局中name变量="猪吧"
【小结】在对象方法中的this的指向主要是看他最终调用的位置,它是由谁调用的,如果调用对象有多层,this指向的是this的上级对象
3.构造函数 --- this指向new出来的对象
function Fn() { this.name = "努力打代码"; } var a = new Fn(); console.log(a.name); //努力打代码
new 的过程其实也是初始化了一个新的对象,然后用新的对象调用原先的函数 Fn.call(a) 这个情况跟下面这种情况类似了。
4.apply, call, bind 通过改变函数的调用对象而改变this的指向
function foo() { console.log('name:', this.name); //输出的是我 } var name = "输出的是谁?"; foo.call({ name: "输出的是我" }); //foo函数的调用对象变成了 { name: "输出的是我" },所以this指向发生了变化
5.箭头函数this的指向 ---- this指向其定义时候的对象
function foo() { var name = 1 setTimeout(() => { console.log('name:', this.name); //输出的是谁? }, 0) } var name = "输出的是谁?"; foo({ name: "输出的是我" });
图1: 箭头函数,this指向定义时候的对象,foo在window作用域下,所以this指向window; ===> 箭头函数的外层,foo函数的this就是window对象
这篇关于this指向问题的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-29P标签教程:初学者必备指南
- 2024-09-29PS网页切图教程:新手必学的网页设计技巧
- 2024-09-29简单易懂的Web布局教程
- 2024-09-29Web网页开发教程:从零开始的简单入门指南
- 2024-09-298D项目实战:新手入门教程
- 2024-09-29变形项目实战:新手必备入门指南
- 2024-09-29弹性盒子布局项目实战:从入门到上手
- 2024-09-29点击加载项目实战:新手入门必读教程
- 2024-09-29电商网页开发项目实战:新手入门教程
- 2024-09-29封装项目实战:从入门到初级应用