this

this的指向在函數定義時確定不了
函數執(zhí)行時才能確定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并沒執(zhí)行，最終指向的是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值和初始化參數改造的原函數拷貝

//創(chuàng)建綁定函數
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);