JS中的this指向问题

  • JS中的this指向问题已关闭评论
  • 9 次浏览
  • A+
所属分类:Web前端
摘要

在JS中,全局的变量和函数附着在global对象上,全局对象在浏览器环境下是window对象。


this的指向问题

全局作用域

在JS中,全局的变量和函数附着在global对象上,全局对象在浏览器环境下是window对象。

  • 在全局作用域中,this指向全局对象window
console.log(this);      // window对象 console.log(window);    // window对象 console.log(this === window);    // true 
var a = 3;  console.log(a);                                     // 3 console.log(window.a);                              // 3 console.log(this.a);                                // 3 console.log(a === window.a && window.a === this.a); // true 
function say(){     console.log("hi"); }  this.say();     // hi 

全局变量和window对象的关系

  • 使用var声明定义的全局变量被挂载到全局对象window上。

  • 使用letconst声明定义的全局变量不会被挂载到全局对象window上。


普通函数

普通函数内部的this指向调用这个函数的对象。

案例1

function testThis(){     console.log(this); }  testThis();     // 输出结果: window对象 

testThis()在全局作用域中被调用,相当于执行了window.testThis();,则函数被调用时,内部的this指向window.

案例2

var obj = {     test(){         console.log(this);     } }  obj.test();     // obj 

普通函数作为对象上的方法时,this指向调用方法的对象.

案例3

var obj = {     test1(){         console.log(this);     },     test2(){         test();    // 这里相当于执行了window.test();     } }  function test(){     console.log(this); }  obj.test1();     // obj obj.test2();     // window test();          // window 

构造函数

构造函数一般是通过new关键字调用的,其内部的this指向新创建的对象。

function Person(name,age){     this.name = name;     this.age = age;     console.log(this); }  const person1 = new Person('张三',20); const person2 = new Person('李四',18); 

构造函数利用指向新对象的this,将传入的nameage属性直接赋值给新对象。通过最后的console.log(this)语句也可以检测出this的指向。


绑定事件函数

const btn = document.querySelector('button');  btn.onclick = function(){     console.log(this); } 
  • this指向触发该事件的对象。

此处,点击事件触发时,this指向按钮这个DOM对象。


箭头函数

箭头函数没有属于自己的this。因此,箭头函数内部使用的this就是箭头函数所在上下文的this.

var obj = {     test1(){         console.log(this);     },     test2:()=>{         console.log(this);     } } obj.test1();     // obj obj.test2();     // window 

test2是箭头函数,没有属于自己的this。在其内部输出的thisobj所在上下文的this,即window


改变this指向的方法

函数是对象,有属于自己的属性和方法。

函数有callapply方法可以改变调用时this的指向。