ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

JavaScript中的this指向问题

2022-08-12 21:01:51  阅读:150  来源: 互联网

标签:function console log 指向 JavaScript 问题 window obj div


在全局作用域中=>this -> window

  1. <script>
  2. console.log(this); //this->window
  3. </script>

在普通函数中=>this取决于谁调用,谁调用我,this就指向谁,跟如何定义无关

  1.       var obj = {
  2.         fn1:function() {
  3.        console.log(this);
  4.        },
  5.        fn2:function(){
  6.        fn3()
  7.        }
  8.      }
  9.   function fn3() {
  10.   console.log(this);
  11.   }
  12.     fn3();//this->window
  13.    obj.fn1();//this->obj
  14.    obj.fn2();//this->window

箭头函数中的this箭头函数没有自己的this,箭头函数的this就是上下文中定义的this,因为箭头函数没有自己的this所以不能用做构造函数。

  1. var div = document.querySelector('div');
  2. var o={
  3. a:function(){
  4. var arr=[1];
  5. //就是定义所在对象中的this
  6. //这里的this—>o
  7. arr.forEach(item=>{
  8. //所以this -> o
  9. console.log(this);
  10. })
  11. },
  12. //这里的this指向window o是定义在window中的对象
  13. b:()=>{
  14. console.log(this);
  15. },
  16. c:function() {
  17. console.log(this);
  18. }
  19. }
  20. div.addEventListener('click',item=>{
  21. console.log(this);//this->window 这里的this就是定义上文window环境中的this
  22. });
  23. o.a(); //this->o
  24. o.b();//this->window
  25. o.c();//this->o 普通函数谁调用就指向谁

事件绑定中的this

事件源.onclik = function(){ } //this -> 事件源

事件源.addEventListener(function(){ }) //this->事件源

  1. var div = document.querySelector('div');
  2. div.addEventListener('click',function() {
  3. console.log(this); //this->div
  4. });
  5. div.onclick = function() {
  6. console.log(this) //this->div
  7. }

定时器中的this

定时器中的this->window,因为定时器中采用回调函数作为处理函数,而回调函数的this->window

  1. setInterval(function() {
  2. console.log(this); //this->window
  3. },500)
  4. setTimeout(function() {
  5. console.log(this); //this->window
  6. },500)

构造函数中的this

构造函数配合new使用, 而new关键字会将构造函数中的this指向实例化对象,所以构造函数中的this->实例化对象

new关键字会在内部发生什么

//第一行,创建一个空对象obj。
var obj ={};
//第二行,将这个空对象的__proto__成员指向了构造函数对象的prototype成员对象.
obj.__proto__ = CO.prototype;
//第三行,将构造函数的作用域赋给新对象,因此CA函数中的this指向新对象obj,然后再调用CO函数。于是我们就给obj对象赋值了一个成员变量p,这个成员变量的值是” I’min constructed object”。
CO.call(obj);
//第四行,返回新对象obj。
return obj;

  1. function Person(name,age) {
  2. this.name = name;
  3. this.age = age;
  4. }
  5. var person1 = new Person();
  6. person1.name = 'andy';
  7. person1.age = 18;
  8. console.log(person1);//Person {name: "andy", age: 18}
  9. var person2 = new Person();
  10. person2.name = 'huni';
  11. person2.age = 20;
  12. console.log(person2);// Person {name: "huni", age: 20

标签:function,console,log,指向,JavaScript,问题,window,obj,div
来源: https://www.cnblogs.com/ZZ-king/p/16581309.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有