前言
本文讲解了WEB前端开发javascript的this指向基础，如果觉得对你有帮助请关注小编，你的支持就是我更新的动力！
以下是本篇文章正文内容，下面案例可供参考
一、javascript this
this作为js语言的一个关键字,表示函数运行时自动生成的一个内部对象，只能在函数内部使用。
情况1 :纯粹的函数调用
function test(){ this.x = 1; alert(this.x); } test(); // 1 //为了证明this就是全局对象，对代码做一些改变 var x = 1; function test(){ alert(this.x); } test(); // 1 //再变 var x = 1; function test(){ this.x = 0; } test(); alert(x); //0
情况2 :作为对象方法调用
//函数还可以作为某个对象的方法调用，这时this就指这个上级对象。 function test(){ alert(this.x); } var o = {}; o.x = 1; o.m = test; o.m(); // 1
情况3：作为构造函数调用
//所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，this就指这个新对象 function test(){ this.x = 1; } var o = new test(); alert(o.x); // 1 //为了证明this不是全局对象，对代码做一些改变 var x = 2; function test(){ this.x = 1; } var o = new test(); alert(x); //2
情况4：apply/call调用
var x = 0; function test(){ alert(this.x); } var o={}; o.x = 1; o.m = test; o.m.apply(); //0 //apply的参数为空时，默认调用全局对象。若有值，this指向该对象 o.m.apply(o); //1
最后看下几个较为复杂的例子，巩固下理解
//1 var name = "the window"; var object={ name:"my object", getNameFunc : function(){ return function(){ return this.name; }; } }; var func = object.getNameFunc(); console.log(func())//"the window" //2 var name = "the window"; var object={ name:"my object", getNameFunc : function(){ var that = this; return function(){ return that.name; }; } }; var func = object.getNameFunc(); console.log(func())//"my object" //3 var name = "the window"; var object={ name:"my object", getNameFunc : function(){ return function(){ return this.name; }; } }; var obj = {}; obj.name = "obj name" obj.func = object.getNameFunc(); console.log(obj.func());//"obj name"
二、Javascript This 指针指向问题
js中的this最终指向的是那个调用它的函数[this:谁调用它就指向谁]
首先看一下接下来的例子
例子一
function aa(){ var men = "leon"; console.log(this.men);//undefined console.log(this);//window } aa();
按照上面我们说的那样，this的最终指向的是调用它的对象，这里的函数aa实际上是最终指向的window，而window里面是没有men的，所以第一个是undefined，第二个则是window。
例子二
var bb ={ 'men' : "leon", fn:function(){ console.log(this.men)//leon } } bb.fn(); var bb ={ 'men' : "leon", fn:function(){ console.log(this.men)//leon } } window.bb.fn();
说明：这里的this指向的是对象bb，因为你调用这个fn是通过bb.fn()执行的。所以我们可以说明一点，this的指向在对象创建的时候是决定不了的，在调用的时候才能够决定，谁调用就指向谁。
例子三
例子1： var name="The window"; var object={ name:"My object", getNameFunc:function(){ //递归 return function(){ return this.name; } } } alert(object.getNameFunc()());
This在找到一个变量的同时就不会往下找
例子2 var name="The window"; var object={ name:"My object", getNameFunc:function(){ //递归 var that=this; return function (){ return that.name; } } } alert(object.getNameFunc()());
说明：
window是js中的全局对象，我们创建的变量实际上是给window添加属性，而一般情况我们经常省略window，所以这里可以用window.bb
例子四
var cc = { a:99, b:{ a:100, fn:function(){ console.log(this.a);//100 } } } cc.b.fn();
这里的函数是由最外层的cc点出来的，但是this和上面一样并没有执行它，而是最终指向的b；所以我们可以推翻一开始说的那句话，并且总结如下：
情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window（但是这里需要说明的是js的严格版中this指向的不再是window，这个问题在这里不谈）。
情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，this指向的是就是它上一级的对象。
情况3：如果一个函数中有this，这个函数包含多个对象，尽管这个函数是被最外层的对象所调用，this也只是指向的它上一级的元素。
总结
1.函数在被直接调用的时候，其中的this指针永远指向window
2.匿名函数this总是指向window对象
3.谁执行函数，this就指向谁
4.如果函数通过new创建，则this指向新建出来的对象
关注
本文到这里就结束了，如果你觉得本文对你有帮助，请三连支持博主！
