this,call,apply,bind,箭头函数

this

this的指向在函数定义时确定不了
函数执行时才能确定this的指向，指向最终 调用它的对象

function a(){
    var user="追孟子";
    console.log(this.user);                // undefined
    console.log(this)                      // this指向window
}
a();                                       // 相当于window.a()


var o = {
    user : "追孟子",
    fn : function(){
        console.log(this.user);            // 追孟子
    }
}
o.fn();                                    // this指向o,函数被上一级调用,this的指向就是上一级
window.o.fn();                             // 指向window.o对象


var o={
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a);        // 12，如果b对象中的a:12注释掉，则，输出的是undefined
        }
    }
}
o.b.fn()                                // 函数中包含多个对象，尽管这个函数是被最外层对象调用，this的指向也只是他上一级的对象
var j = o.b.fn;
j();                                    // this指向的是window，this.a为undefined。fn赋值给变量j并没执行，最终指向的是window

箭头函数

更短的函数，相当于匿名函数，简化了函数的定义
不绑定this，this为作用域，有上下文决定
普通函数的this指向调用它的那个对象
call,apply,bind不会改变this的指向

var obj = {
    birth:1990,
    getAge:function(){
        var b = this.birth;                                                        // 1990,this指向obj
        var fn = function(){
            return new Date().getFullYear() - this.birth;                          // undefined,this指向window
        };
        return fn();
    }
}
var obj = {
    birth:1990,
    getAge:function(){
        var that = this;
        var b = this.birth;                                                        // 1990,this指向obj
        var fn = function(){
            return new Date().getFullYear() - that.birth;                          // this指向obj
        };
        return fn();
    }
}
var obj = {
    birth:1990,
    getAge:function(){
        var b = this.birth;                                                        // 1990
        var fn = ()=> new Date().getFullYear() - this.birth;                       // this指向obj对象
        };
        return fn();
    }
}
/* 
    箭头函数
        不能用new和argument,没有prototype属性
*/
var Person = (name,age) => {
    this.name = name;
    this.age = age;
}
var p = new Person('John',33)                                                    // error

var func = () => {
    console.log(arguments)
}
func(55)                                                                         // error

var Foo = () => {}
console.log(Foo.prototype)                                                      // undefined

bind

fun.bind(thisArg[,arg1[,arg2[,...]]])
  thisArg：当绑定函数被调用时，该参数会作为原函数运行时的this指向；
      new操作符调用绑定函数时该参数无效
  arg1[,arg2[,...]]:当绑定函数被调用时，该参数将置于实参之前传递给被绑定的方法
  返回值：返回指定的this值和初始化参数改造的原函数拷贝

//创建绑定函数
this.x = 9; 
var module = {
    x: 81,
    getX: function() { return this.x; }
};
module.getX();                                         // 返回 81
var retrieveX = module.getX;
retrieveX();                                           // 返回 9, "this"指向全局作用域
var boundGetX = retrieveX.bind(module);
boundGetX();                                           // 返回 81

apply(),call()

在特定的作用域中调用函数（等于设置函数体内this对象的值，以扩充函数赖以运行的作用域）
会改变this的指向
若apply和call的第一个参数为null时，this指向window对象

//基本用法
function add(a,b){
    return a+b
}
function sub(a,b){
    return a-b
}
var a1 = add.apply(sub,[4,2])            //6,sub调用add方法
var a2 = sub.apply(add,[4,2])            //2,add调用sub方法

var a3 = add.call(sub,4,2)               //6,sub调用add方法

function Product(name, price) { 
  this.name = name; 
  this.price = price; 
  if (price < 0) { 
    throw RangeError( 'Cannot create product ' + this.name + ' with a negative price' ); 
  } 
} 
function Food(name, price) { 
  Product.call(this, name, price); 
  this.category = 'food'; 
} 

//等同于 
function Food(name, price) { 
  this.name = name; 
  this.price = price; 
  if (price < 0) { 
    throw RangeError( 'Cannot create product ' + this.name + ' with a negative price' ); 
  } 
  this.category = 'food'; 
} 

//function Toy 同上 
function Toy(name, price) { 
  Product.call(this, name, price); 
  this.category = 'toy'; 
} 
var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);