this指向

概念，一句话
this的指向，在函数声明的时候是不会被确定的，只有函数执行的时候才被确定，this最终指向的是调用它的对象

首先需要了解

- this是声明函数时附加的参数，指向特定的对象，也就是隐藏参数。
- this可以帮我们省略参数。
- this的指向决定于函数的调用方式。

另外需要了解

- 在非严格模式下，浏览器中的尽头当然就是window。
- 在严格模式下也就是开启了"use strict"的情况下，尽头就是undefined。
- node的全局环境中尽头是global。

然后下面，code，（敲黑板）

// 我们来看下面的🌰。

function demo(){
  var user = “小食堂”;
  console.log(this.user);   // undefined
  console.log(this);       // window
}

demo();

// 这里的函数demo实际上是被window对象使用点语法所点出来的，如下：

function demo(){
    var user = “小食堂”;
    console.log(this.user);    // undefined
    console.log(this);        // window
}

window.demo();

// 可以发现和上面的代码结果一样

var obj = {
  user:”小食堂”,
  fn:function(){
     console.log(this.user);   //小食堂
  }
}

obj.fn();

// 这里的this指向对象obj
// 注意看最后一行调用函数的代码
// obj.fn();

// 重要的事情说两遍！！
// this的指向在函数创建时是决定不了的
// 在调用的时候才可以决定，谁调用就指向谁

// this的指向在函数创建时是决定不了的
// 在调用的时候才可以决定，谁调用就指向谁

// 其实以上两点说的还不够准确，我们接着往下看

var obj = {
  user:”小食堂”,
  fn:function(){
     console.log(this.user); // 小食堂
  }
}
window.obj.fn(); 

// 这段代码跟上面的代码几乎是一样的
// 但是这里为什么没有指向window呢？
// 按你上面说的不是window调用的方法吗？
// 大家先停下来打个debugger思考一下为什么
// 想不明白没关系我们带着疑问来看下段代码

var obj = {
    a:1,
    b:{
        a:2,
        fn:function(){
            console.log(this.a); // 2
        }
    }
}

obj.b.fn();

// 这里执行的时候同样是对象obj通过点语法进行的执行
// 但是this同样没有指向window，这是为什么呢？

// 好，我们有几种情况需要记住：

// 1.如果一个函数中有this
// 但是它没有被上一级的对象所调用
// 那么this就会指向window（非严格模式下）

// 2.如果一个函数中有this
// 这个函数又被上一级的对象所调用
// 那么this就会指向上一级的对象

// 3.如果一个函数中有this
// 这个函数中包含多个对象
// 尽管这个函数是被最外层的对象所调用
// this却会指向它的上一级对象

var obj = {
  a:1;
  b:{
    // a:2,
    fn:function(){
       console.log(this.a);   // undefined
    }
  }
}
obj.b.fn();

// 我们可以看到，对象b中没有属性a，这个this指向
// 的也是对象b，因为this只会指向它的上一级对象
// 不管这个对象中有没有this要的东西

// 我们再来看一种情况

var obj = {
    a:1,
    b:{
        a:2,
        fn:function(){
            console.log(this.a);  // undefined
            console.log(this);   // window
        }
    }
}
var demo = obj.b.fn;
demo();

// 在上面的代码中，this指向的是window
// 你们可能会觉得很奇怪
// 其实是这样的，有一句话很关键，再次敲黑板

// this永远指向的都是最后调用它的对象
// 也就是看它执行的时候是谁调用的

// 上面的例子中虽然函数fn是被对象b所引用了
// 但是在将fn赋值给变量demo的时候并没有执行
// 所以最终this指向的是window

function foo() {
  console.log(this.a);
}
var obj2 = {
  a: 42,
  foo: foo
};
var obj1 = {
  a: 2,
  obj2: obj2
};
obj1.obj2.foo(); // 42
// 再次献出真理「this永远指向最后调用它的那个对象」，obj2

