【Web前端基础知识】关于Js中this的指向

时间:2020-05-26 11:25:56 来源:

【摘要】 前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。下面是【Web前端基础知识】关于Js中this的指向,小编建议有准备参加考试的备考生一定要合理规划时间,仔细阅读相关规定,提前做好考前准备。下面让我们看看【Web前端基础知识】关于Js中this的指向的具体内容:

JavaScript中this的存在为我们写代码提供了非常多的帮助,但是在具体使用的时候this的具体指向会变得各不相同,在本篇文章中,我们将详细讨论this的指向机制

首先我们要明确一个概念,this既不是指向当前函数,也不是某个固定的对象,而是函数在执行时的环境对象。也就是是说,函数内this的指向只和函数是如何被调用的有关,和函数的定义方式以及位置等没有必然的联系。

1. 最普通的函数调用

上述案例中,我们可以认为全局函数demo是顶层对象window的方法,所以可以认为是window在调用demo函数,所以其中的this指向的是window对象。

  1. function demo(){ 
  2. console.log(this); 
  3. demo(); 

2. 对象方法中的this

在上面这个案例中,执行的虽然也是demo函数,但是在我们是通过obj对象对demo函数的引用访问到demo函数的,所以可以认为是obj对象在调用函数demo,函数内this的this就要指向obj对象。

  1. function demo(){ 
  2. console.log(this); 
  3. var obj = { 
  4. foo:demo 
  5. obj.foo(); 

3. 定时器中的this

在第一个定时器中,通过定时器执行函数demo时,可以依然认为demo是全局对象window的方法,所以是window对象在调用demo函数,所以this依然指向window。而第二个定时器中是一个匿名函数,一般匿名函数的执行具有全局性,也就是可以认为匿名函数是是在全局环境中被调用的,那么该定时器函数内的this就指向了全局环境对象window。

  1. function demo(){ 
  2. console.log(this); 
  3. setTimeout(demo,1000); 
  4. setTimeout(function(){ 
  5. console.log(this); 
  6. },2000); 

4. 事件绑定中的this

事件处理函数中的this,无论是绑定的是命名函数还是匿名函数,都可以认为是元素引用的一个方法,虽然这种函数的调用具有其隐蔽性,但是我们还是应该视为其执行环境是元素引用,所以this指向触发事件(调用方法)的元素。而addEventListener 方法中的事件函数默认是作为调用addEventListener对象的方法,所以同样触发事件的元素。

  1. oBox.onclick = function(){ 
  2. console.log(this); 
  3. // oBox.onclick(); 
  4. oBox.addEventListener("click",function(){ 
  5. console.log(this) 
  6. }); 

5. 闭包中的函数

在上述案例中,我们虽然是通过调用obj对象的foo方法获取了匿名函数,但是由于匿名函数的执行具有的全局性,而这时并没有出现实际的其他调用者,所以函数内的this指向全局对象window。当然这只是一个常见的案例,this的指向具体情况还是要结合实际调用者具体分析。

  1. var obj = { 
  2. foo:function(){ 
  3. return function(){ 
  4. console.log(this); 
  5. obj.foo()(); 

6. new 操作符调用函数

new 操作符调用函数内的this是一个恒定值,指向的是函数执行前创建的对象。

  1. function CreateStu(){ 
  2. console.log(this); 
  3. new CreateStu(); 

7. 其他的this

call和apply方法(作用相同,参数不同)都可以强制改变this的指向,可以将函数执行时的this指向方法的第一个参数。

  1. var obj1 = { 
  2. foo:function(){ 
  3. console.log(this); 
  4. var obj2 = {} 
  5. obj1.foo.call(obj2); 

以上就是【Web前端基础知识】关于Js中this的指向的内容,对前端感兴趣的小伙伴们可以关注考必过,获取更多前端前沿资讯和最新技术。最新消息小编会第一时间发布,助力大家考试,加油!

上一篇      下一篇
前端相关推荐 更多>>
前端热点专题 更多>>
热点问答
国家公务员考试年龄限制是多少 公务员国考和省考考试内容有什么区别 函授大专学历能不能考公务员 国家公务员考试考点能自己选择吗 新闻学专业能报考2022年公务员考试吗 什么是联合培养研究生 什么是破格录取研究生 什么人不适合读研 研究生报名户口所在地填什么 研究生结业和毕业有什么区别
网站首页 网站地图 返回顶部
考必过移动版 https://m.kaobiguo.net