Js 中 this 的指向

一般的指向

概括地说，就是指向调用它的那个对象。

var f = function () {
  console.log(this.x);
}

var x = 1;
var obj = {
  f: f,
  x: 2,
};

// 单独执行
f() // 1

// obj 环境执行
obj.f() // 2

其中，f() 是在全局执行，所以返回全局的 x；obj.f() 在 obj 内部执行，所以返回 obj.x

var a = {
  p: 'Hello',
  b: {
    m: function() {
      console.log(this.p);
    }
  }
};

a.b.m() // undefined

m() 由 b 调用，所以返回 b.p undefined

但是有些调用是在全局上的

var obj ={
  foo: function () {
    console.log(this);
  }
};

obj.foo() // obj

// 情况一
(obj.foo = obj.foo)() // window
// 情况二
(false || obj.foo)() // window
// 情况三
(1, obj.foo)() // window

以上三种情况实质上是返回了函数方法的引用，后再在全局立即调用。

一些注意点

多层 this

var o = {
  f1: function () {
    console.log(this);
    var f2 = function () {
      console.log(this);
    }();
  }
}neiceng

o.f1()
// Object
// Window

外层 this 指向的是 o，内层的函数实际上是传了一个地址给 f2，最后是调用的这个地址，相当于在全局

等价于

var temp = function () {
  console.log(this);
};

var o = {
  f1: function () {
    console.log(this);
    var f2 = temp();
  }
}

数组处理方法中的 this

var o = {
  v: 'hello',
  p: [ 'a1', 'a2' ],
  f: function f() {
    this.p.forEach(function (item) {
      console.log(this.v + ' ' + item);
    });
  }
}

o.f()
// undefined a1
// undefined a2

forEach 调用时，this 指向顶层

箭头函数

箭头函数说是谁就是谁

function callback (cb) {
  cb()
}

callback(() => { console.log(this) }) // window

var boss1 = {
  name: 'boss1',
  callback: callback,
  callback2 () {
    callback(() => { console.log(this) })
  }
}

boss1.callback(() => { console.log(this) }) // still window
boss1.callback2(() => { console.log(this) }) // boss1

永远指向声明时的作用域

JavaScript this 的六道坎

https://blog.crimx.com/2016/05/12/understanding-this/

有新的心得以后再更新

欢迎来我的博客做客
zhyib.gitee.io
zhyib.github.io