this这样乱指是不行的，不如我们... 固定一下this的指向。

this的显示绑定

即直接指定this的绑定对象，让this只指向我们想指向的对象使用call(...)和apply(...) 。
this角度讲它俩是一样的

function returnThis(){
  return this;
}
var user = {name:"小食堂"};

returnThis();            // window
returnThis.call(user);   // {name: "小食堂"}
returnThis.apply(user) ; // {name: "小食堂"}

// 这里就是Object.prototype.call
// 和Object.prototype.apply方法
// 他们可以通过参数来指定this

function foo() {
  console.log(this.a);
  return function() {
    console.log(this.a);
  }
}
var obj = {
  a: 2
};
var a = "global";
foo.call(obj); // 2
foo.call(obj)(); // 2 global
foo().call(obj); // global 2
foo(); // global
// 看到差别了吗？使用了call直接让this指向obj，访问obj其中的属性。 哪怕foo()的调用位置是全局也不怕了。

关于「硬绑定」，啥是硬绑定？？就是你俩锁了，钥匙扔了。

function foo() {
  console.log(this.a);
}
var obj = {
  a: 2
};
var bar = function() {
  foo.call(obj);
};
bar(); // 2
setTimeout(bar, 100); // 2
bar.call(window); // 2

硬绑定的bar不会再修改this。（啊？那咋整啊？---想改咱还有软绑定，去找开锁师傅）
ES5为硬绑定提供了内置的方法 Function.prototype.bind

function foo(something) {
  console.log(this.a, something);
  return this.a + something;
}
var obj = {
  a: 2
};
var bar = foo.bind(obj);
var b = bar(3); // ???
console.log(b); // ???

2, 3; 5 bind(...)会返回一个硬编码的新函数，把指定的参数设置为this的上下文并调用原始函数。

function returnThis(){
  return this;
}

var user1 = {name:"食堂"};
var user1returnThis = returnThis.bind(user1);
user1returnThis();             // 食堂
var user2 = {name:"小食堂"};
user1returnThis.call(user2);   // still 食堂

// Object.prototype.bind通过一个新函数来提供了永久的绑定
// 而且会覆盖call和apply的指向

注意：apply、call、bind 都是可以改变 this 的指向的，区别是：使用apply、call的函数直接执行使用bind需要手动调用才会执行

使用new调用foo()时，会把构造的新对象绑定到foo()调用中的this上，这就是「new绑定」

function Fn(){
  this.user = "小食堂";
}
var demo = new Fn();
console.log(demo.user);  // 小食堂

// 这里new关键字改变了this的指向
// new关键字创建了一个对象实例
// 所以可以通过对象demo点语法点出函数Fn里面的user
// 这个this指向对象demo

// 注意：这里new会覆盖bind的绑定
function demo(){
  console.log(this);
}

demo();             // window
new demo();         // demo
var user1 = {name:"小食堂"};
demo.call(user1);   // 小食堂

var user2 = demo.bind(user1);
user2();            // 小食堂
new user2();        // demo

最后，当this遇上return时

function fn(){
  this.user = "小食堂";
  return{};
}
var a = new fn;
console.log(a.user);  // undefined

function fn(){
  this.user = "小食堂";
  return function(){};
}
var a = new fn;
console.log(a.user);  // undefined

function fn(){
  this.user = "小食堂";
  return 1;
}
var a = new fn;
console.log(a.user); // 小食堂

function fn(){
  this.user = "小食堂";
  return undefined;
}
var a = new fn;
console.log(a.user); // 小食堂

// 总结：如果返回值是一个对象
// 那么this指向就是返回的对象
// 如果返回值不是一个对象
// 那么this还是指向函数的实例

// null比较特殊，虽然它是对象
// 但是这里this还是指向那个函数的实例

function fn(){
  this.user = "小食堂";
  return null;
}
var a = new fn;
console.log(a.user); // 小食堂