this in JavaScript

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

• this in JavaScript
  • Knowledge points
  • Here comes the problem
  • solution

This can be confusing in some places, so I'll record it here.

Knowledge points

1. Who this points to is determined during actual execution. this points to the current running environment (the running environment here is a JavaScript object). For example, this in the following code points to object A.

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

2. When running the environment globally, this points to the window object.

Here comes the problem

1. Guess what the following console will output?

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

Except for the last one, all others output window objects. In case four, foo function four is called by obj object and has the object environment of obj. In the first three cases, the obj.foo function is proposed. The running environment is not the obj object, but the global object.

Different objects have different operating environments. The following example explains it well.

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

a.b.m()

There is no p attribute in the b object, so undefined will be output. If strict mode is not enabled, the p attribute will be found from the window object.

3. Multi-level properties

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

o.f1()

The second this points to the window object (if strict mode is not turned on, it will be the same later)

4. In array traversal

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

o.f()

The second this does not point to the o object

5. In callback

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

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

In actual execution, the running environment of f is no longer in the o object.

solution

1. In digital traversal, callback or multiple layers, save this in other variables in advance

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

That is used here, and that clearly points to the upper this.

2. Bind this so that it points to a specific value

//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