JavaScript中this指向问题
2021/9/13 22:05:42
本文主要是介绍JavaScript中this指向问题,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是一成不变的,它会随着执行环境的改变而改变。
This指向的几种常见方式:
1、在方法中的this调用,在方法中this指向的是调用该方法的对象
2、在函数中调用,this指向window。
3、在构造函数中调用,this指向构造出来的对象(也就是指向通过new关键字创造的对象)
4、call、bind、apply方式调用,this指向这些方法的第一个参数
5、在事件中的this,this表示接收事件的元素
1、方法中的this调用
哪个对象调用了该方法this就指向该对象
var fn =function(){ console.log(this.name); } var obj={ name:'张三', say:function(){ console.log(this.name); }, foo:fn } var obj2={ name:'李四', foo:fn } obj.foo()//张三 obj2.foo()//李四 obj.say()//张三
2、函数中this调用
函数中的this指向window,也就是全局对象,我们声明的a是一个全局变量
所以this.a就是指向了全局变量a,就输出了2
var a=2 function fn(){ console.log(this.a);//2 console.log(this.a==window.a);//true } fn()
3、构造函数中的this调用
构造函数中,this指向new出的实例对象
// 构造函数 function Person(name,age){ this.name=name this.age=age } // new了一个构造函数的实例对象 var person = new Person('李四',20) console.log(person.name);//李四 console.log(person.age);//20
4、call、bind、apply方式调用
使用了这三个方法,this就是指向了这三个方法的第一个参数,其实就是参数绑定的执行环境的对象,具体可以看我上一篇这三个用法的介绍。这里要的是注意bind返回的是一个函数。使用这个三个方法就实现this“指哪就打哪”的功能
function foo(){ console.log(this.name); } var obj1={ name:'李四', } var obj2={ name:'张三' } foo.call(obj1)//张三 this指向obj1 foo.call(obj2)//李四 this指向obj2 foo.apply(obj1)//张三 foo.apply(obj1)//李四 foo.bind(obj1)()//张三 foo.bind(obj2)()//李四
5、事件中this的调用
在事件中this指向了接收该事件的元素
<button onclick="this.style.display='none' console.log(this)"> 点我后我就消失了 </button>
点击按钮触发事件后的输出结果
6.案例
以下这案例大家可以猜猜输出什么,这个是牛客网上的题目
var myObject = { foo: "bar", func: function() { var self = this; console.log(this.foo); console.log(self.foo); (function() { console.log(this.foo); console.log(self.foo); }()); } }; myObject.func();
你做对了吗?
1.第一个this.foo输出bar,因为当前this指向对象myObject。
2.第二个self.foo输出bar,因为self是this的副本,同指向myObject对象。
3.第三个this.foo输出undefined,因为这个IIFE(立即执行函数表达式)中的this指向window。
4.第四个self.foo输出bar,因为这个匿名函数所处的上下文中没有self,所以通过作用域链向上查找,从包含它的父函数中找到了指向myObject对象的self。
7、总结
this总是指向函数的直接调用者(而非间接调用者)
如果有new关键字,this指向new出来的那个对象
在事件中,this指向触发这个事件的对象
总之,谁调用就指向谁
这篇关于JavaScript中this指向问题的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-30我的第一个Go命令行工具
- 2024-09-30初学者指南:轻松掌握模块化编程
- 2024-09-30顶级5款免费的IntelliJ插件,助你Java开发之路更顺畅
- 2024-09-30提高应用程序可用性:冗余和持久性
- 2024-09-30Twitter 系统设计面试示例
- 2024-09-30JSON对象入门教程:轻松掌握基础用法
- 2024-09-30封装入门:Java面向对象编程的第一步
- 2024-09-30后台交互入门:轻松掌握基础知识与实践技巧
- 2024-09-30轻松入门:后台交互教程详解
- 2024-09-30后台交互项目实战:新手指南