关于javascript:关于this指向的深刻理解以及重写callapplybind

this指向的问题，因为波及知识点较多，在初学时总是不甚了解。文档看多了反而昏头昏脑，明天重复看了波老师的文档，借此机会写下一些本人的想法，坚固记忆，加深了解。

🍓参考资料：前端根底进阶（七）：全方位解读this

一开始初学时，有一种说法，深得我心：谁调用它，this就指向谁。

这里的“它”是指函数，谁调用这个函数，这个函数里的this就指向谁。

这种说法，不全对，在前期开发的过程中，逐步意识到这样的说法很不负责。

this指向在什么时候确定的？

首先，第一个问题，this指向在什么时候确定的？

咱们回顾执行上下文，执行上下文在创立阶段，做了三件事件：

• 创立变量对象
• 建设作用域链
• 确定this指向

this指向是在执行上下文创立阶段确定的，那么执行上下文又是在什么时候被创立的？

• 执行上下文能够简略了解成以后代码的执行环境，它会创立一个作用域;
• 执行环境分为全局环境、函数环境和eval（少数时不必，可疏忽）;
• 全局的执行上下文在script代码一开始运行时就创立;
• 函数的执行上下文在函数被调用时创立;

当我晓得了“确定this指向->执行上下文创立阶段->函数被调用”这一套之后，我尝试着问本人，
“调用函数产生了什么？”
我没有答上来，我便意识到我还须要粗浅地了解和记忆。

论断：this指向是在执行上下文创立阶段确定的
大家也能够了解成“ this指向是在函数被调用时确定的 ”，然而肯定要牢记调用函数会创立执行上下文，而后才是确定this指向。

this到底指向谁呢？

因为this指向是在调用函数时确定的，那么一个函数的this指向，能够非常灵活。上面的例子，同一个函数，因为调用形式的不同，this指向了不一样的对象。

var a = 10;
var obj = {
  a: 20
}
function fn() {
  console.log(this.a);
}
fn(); // 10
fn.call(obj); // 20，应用call扭转了this指向

除此之外，在函数执行过程中，this一旦被确定，就不可更改了。

var a = 10;
var obj = {
  a: 20
}
function fn() {
  this = obj; // 这句话试图批改this，运行后会报错
 console.log(this.a);
}
fn();

一、全局对象中的this

全局对象的this，是一个较非凡的存在，指向它自身，也就是指向全局环境。

// 通过this绑定到全局对象
this.a2 = 20;
// 通过申明绑定到变量对象，但在全局环境中，变量对象就是它本身
var a1 = 10;
// 仅仅只有赋值操作，标识符会隐式绑定到全局对象
a3 = 30;
// 输入后果会全副合乎预
console.log(a1);
console.log(a2);
console.log(a3);

二、函数中的this

• 在一个函数上下文中，this由调用者提供，由调用函数的形式决定。
• 如果调用者函数，被某一对象所领有，那么该函数调用时，外部的this指向该对象。
• 如果函数独立调用，那么该函数外部的this，指向undefined。
• 在非严格模式中，当this指向undefined时，它会被主动指向全局对象

要精确地确定this指向，找到函数的调用者以及辨别他是否是独立调用非常要害。

// 为了可能精确判断，咱们在函数外部应用严格模式，因为非严格模式会主动指向全局
function fn() {
  'use strict';
  console.log(this);
}

fn();  // fn是调用者，独立调用
window.fn();  // fn是调用者，被window所领有

再来个艰难点的例子：

var a = 20;
var foo = {
  a: 10,
  getA: function () {
    return this.a;
  }
}
console.log(foo.getA()); // 10

var test = foo.getA;
console.log(test());  // 20

test()作为调用者，只管它与foo.getA()的援用雷同，然而它是独立调用的，因而this指向undefined，在非严格模式下，主动转向全局window。

var a = 20;
function getA() {
  return this.a;
}
var foo = {
  a: 10,
  getA: getA
}
console.log(foo.getA());  // 10

function foo() {
  console.log(this.a)
}
function active(fn) {
  fn(); // 实在调用者，为独立调用
}
var a = 20;
var obj = {
  a: 10,
  getA: foo
}
active(obj.getA);

三、应用call，apply显示指定this

JavaScript外部提供了一种机制，让咱们能够自行手动设置this的指向，就是call和apply。

大家在了解call和apply的时候记住，要了解成调用一个函数，指定this为心愿的对象，而不是让对象调用一个不属于它的办法。

function fn(num1, num2) {
  console.log(this.a + num1 + num2);
}
var obj = {
  a: 20
}

fn.call(obj, 100, 10); // 130
fn.apply(obj, [20, 10]); // 50

call与applay前面的参数，都是向将要执行的函数传递参数。其中call以一个一个的模式传递，apply以数组的模式传递。这是他们惟一的不同。

四、构造函数中的this

function Person(name, age) {
    // 这里的this指向了谁?
    this.name = name;
    this.age = age;   
}
Person.prototype.getName = function() {
    // 这里的this又指向了谁？
    return this.name;
}

// 下面的2个this，是同一个吗，他们是否指向了原型对象？

var p1 = new Person('Nick', 20);
console.log(p1.getName());    // "Nick"

通过new操作符调用构造函数时，会经验一下4个阶段：

• 创立一个新的对象；
• 将构造函数的this指向这个新的对象（原构造函数独立调用，外部this指向undefined）；
• 执行构造函数的代码，为这个对象增加属性、办法等；
• 返回新的对象；

当new操作符调用构造函数时，this其实指向的是这个新创建的对象，最初又将新的对象返回进去，被示例对象承受。因而咱们能够说，构造函数的this，指向了新的实例对象。

重写call/apply/bind办法

call