this

this对于初学 JS 的新人来说，是一道坎，看到this就晕头晕脑，脑容量一下不够用了。

先来说下判断this结论

1. this是函数调用时call的第一个参数
2. this只有在函数执行的时候才能被确定，实际指向调用它那个对象（上一级）

先来看下函数常用的几种调用方式

fn(a,b)
fn.name(a,b)
var f = fn.name; f(a,b)
fn.call(undefined,a,b)
fn.apply(undefined,[a,b])

上面三种调用方法对于新人很熟悉，而对后面两种方法比较陌生，自然也就弄不明白this含义了。

改写下函数的调用方式就会发现这两种是等价的，回到上面说的结论，call的第一个参数是this，a、b才是传进去的参数。

fn(a,b) === fn.call(undefined,a,b) === window.fn.apply(window,[a,b])

明白了这点，大部分的this就不难判断了，新人在判断this时只需改写函数调用方式就能知道this指向了。

this例子

下面方法中暂且不讨论严格模式，this的指向
例子1：

var user = 'window'
function fn(){var user = 'object';console.log(this.user); //windwow
}
fn();    //改写 window.fn.call(window)

fn是全局对象window的方法

例子2：

var user = 'window'
var obj = {user:'object',fn:function(){console.log(this.user);  //object}
}
obj.fn();    //改写 obj.fn.call(obj)

这里的fn是被obj调用的，所以fn内部的this指向obj内部的user。

你可能会有疑惑了，这里是不是可以改写成window.obj.fn.call(window)，往下看

例子3：

var user = 'window'
var obj = {user:'object',fn:function(){console.log(this.user);  //object}
}
window.obj.fn();    //改写 window.obj.fn.call(window.obj)

先看下面例子

例子4：

var user = 'window'
var obj = {user:'object',fn1:{user:'function',fn2:function(){console.log(this.user)    //function}}
}
obj.fn1.fn2();    //改写 obj.fn1.call(obj.fn1)

例子3中正常情况下都是把window给省略的，这里写出来是为了和例子4做对比。

假设例子4中obj对象是不是window下的方法，而是和window平级（实际不存在这种假设，容易理解）。

这里是链式调用，this的最终指向是调用它的上一层对象fn1，但是不能改写成obj.fn1.call(fn1)，只有window可以省略。

例子5：

var user = 'window'
var obj = {user:'object',fn1:{user:'function',fn2:function(){console.log(this.user)    //window}}
}
var a = obj.fn1.fn2;
a()        //改写 window.a.call(window)

先看下面例子

例子6：

var a = {user:'window'}
var obj = {user:'object',fn1:{user:'function',fn2:function(){console.log(this.user)    //window}}
}obj.fn1.fn2.call(a);

看到例子5和例子6是不是已经晕了。

例子5中，var a = obj.fn1.fn2只是赋值，并没用执行，而真正执行的时候，a是window下的方法，所以fn2内部的this指向window下的user。

例子6中，call的第一个参数是a，那this肯定指向a的user，因为显示绑定优先级高于隐示绑定。

那你可能要问什么是显示绑定，什么是隐示绑定呢？

obj.fn()    //隐示绑定
obj.fn.call(obj)    //显示绑定

也就是说你改写后的调用就是显示绑定。

new构造函数

例子7：

function Fn(){this.user = 'object';
}
var a = new Fn();
console.log(a.user); //object

例子7中，因为构造函数的this指向构造出来的实例，所以a是用new构造出来的对象，那么this就是指向a。

构造函数中要注意的一点是：默认情况下，构造函数是没有return，但是非要加一个return的话。

1. 如果return的是引用类型值，那么构造函数的this就指向return的对象
2. 如果return的是基本类型值，那么构造函数的this就指向构造出来的实例化函数

this基本应用就是这些，做一些实操练习巩固一下

this实操

实操1：

function X(){return object = {name:'object',f1(x){x.f2()        //② 改写 options.f2.call(options)},f2(){console.log(this)}}
}var options = {name:'options',f1(){},f2(){console.log(this)    //③ 运行这个this，打印 options 函数}
}var x = X()；
x.f1(options)；    //① 改写 object.f1.call(object,options)

看到this就马上改写，不改写就做，肯定错。

分析

1. 首先把x.f1(options)改写object.f1.call(object,options)
2. x.f1(options)调用object对象内部f1方法，把options函数作为参数传入，所以 object内部f1(x)中的x是options函数
3. f2内部的this指向options

实操2：

function X(){return object = {name:'object',f1(x){x.f2.call(this)        //② 这里是显示绑定，改写 options.f2.call(object)},f2(){console.log(this)}}
}var options = {name:'options',f1(){},f2(){console.log(this)    //③ 运行这个 this 打印 object}
}var x = X()
x.f1(options)    //① 改写 object.f1.call(object,options)

分析

1. 首先把x.f1(options)改写object.f1.call(object,options)
2. f1内部的this指向object
3. 把x.f2.call(this)改写options.f2.call(object)，这里的.call(this)是显示指定
4. f2内部的this就是object

实操3：

function X(){return object = {name:'object',options:null,        //③ options = optionsf1(x){this.options = x    //② 改写 object.options = optionsthis.f2()            //③ 改写 object.f2.call(object)},f2(){this.options.f2.call(this)    //④ 显示绑定，改写object.options.f2.call(object)}}
}var options = {name:'options',f1(){},f2(){console.log(this)    //⑤运行这个 this，打印 object}
}var x = X()
x.f1(options)    //① 改写 object.f1.call(object,options)

分析

1. 首先把x.f1(options) 改写object.f1.call(object,options)
2. f1内的this指向object，options作为参数传进来
3. 把this.options = x改写object.options = options，同时也把this.f2()改写称object.f2()
4. 把this.options.f2.call(this) 改写object.options.f2.call(object),.call(this)是显示绑定
5. f2内部的this就是object