this

200 阅读2分钟

this 是一个js的关键字(指针),代表当前代码【执行】的环境对象

一般在函数中使用,在函数执行时确定,根据函数执行方式的不同,代表的值不同。目前有以下情况:

1. 事件函数(赋值给DOM元素对象的事件属性、onclick、onmouseover、onmouseout、ondbclick.... 的函数)中的this,是绑定当前事件的元素

var btn = document.getElementById('btn');
btn.onclick = function () {
  console.log(this); // btn
};

2. 自执行函数中的this是window

var num = 14;
(function () {
  var num = 15;
  // console.log(this); // window
  // console.log(this.num); // 14
})();

// 3. setTimeout/setInterval 的回调函数中的this指向window
setTimeout(function () {
  // console.log(this);
}, 1000);

重要!!!

4. 只需一句话学会this: 方法调用时,看方法名前面有没有 . ,如果有点前面是谁,方法中的this就是谁,如果没有点,方法中的this就是window

var obj = {
  num: 12,
  fn: function () {
    console.log(this); // obj
    console.log(this.num); // 12
  }
};
// obj.fn(); // fn前面有 . 点前面是obj所以本次obj.fn执行时,obj.fn中的this就是obj
// obj['fn'](); // 注意 obj['fn'] 等效于 obj.fn,所以本次执行 obj.fn中的this仍然是obj

var fn = obj.fn;
fn(); // 函数执行时(最后有小括号())函数名前面没有点,所以函数里面的this就是window

5. ES6中箭头函数的this

// ES6新增的函数语法:箭头函数,省略function关键字,在形参入口后面增加箭头(=>) 后面紧跟函数体,只能用于函数表达式; let sum = (a, b) => { var total = 0; total = a + b; return total; };

// 箭头函数的this指向是箭头函数声明时所在作用域(上下文)中的this
    注意 :是作用域 不要再在堆内存里找
var num = 16;
let obj2 = {
  num: 17,
  fn: () => {
    console.log(this.num);
  }
};
obj2.fn();

6. 全局作用域中的this是window

console.log(this);

7. this在运行时不能直接通过赋值的方式修改

 this = 13; // 报错