当前位置:主页 > 网页前端 > JavaScript代码 >

JavaScript中的this关键词指向

时间:2022-11-11 09:43:40 | 栏目:JavaScript代码 | 点击:

1、es5中的this的指向

var name = 'hello window!';
var obj = {
  name: 'hello obj!',
  fn: function() {
    console.log(this.name);
  }
};
var fn = obj.fn;
fn();     // hello window!
obj.fn(); // hello obj!

obj.fn()在执行时,fn中的this指向的是当前的调用对象objfn()执行时,this指向的是window对象。

var fn = obj.fn; // 等价于 window.fn = obj.fn;
fn();            // 等价于 window.fn();

匿名函数的执行环境是全局的

var name = 'hello window!';
var obj = {
  name: 'hello obj!',
  fn: function() {
    console.log(this.name); // 'hello obj!'
    return function() {
      console.log(this.name); // 'hello window!'
    };
  }
};
obj.fn()();

2、es6中的this

示例说明,修改上述示例代码中的函数为箭头函数:

// 示例代码1
var name = 'hello window!';
var obj = {
  name: 'hello obj!',
  fn: () => {
    console.log(this.name);  // 这里的this指向的外层的this,即window对象,想当于上打印的是console.log(window.name);
  }
};
var fn = obj.fn;
fn();       // hello window!
obj.fn();   // hello window!

// 示例代码2
var name = 'hello window!';
var obj = {
  name: 'hello obj!',
  fn: function() {
    console.log(this.name);   // hello obj!
    return () => {
      console.log(this.name); // hello obj!  // this指向外层的this,即obj对象
    };
  }
};
obj.fn()();

总结:

您可能感兴趣的文章:

相关文章