JavaScript中的this详解（彻底弄懂js中的this用法）！

要想学好js，那么其中那些特别令人混淆迷惑的知识点，就一定要弄清楚。this关键字就是其中让初学者比较迷惑的知识点之一，不过灵活运用this可以提升代码的性能和复用性，那么今天我就和大家一起来了解this的具体情况，

首先this作为关键字，它的作用就是引用，并且它通常只写在函数内部就是函数体内，在js中this的引用对象随着函数的使用环境变化而变化，好在具体的使用环境并不多，基本就四种。分别是普通函数、构造函数、对象属性、apply&call方法。

一、普通函数中的this

所谓普通函数，就是写在全局环境中，并且不属于构造函数、对象属性、调用过apply&call方法的任意一种情况。我们平时写的普通的方法和功能基本都是普通函数。普通函数中的this都引用window对象

//function关键字声明的普通函数
function  fn1(){
console.log(this);
};
fn1();//执行结果：window{...}

//函数表达式形式的普通函数
var  fn2=function(){
console.log(this);
}
fn2();//执行结果：window{...};

//访问全局属性，
var x=10;
function fn3(){
console.log(this.x)
}
fn3();//执行结果 10

//普通函数中的this,和全局环境中this是一样的
var x=10;
console.log(this)//执行结果 window｛...｝
console.log(this.x)//执行结果 10　　

二、构造函数中this

构造函数与普通函数的区别就是，构造函数的目的是用来构造对象的，类似Java中的class ,构造对象的方式就是使用new 关键字 ，如何通过构造函数给对象添加属性？就是使用this关键字，所以构造函数中的this指向的是它实例化的对象

//写一个构造函数
function person()｛
this.sex='female';
this.age=''20'
｝;
var xiaoming=new person();//js在执行到此条语句时，将this的引用指向了xiaoming
console.log(xiaoming.age),//执行结果 20

//需要注意的是 如果直接执行构造函数，而不是new 一下，那么this还是指向window
function person()｛
this.sex='female';
this.age=''20';
console.log(this)
｝;
person();//执行结果 window{...}

三、apply方法和call方法

this这么强大，不好好利用怎么对得起js属于高级语言的行列。js提供了可以自主更改this的指向的方法。玩转高级js ,不知道apply 和call方法怎么行。apply 和call方法，是所有函数类型的原生方法，和数组的split（）,push() 一样，不需要另外声明直接可以用的方法。函数调用call（）、apply()方法后，this的引用为call apply 方法传进去的第一个参数

//先来一个call
var a={
c:0,
b:1
};//定义一个对象
function fn1(){
console.log(this)
};
fn1.call(a)//执行结果：｛c:0,b:1｝

//call apply 的功能一样，唯一不同的是传给函数的参数的方式（就是第二个参数开始，第一个参数是this指向的新对象）
//apply 传数组，这个数组包含函数所需要的参数，call 直接传参数
var a={
c:0,
b:1
};//定义一个对象，用来做call和apply的第一个参数
function fn2(arg1,arg2){
console.log(this)
console.log(arg1+arg2)
};
fn2.call(a,1,1)//执行结果｛c:0,b:1｝ 2
fn2.apply(a,[1,1]);//执行结果｛c:0,b:1｝ 2
fn2.apply(a,1,1)//报错

//其实还有一个bind方法.bind方法和call使用方式一样,作用也一样，不一样的是实现方式，call传参结束后直接执行函数（apply也是），而bind只是更改this值和给函数传参，函数并不执行
,所以bind可以作为事件的处理函数去使用
//比如给div绑定一个click事件
div.onclick=fn.call(obj,arg1,arg2)//这样不待div点击fn就已经被执行了
div.onclick=fn.bind(obj,arg1,arg2)//这样当div被点击时才会有效

四、作为对象的属性

js中的对象概念，也值的花大篇幅去介绍，再此不做赘述，这里讨论的对象只是js特有的对象格式（用大括号包括，以键值对的形式表示属性和属性值，并且每个属性用逗号隔开），js函数也可以作为对象的属性值，这个时候作为对象属性值的函数，其内部this指向的就是这个对象

var obj={
 x:1,
y:function(){
console.log(this);
console.log(this.x)
}
};
obj.y;//执行结果 ｛x:1,y:fn｝ 1

//需要注意的是，如果函数不是作为对象属性的属性值被调用，而是作为属性值赋值给其他变量，则此函数中的this不再指向该对象
var obj={
x:function(){

console.log(this)

}}
var z=obj.x;//作为属性值赋值
z();//执行结果 window｛...｝

//利用此原理，我们可以将一个函数供给两个对象使用
obj1.fn=obj2.fn=function(){
console.log(this)
}
//这样obj1,和obj2就都有一个fn属性，这个属性值是一个函数，并且这个函数中this指向的对象分别obj1 ,obj2
//大名鼎鼎的jQuery很多地方都用了这样的方式，有兴趣的同学可以看看jQuery源码

写到这了，this的用法就基本描述完了，也许this还有其他更高级更优秀的用法，那就需要各位自己去探索，总结了。总之学海无涯，需要我们一点一滴的积累，切不可急躁。