不再用被this苦恼了

前端编程对于this再熟悉不过了，今日来个老调重弹温故知新，确定有不少大佬已经彻底吃透了this原理，敬请出门左拐。对于理解this似懂非懂的同窗能够借鉴一波

1.this描述

this指的是当前执行环境上下文，只要紧紧抓住这一点就能找到this的根源，this.function、this.property就能准肯定位实际对象。

2.this绑定规则

window 绑定

function sayAge () {
    console.log(this.age);
}
var  user = {
    name: 'ccy',
    age: 18
}
sayAge()

　　输出结果为undefined，仔细思考当前函数执行的上下文，其实等价于window.sayAge()

　　this默认绑定在window全局对象上

隐式绑定

function foo() { 
    console.log( this.a );
}
var obj = { 
    a: 2,
    foo: foo
};
obj.foo();

　　这段代码this绑定到了obj对象，当函数引用有上下文对象（context）时，隐式绑定规则会把this绑定到这个上下文对象

　　再看看隐式丢失问题

var bar=obj.foo;
bar();

　　输出undefined，由于此时执行上下文为全局对象，没有a属性

显式绑定

　　在分析隐式绑定时，必须将函数做为对象的属性，从而将此对象绑定在函数的执行上下文，但想一想是否是很麻烦，显示绑定可解决此问题。

function foo() { 
　　console.log( this.a );
}
var obj = { 
　　a:2
};
foo.call( obj );

　　用函数原型属性 call、apply、bind均可以实现

Function.prototype.call=function(ctx,arg1,arg2,/*...*/argN){native code}

Function.prototype.apply=function(ctx,arrys){native code}

Function.prototype.bind=function(ctx){native code}

　　固然这些函数原型属性均可以重写以实现本身的需求，call和apply的区别仅仅在于第二个参数开始apply传递数组，call是将参数一个个传递，call与bind的区别在于bind不能当即执行。

new 绑定

　　其实每当用 new 调用函数时，JavaScript 解释器都会在底层建立一个全新的对象并把这个对象当作 this。若是用 new 调用一个函数，this 会天然地引用解释器建立的新对象。

function User (name, age) {
      /*
        JavaScript 会在底层建立一个新对象 `this`，它会代理不在     User 原型链上的属性。
        若是一个函数用 new 关键字调用，this 就会指向解释器建立的新对象。
      */
      this.name = name
      this.age = age
    }
    var me = new User('ccy', 18)

若是要判断一个运行中函数的this绑定，就须要找到这个函数的直接调用位置。找到以后就能够顺序应用下面这四条规则来判断this的绑定对象。

参考资料

http://www.javashuo.com/article/p-wecurhfo-h.html

http://www.javashuo.com/article/p-rvqyezkt-en.html