JS中绑定this的四种方式

https://www.cnblogs.com/echolun/p/11962610.html

在通常的函数调用中，this 是由激活上下文代码的调用者来提供的，即调用函数的父上下文。this 取决于调用函数的方式。

var foo = {x: 10};
 
var bar = {
  x: 20,
  test: function () {
 
    alert(this === bar);
    alert(this.x);
 
  }
};
 
bar.test(); // true, 20
 
foo.test = bar.test;
 
foo.test(); // false, 10

this的四种绑定规则

1. 默认绑定

函数调用时无任何调用前缀的情景。在严格模式环境中，默认绑定的this指向undefined

function girl(){
  console.log(this); // Window
}

girl();

2. 隐式绑定

函数调用时，前面存在调用它的对象，那么this就会隐式绑定到这个对象上

var girl = {
  name: '小红',
  age: 18,
  detail: function(){
    console.log('姓名：', this.name);
    console.log('年龄：', this.age);
  }
}

girl.detail();

补充：隐式丢失

“作为参数传递以及变量赋值”、“变量赋值” 时，this 并没有跟函数绑在一起，所以 this 丢失

var name = '拯救世界的光太郎';
let obj = {
    name: '麦田里的 POLO 桔',
    fn: function () {
        console.log(this.name);
    }
};

function fn1(param) {
    param();
};
fn1(obj.fn); //拯救世界的光太郎

var name = '拯救世界的光太郎';
let obj = {
    name: '麦田里的 POLO 桔',
    fn: function () {
        console.log(this.name);
    }
};
let fn1 = obj.fn;
fn1(); //拯救世界的光太郎

可以用 bind 硬绑定解决这一问题：

var name = '拯救世界的光太郎';
let obj = {
    name: '麦田里的 POLO 桔',
    fn: function () {
        console.log(this.name);
    }
};
let fn1 = obj.fn.bind(obj);
fn1(); //麦田里的 POLO 桔

这个时候无论 fn1 怎么调用，this 指向的都是 obj

3. 显式绑定

就是我们常用的call、apply，将this指定为某个对象

通常用于：

1. 函数之间的相互调用
2. 多重继承
3. 类数组共用数组方法（[].slice.call(arguments, 1))）

let girlName = {
  name: '小红',
  sayName: function(){
    console.log('我的女朋友是： ', this.name);
  }
}
let girl2 = {
  name: '小白'
}
let girl3 = {
  name: '小黑'
}

girlName.sayName.call(girl3);  // 小黑

4. 硬绑定

bind：创建一个新的函数，新函数的 this 被指定为 bind 初次调用的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

可以用它来解决隐式丢失问题，以及函数参数默认值问题

let girlName = {
  name: '小红',
  sayName: function(age, hobby){
    console.log('我的女朋友是： ', this.name, age, hobby);
  }
}
let girl2 = {
  name: '小白'
}
let girl3 = {
  name: '小黑'
}

girlName.sayName.bind(girl3, 18)('rap');  // 小黑 18 rap

5. 构造函数绑定

在new实例化对象时，会创建一个空对象，this就绑定这个空对象上。

我们一般会将new实例化的对象赋到一个变量上，那么就可以理解为this指向这个实例化的对象。因为在实例化对象时，会经历一个过程：1. 创建一个空对象赋值到变量上、2. 修改构造函数的this指向为前一个对象、3. 继承原型链、4. 根据修改指向时的返回值确定最终的返回值。

可以看到会修改this的指向为前一个空对象，所以在这个语句被执行过后，这个空对象也就不空了，用到的方法其实叫做构造继承，继承构造函数的函数体。

function Lover(name){
  this.name = name;
  this.sayName = function(){
    console.log(this.name);
  }
}

let name = '小白';

let xiaohong = new Lover('小红');

xiaohong.sayName(); // 小红

6. this 绑定的优先级

new绑定 > 显式绑定 > 隐式绑定 > 默认绑定

通过 new 调用 bind 返回的函数，this 会替代 bind 的对象绑定，指向 new 构造出来的新对象