JavaScript中的this

一、 在全局作用域中调用一个函数时,this总是指向Global对象(浏览器中就是window对象)

var name = 'May';
var getName = function() {
  console.log(this === window); //true
  console.log(this.name);  // 'May'
}
getName(); 

二、 当函数作为对象里的方法被调用时,this指向该对象

var name = 'May';
var obj = {
  name: 'Lily',
  getName: function() {
    console.log(this.name); // 'Lily'
  }
}
obj.getName(); 

三、 当一个函数用作构造函数时(使用new关键字),this指向正在构造的新对象。如果构造函数返回的值不是一个对象,则默认返回this对象,看例子。

function Name() {
  this.name = 'May';
}
var obj = new Name();
console.log(obj.name); // 'May' 
function Name() {
  this.name = 'May';
  return 'Lily';
}
var obj = new Name();
console.log(obj.name); // 'May',因为返回的是字符串而不是对象 
function Name() {
  this.name = 'May';
  return { name: 'Lily' };
}
var obj = new Name();
console.log(obj.name); // 'Lily' 

四、事件监听中的this

被内联处理函数调用时,this指向所在的DOM元素

Click

上面的alert显示test,但只有外层代码的this是这样的,如果像以下这种情况,this会指向window对象(非严格模式下),所以alert显示undefined,因为window中没有定义id

Click2

当作为一个DOM事件处理函数时,this指向触发事件的元素

A
document.getElementById('test').onclick = function() { console.log(this.id); // test元素 }

五、apply()和call()

这两个方法的用途都是在特定的作用域中调用函数,等同于设置函数体内this对象的值,改变this指向。

apply()接收两个参数,第一个是在其中运行函数的作用域(this值),第二个是参数数组。

call()与apply()方法作用相同,区别仅在于接受参数的方式不同,call()第一个参数是this值,传递给函数的参数必须逐个列出来。

var name = 'May';
var obj = {
    name: 'Lily',
    getName: function() {
        console.log(this.name);
    }
}
obj.getName.apply({ name: 'Mary' }); // 'Mary'
obj.getName.apply(window); // 'May'

obj.getName.call({ name: 'Jay' }); // 'Jay'
obj.getName.call(window); // 'May' 
// apply()与call()传参示例
function add(a, b) {
    return a + b + this.num;
}
var o = { num: 1 };
console.log(add.apply(o, [4, 3])); // 4+3+1 = 8
console.log(add.call(o, 2, 2)); // 2+2+1 = 5 

六、bind()

bind()方法被调用时,返回一个新的函数,新的函数的this被永久绑定到了bind的第一个参数(bind的其余参数将作为新函数的参数供调用时使用)

var name = 'May';
var obj = {
    name: 'Lily',
    getName: function(name) {
        console.log(this.name);
        console.log(name);
    }
}
var getName = obj.getName.bind({ name: 'Bind' }, 'Test');
getName(); // 'Bind' 'Test' 

七、箭头函数中的this

箭头函数的this值是定义时所在的对象而不是执行时所在的对象。

var name = 'May';
var obj = {
  name: 'Lily',
  getName: () => {
      console.log(this.name);
  }
}
obj.getName(); // 输出的是'May'而不是'Lily' 

总结:

绝大多数情况下,函数的this值取决于函数执行时的环境,而非函数声明时的环境。但箭头函数的this值保持为闭合词法上下文的值,就是定义时所在的对象而不是执行时所在的对象。

你可能感兴趣的