js中的this

js中的this

在javaScript中，this是指向当前执行上下文对象的关键字。

下面简单看两个场景：

function log() {
  console.log(this.name);
}
var obj = {
  log: log,
  name: 'qingsong',
}
var name = 'lisi';
log(); // 打印出lisi 这里的this指向的是全局对象
obj.log(); // 打印出qingsong， 这里的this指向的是

var foo = function() {
  var self = this;
  console.log(this === obj); // true 这里的this指向就是obj
  f();
  function f() {
    console.log(this === obj); // false 这里由于f函数直接执行，this指向的是全局对象
    console.log(self === obj); // true self指向的是foo函数执行的调用，也就是obj
  }
}
var obj = {
  foo: foo,
}
obj.foo();

关于this的指向使用场景有哪些

1. 指向全局作用域 window || global

   console.log(this); 
   

2. 函数调用中的this

   var name = 'qingsong'
   function log() {
     console.log(this.name); // qingsong
   }
   log()；
   // 非严格模式指向全局对象，严格模式为undefined
   

3. 对象方法中的this

   const obj = {
     name: 'qingsong',
     sayName: function() {
       console.log(this.name); // qingsong
     }
   }
   obj.sayName();
   

4. 构造函数中的this

   function Person(name) {
     this.name = name;
   }
   const p1 = new Person('aa');
   console.log(p1.name);
   

5. 箭头函数中的this（不会创建新的this上下文，而是捕获外层作用域中this）

   const obj = {
     name: 'qingsong',
     sayName: () => {
       console.log(this.name); // undefined 这里的this指向的是全局对象，定义时的上下文
     }
   }
   obj.sayName();
   

6. 事件处理程序中this,this通常指向触发元素的对象

   document.getElementById('btn').addEventListener('click', function() {
     console.log(this) // 输出button按钮
   })
   

如何改变this指向

使用call、apply、bind都可以实现，call和apply的区别在于传递的参数方式不同，call需要将参数一一列出，apply需要将参数放入到数组中。bind则返回一个改变了this指向的新方法。

function getName(greeting) {
  console.log(greeting + ',' + this.name);
}
const person = { name: 'qingsong' };
getName.call(person, 'hello');
getName.apply(person, ['hello']);

const boundName = getName.bind(person);
boundName('hello');
// 将原先指向全局对象的this，改成传入的参数对象