Java教程

JavaScript中的各种函数以及this指向

本文主要是介绍JavaScript中的各种函数以及this指向,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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)
  }

这篇关于JavaScript中的各种函数以及this指向的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!