javascript 中的 this 分类详解(持续完善中...)

最新推荐文章于 2022-03-03 16:24:04 发布

转载最新推荐文章于 2022-03-03 16:24:04 发布 · 468 阅读

javascript 同时被 2 个专栏收录

111 篇文章

订阅专栏

js原理

38 篇文章

订阅专栏

在函数中this到底取何值，是在函数真正被调用执行的时候确定的，函数定义的时候确定不了。因为this的取值是执行上下文环境的一部分，每次调用函数，都会产生一个新的执行上下文环境。

最新笔记

参考：http://www.cnblogs.com/TomXu/archive/2012/01/17/2310479.html#!comments

在一个函数上下文中，this由调用者提供，由调用函数的方式来决定。

如果调用括号()的左边是引用类型的值，this将设为引用类型值的base对象（base object），在其他情况下（与引用类型不同的任何其它属性），这个值为null。不过，实际不存在this的值为null的情况，因为当this的值为null的时候，其值会被隐式转换为全局对象。为什么用表达式的不同形式激活同一个函数会不同的this值，答案在于引用类型（type Reference）不同的中间值。

经典例子：

eg1:

var foo = {
  bar: function () {
    alert(this);
    alert(this === foo);
  }
};
 
foo.bar();                                  // foo, true
 
var exampleFunc = foo.bar;
 
alert(exampleFunc === foo.bar);             // true
 
// 再一次，同一个function的不同的调用表达式，this是不同的
 
exampleFunc();                              // global, false

eg2:

(function () {
  alert(this); // null => global
})();

eg3:

function foo() {
  function bar() {
    alert(this); // global
  }
  bar(); // the same as AO.bar()
}

foo();

eg4:

var foo = {
  bar: function () {
    alert(this);
  }
};
 
foo.bar(); // Reference, OK => foo
(foo.bar)(); // Reference, OK => foo  ???????????????????
 
(foo.bar = foo.bar)(); // global?
(false || foo.bar)(); // global?
(foo.bar, foo.bar)(); // global?

参考：

this的取值，分四种情况。

情况1：构造函数

所谓构造函数就是用来new对象的函数。其实严格来说，所有的函数都可以new一个对象，但是有些函数的定义是为了new一个对象，而有些函数则不是。另外注意，构造函数的函数名第一个字母大写（规则约定）。例如：Object、Array、Function等。