JavaScript中的各种函数以及this指向
发布于2021-11-08 05:42 阅读(1306) 评论(0) 点赞(0) 收藏(0)
1、普通函数
this指向window对象
- function fn(){
- console.log(this); // Window
- }
- fn()
2、对象中的方法
this指向该方法的所属对象
- const obj = {
- say:function(){
- console.log(this); //{say: ƒ}
- }
- }
- obj.say()
3、构造函数
this指向构造函数的实例化对象（原型上的方法同样如此）
- function Person(){
- Person.prototype.say = function(){
- console.log(this); // Person {}
- }
- }
- const hzy =new Person()
- hzy.say()
4、绑定事件函数
this指向事件绑定的对象
- const btn = document.querySelector('button');
- btn.onclick = function(){
- console.log(this); // <button>123</button>
- }
5、定时器函数
this指向window对象
- setTimeout(() => {
- console.log(this); // // Window
- }, 1000);
6、立即执行函数
this指向window对象
- (function(){
- console.log(this); // window
- })()
7、箭头函数
箭头函数没有自己this指向，里面的this指向外层作用域（如果箭头函数外层有函数，那么外层函数的this就是箭头函数的this，如果没有，则this指向window）
- //箭头函数外层没有函数
- let sum = (x,y)=>{
- console.log(this); //Window
- return x + y;
- }
- sum(1,2)
- //箭头函数外层有函数
- const btn = document.querySelector('button');
- btn.onclick = function () {
- let sum = (x, y) => {
- console.log(this); //this指向btn
- return x + y;
- }
- sum(1, 2)
- }
原文链接:https://blog.csdn.net/hzylearning/article/details/121187803
所属网站分类: 技术文章 > 博客
作者：小兔崽子
链接：http://www.qianduanheidong.com/blog/article/220001/d104ed1c93ed664fa806/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力