Javascript中的this指向

console.log(this.document === document); // true

// 在浏览器中，全局对象为 window 对象：
console.log(this === window); // true

this.a = 37;
console.log(window.a); // 37

function f1(){
  return this;
}

f1() === window; // true

function f2(){
  "use strict"; // 这里是严格模式
  return this;
}

f2() === undefined; // true

function independent() {
  return this.prop;
}

var o = {
  prop: 37,
  f: independent
};
console.log(o.f());  //37
var a = o.f;
console.log(a()):  //undefined

o.b = {
  g: independent,
  prop: 42
};
// 嵌套调用
console.log(o.b.g()); // logs 42

var o = {
  f : function(){ 
    return this.a + this.b; 
  }
};
var p = Object.create(o);
p.a = 1;
p.b = 4;

console.log(p.f()); // 5

function sum() {
  return this.a + this.b + this.c;
}

var o = {
  a: 1,
  b: 2,
  c: 3,
  get average() {
    return (this.a + this.b + this.c) / 3;
  }
};

Object.defineProperty(o, 'sum', {
    get: sum, enumerable: true, configurable: true});

console.log(o.average, o.sum); // logs 2, 6

function C(){
  this.a = 37;
  console.log(this.a)
}

var c  = new C() // 37

class Example {
  constructor() {
    const proto = Object.getPrototypeOf(this);
    console.log(Object.getOwnPropertyNames(proto));
  }
  first(){}
  second(){}
  static third(){}
}

new Example(); // ['constructor', 'first', 'second']

var div = document.getElementById('divId');
div.addEventListener('click', function () {
    console.log(this); // div
}, false);
div.onclick = function() {
    console.log(this); // div
}

<button onclick="console.log(this);" /> // button
<button onclick="(function() { console.log(this); })();" /> // window
<button onclick="(function() { 'use strict' console.log(this); })();" /> // undefined

function Person() {  
    this.age = 0;  
    setTimeout(function() {
        console.log(this);
    }, 3000);
}
var p = new Person();//3秒后返回 window 对象

function Person() {  
    this.age = 0;  
    setInterval(() => {
        // 回调里面的 `this` 变量就指向了期望的那个对象了
        this.age++;
    }, 3000);
}

var p = new Person();

var obj = {
    A: function() {
        function B() {
            console.log(this);
        };
        B(); // window
        function C() {
            'use strict'
            console.log(this);
        }
        C(); // undefined
    }
}

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

console.log(new Food('cheese', 5).name);
// expected output: "cheese"

var array = ['a', 'b'];
var elements = [0, 1, 2];
array.push.apply(array, elements);
console.info(array); // ["a", "b", 0, 1, 2]

const obj1 = {
    a: 1,
    getA: function() {
        return this.a;
    },
    sum: function(x, y) {
        return this.a + x + y;
    }
}
const obj2 = { a: 2 };
const obj2GetA = obj1.getA.bind(obj2);
obj2GetA(); //
const sum2 = obj1.sum.bind(obj2, 2);
sum2(2); // 2 + 2 + 2 = 6

// 如果绑定后的函数使用new来调用，原来提供的 this 就会被忽略。
// 作为构造函数使用的绑定函数,可能不应该用在任何生产环境中。

// bind的一个简单实现
if (!Function.prototype.bind) (function(){
  var ArrayPrototypeSlice = Array.prototype.slice;
  Function.prototype.bind = function(otherThis) {
    if (typeof this !== 'function') {
      // closest thing possible to the ECMAScript 5
      // internal IsCallable function
      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
    }

    var baseArgs= ArrayPrototypeSlice.call(arguments, 1),
        baseArgsLength = baseArgs.length,
        // fToBind是调用bind的函数本身
        fToBind = this,
        // 绑定后的函数用new调用时，用来作为生成对象的原型的构造函数
        fNOP    = function() {},
        // 最终绑定的函数
        fBound  = function() {
          baseArgs.length = baseArgsLength; // reset to default base arguments
          baseArgs.push.apply(baseArgs, arguments);
          // 下面的this是fBound执行时的this,如果fBound使用new调用，则使用生成对象的作为this
          return fToBind.apply(
                 fNOP.prototype.isPrototypeOf(this) ? this : otherThis, baseArgs
          );
        };

    if (this.prototype) {
      // Function.prototype doesn't have a prototype property
      fNOP.prototype = this.prototype;
    }
    fBound.prototype = new fNOP();

    return fBound;
  };
})();