esto en javascript

https://wangdoc.com/javascript/oop/this.html

• esto en javascript
  • Puntos de conocimiento
  • Aquí viene el problema
  • solución

Esto puede resultar confuso en algunos lugares, así que lo registraré aquí.

Puntos de conocimiento

1. A quién apunta esto se determina durante la ejecución real. esto apunta al entorno de ejecución actual (el entorno de ejecución aquí es un objeto JavaScript). Por ejemplo, esto en el siguiente código apunta al objeto A.

var A = {
    
    
  name: '张三',
  describe: function () {
    
    
    return '姓名：'+ this.name;
  }
};

2. Cuando se ejecuta el entorno globalmente, esto apunta al objeto de ventana.

Aquí viene el problema

1. ¿Adivina cuál será la siguiente salida de la consola?

var obj ={
    
    
  foo: function () {
    
    
    console.log(this);
  }
};
// 情况一
(obj.foo = obj.foo)() 
// 情况二
(false || obj.foo)() 
// 情况三
(1, obj.foo)() 
//情况四
obj.foo()

Excepto el último, todos los demás generan objetos de ventana. En el caso cuatro, la función foo cuatro es llamada por el objeto obj y tiene el entorno de objeto de obj. En los primeros tres casos se propone la función obj.foo: el entorno de ejecución no es el objeto obj, sino el objeto global.

Diferentes objetos tienen diferentes entornos operativos, el siguiente ejemplo lo explica bien.

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

a.b.m()

No hay ningún atributo p en el objeto b, por lo que se generará indefinido. Si el modo estricto no está habilitado, el atributo p se encontrará en el objeto de ventana.

3. Atributos multinivel

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

o.f1()

El segundo, esto apunta al objeto de la ventana (si el modo estricto no está activado, será lo mismo más adelante)

4. En recorrido de matriz

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

o.f()

El segundo esto no apunta al objeto o.

5. en devolución de llamada

var o = new Object();
o.f = function () {
    
    
  console.log(this === o);
}

// jQuery 的写法
$('#button').on('click', o.f);

En la ejecución real, el entorno de ejecución de f ya no está en el objeto o.

solución

1. En recorrido digital, devolución de llamada o capas múltiples, guárdelo en otras variables con anticipación

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

Eso se usa aquí, y eso apunta claramente a la parte superior de esto.

2. Vincula esto para que apunte a un valor específico

//1. call方法。制定函数内部的this(只是第一层，不是所有的this)指向传入参数。若没参数，默认全局对象。若为基本类型，将其封装。
var obj = {
    
    };

var f = function () {
    
    
  return this;
};

f() === window // true
f.call(obj) === obj // true

//2. apply方法。跟call方法一样，但传入的第二个参数是数组，call可以传入多个参数。以下代码等价
f.call(null, 1, 1) // 2
f.apply(null, [1, 1]) // 2
//apply这个可以做到很多神奇的操作，可以看最上面的链接

//3. bind方法，也是使this指向参数，但会返回一个函数
var counter = {
    
    
  count: 0,
  inc: function () {
    
    
    this.count++;
  }
};

var func = counter.inc.bind(counter);
func();
counter.count // 1

//还能绑定到其他对象
var counter = {
    
    
  count: 0,
  inc: function () {
    
    
    this.count++;
  }
};

var obj = {
    
    
  count: 100
};
var func = counter.inc.bind(obj);
func();
obj.count // 101