JavaScript中的 this指向问题

以下文章均已附上原文链接，侵删

文章一：vue中的this指向问题

vue中的this指向问题_JingG459的博客-CSDN博客_vue中this指向问题

最近写项目遇到很多this指向的问题，今天来写一下我总结的this指向

看了很多文章，之前也在私下总结过，对于正常函数，谁调用的它，this就指向谁，而箭头函数没有this，它的this指向一般就是上下文中，与谁调用它没关系。

但是在Vue实例中，methods中如果用的是正常函数，那么它的this就指向Vue实例；如果是箭头函数，this就指向window对象。

在Vue的官方文档是这么解释的：

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this自动绑定为 Vue 实例。

注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

1. Vue中生命周期钩子和自定义方法中的this指向当前的 Vue 实例：

生命周期钩子的 this 上下文指向调用它的 Vue 实例

所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对 property 和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同，this.fetchTodos 的行为未定义。

2. Vue 中回调函数中的 this：

若回调函数为匿名函数，非严格模式下指向 window,严格模式下为 undefined。
若回调函数为自定义方法，则 this 指向 Vue 实例。
若回调函数为箭头函数，则 this 指向 Vue 实例。
3. Vue 中 addEventListener 中的 this

通常，事件监听函数中的 this 都指向绑定事件的那个元素, 但是在 Vue 中，监听函数中的 this 也指向 Vue 实例

总结：除了回调函数中的 this ，其它地方的 this 均指向 Vue 实例

————————————————
版权声明：本文为CSDN博主「JingG459」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/JINGinC/article/details/120926465

文章二：js中匿名函数和箭头函数的this指向

js中匿名函数和箭头函数的this指向_Dailoge的博客-CSDN博客_匿名函数的this

匿名函数最经典的总结：就是谁调用匿名函数，匿名函数中的this就指向谁；匿名函数是有执行上下文，只是执行上下文是执行的时候传递过来，箭头函数中的执行上下文是父级的执行上下文，匿名函数可以作为箭头函数的父级（详见例3）

例1.匿名函数

var name='window';
var obj = {name:'obj',nameprintf:function(){console.log(this.name)}
}
var obj1 = {name:'obj1'
}
obj.nameprintf();//'obj'
var w = obj.nameprintf;
w();//'window'，这时候相当于Window.w(),this自然指向的是Window
obj.nameprintf.call(obj1) //obj1,匿名函数的中的this已经被绑定到了obj1

例2.箭头函数它会直接绑定到它父级的执行上下文里的this。

var name='window';
var obj = {name:'obj',nameprintf:()=>{console.log(this.name)}
}
obj.nameprintf();//window,因为此时父级是obj，obj的上下文是window

例3.两者相结合

var obj={num:4,fn:function(){  console.log(this); //匿名函数的this，应该是谁调用指向谁(() => {console.log(this);//箭头函数的this，应该是父级的执行上下文，这里父级是fn，上下文就是调用fn函数的那个对象，和上面的this指向是一样的})();}
}
obj.fn(); //指向的都是obj
var w = obj.fn;
w(); //指向的Window
var obj1 = {name:'obj1', fn:obj.fn}
obj1.fn(); //指向的obj1
obj.fn.call(obj1); //也是指向obj1

总结：匿名函数的this是执行时的上下文，箭头函数是定义时的父级执行上下文。

如有不对的地方请指出，不喜勿喷，谢谢。

文章三：匿名函数下this指向window，及解决办法；箭头函数的this指向问题

匿名函数下this指向window，及解决办法；箭头函数的this指向问题_dxj124的博客-CSDN博客_this指向window

匿名函数下this指向window

var name = "小明";
var Data = {name: "xiaoming",init: function() {setTimeout(function() {console.log(this.name);  //'小明'}, 1000)}
}Data.init();/*匿名函数中，this指向的是window*/

    var obj ={age:10,sayHello:function(){(function () {console.log(this.age);}());}}var age = 20;// console.log(obj.age); 10console.log(obj.sayHello()); // 20

解决匿名函数下this指向window的问题，让他指向当前函数

1.通过that

var name = "小明";
var Data = {name: "xiaoming",init: function() {var that=this; //定义一个thatsetTimeout(function() {console.log(that.name); //'xiaoming'}, 1000)}
}Data.init();

2.通过bind

var name = "小明";
var Data = {name: "xiaoming",init: function() {setTimeout(function() {console.log(this.name);//'xiaoming'}.bind(this), 1000) //.bind(this)来处理}
}Data.init();

3.通过es6的箭头函数

var name = "小明";
var Data = {name: "xiaoming",init: function() {setTimeout(()=> {console.log(this.name);//'xiaoming'}, 1000)}
}Data.init();

为什么箭头函数会改变this的指向？？？

普通函数：this的指向是在函数执行的时候绑定的，而不是在函数创建时绑定的，谁调用指向谁，this指向的是最后调用它的对象。

箭头函数：this的指向是在函数创建的时候绑定的，而不是在函数执行时绑定的

不管在什么情况下,箭头函数的this跟外层function的this一致，外层function的this指向谁，箭头函数的this就指向谁，如果外层不是function则指向window

// this指向最后调用它的对象var heroName = '黄蓉';
var obj={heroName:'huangrong',init:function(){console.log(this.heroName) //'huangrong'}
}
obj.init();// 箭头函数的this跟外层function的this一致var heroName = '黄蓉';
var obj={heroName:'huangrong',init:()=>{console.log(this.heroName)//'黄蓉'}
}
obj.init();// 箭头函数的this跟外层function的this一致var heroName = '黄蓉';
function obj() {this.heroName = 'huangrong'const foo = () => {console.log(this.heroName)//=>huangrong}foo();
}
obj();

文章四：Dart 中的函数（箭头函数、匿名方法、自执行方法、递归、闭包）

Dart 中的函数（箭头函数、匿名方法、自执行方法、递归、闭包）_烟花下的孤独的博客-CSDN博客

箭头函数
箭头函数中只能写一句代码，不能写多句执行代码

箭头函数改写 forEach

  List list = ['苹果', '香蕉', '西瓜'];list.forEach((value) {print(value);});list.forEach((value) => print(value));list.forEach((value) => {print(value)});

箭头函数中的 map

  List list = [4, 1, 2, 3, 4];var newList = list.map((value) {if (value > 2) {return value * 2;}return value;});print(newList.toList()); var newList2 = list.map((value) => value > 2 ? value * 2 : value); print(newList2.toList());

箭头函数判断是否为偶数

  bool isEvenNumber(int n) => n % 2 == 0 ? true : false;print(isEvenNumber(10));

匿名方法

  var printNum = () {print(1212123);}; printNum();var printNumAdd = (int n) {print(n + 12);};printNumAdd(12);

自执行方法

  (() {print('我是自执行方法');})();((int n) {print(n);print('我是自执行方法');})(12);

方法的递归

  var sum = 1;fn(int n) {sum *= n;if (n == 1) {return;}fn(n - 1);}fn(5);print(sum);

闭包：

1、全局变量特点:    全局变量常驻内存、全局变量污染全局
2、局部变量的特点：  不常驻内存会被垃圾机制回收、不会污染全局  想实现的功能：1.常驻内存        2.不污染全局   产生了闭包,闭包可以解决这个问题.....  闭包: 函数嵌套函数, 内部函数会调用外部函数的变量或参数, 变量或参数不会被系统回收(不会释放内存)闭包的写法： 函数嵌套函数，并return 里面的函数，这样就形成了闭包。

全局变量

  var a = 123;fn() {a++;print(a);}fn();fn();fn();

局部变量

  printInfo() {var myNum = 123;myNum++;print(myNum);}printInfo();printInfo();printInfo();

闭包

  fn() {var a = 123; /*不会污染全局   常驻内存*/return () {a++;print(a);};}var b = fn();b();b();b();

文章五：4 JS函数（箭头函数、立即执行函数）

4 JS函数（箭头函数、立即执行函数）_一生注定学霸命的博客-CSDN博客_箭头函数立即执行

箭头函数

箭头函数抛弃了糟粕，放弃了argument和this

里面的this就是外面的this（默认为window）
this对于箭头函数没有任何特殊意义，就是一个普通变量名，外面如果声明了this是什么，那就是什么
就算加了call也没有用

箭头函数也没有定义arguments
arguments是打印出所有伪数组

立即执行函数

只有JS有的东西，但现在用得很少

1.问题
以前只有var的时候，想要声明局部变量只能调用一个函数
缺点：为了声明局部变量a而声明了一个全局函数fn

2.解决办法

函数没有名字就不是全局函数
不给函数取名字，一个匿名函数，然后在声明后面直接加()，直接调用匿名函数
但这样JS认为不合法，因此要在这个函数前面加一个操作运算符

! function (){//前面的操作符可以：+ - !var a = 1console.log(a)
}()

推荐使用!，不会有任何问题
永远不要用()做立即执行函数，因为()会向上看，和上面那一行连起来，如上面代码返回值为undefined，就会变成undefined(function....)，把undefined当成了一个函数

3.新版JS如何造一个局部变量

用let和{}

文章六：JS中的this指向

JS中的this指向_XXXxxx光的博客-CSDN博客_js this指向

this的概念：

在js中，this的意思为“这个;当前”，是一个指针型变量，它动态指向当前函数的运行环境。
在不同的场景中调用同一个函数，this的指向也可能会发生变化，但是它永远指向其所在函数的真实调用者；如果没有调用者，就指向全局对象window。

普通函数：关于this，谁调用就指向谁，没有调用者，就指向全局对象window。

箭头函数：箭头函数的this指向于函数作用域所用的对象。

一、全局环境下的this指向

在全局作用域下，this始终指向全局对象window，无论是否是严格模式！

congsole.log()完整的写法是window.console.log(),window可以省略，window调用了console.log()方法，所以此时this指向window。

二、函数内的this

普通函数内的this分为两种情况，严格模式下和非严格模式下。

1. 严格模式下：

直接test()调用函数,this指向undefined，window.test()调用函数this指向window。因此，在严格模式下，我们对代码的的调用必须严格的写出被调用的函数的对象，不可以有省略或者说简写。

2. 非严格模式下：

非严格模式下，通过test()和window.test()调用函数对象，this都指向window。

三、对象中的this

对象内部方法的this指向调用这些方法的对象，也就是谁调用就指向谁。

1. 一层对象：

调用obj.skill()方法，返回值为蒙犽，说明此时this指向obj。

2. 二层对象：

调用skill2()方法的顺序为，obj.obj2.skill2() ,返回值为鲁班，说明skill2()方法中的this指向obj2。

总结：

函数的定义位置不影响其this指向，this指向只和调用函数的对象有关。
多层嵌套的对象，内部方法的this指向离被调用函数最近的对象。

四、箭头函数中的this

箭头函数：this指向于函数作用域所用的对象。

箭头函数的重要特征：箭头函数中没有this和arguments，是真的没有！

箭头函数没有自己的this指向，它会捕获自己定义所处的外层执行环境，并且继承这个this值,指向当前定义时所在的对象。箭头函数的this指向在被定义的时候就确定了，之后永远都不会改变。即使使用call()、apply()、bind()等方法改变this指向也不可以。

例子1：

声明的是全局变量Obj，this指向箭头函数所在全局作用域的对象，即indow对象。

例子2：

由于show函数是箭头函数，所以自身不能绑定this，因此找它的上一级作用域。如果父级作用域还是箭头函数，就再往上找，一层一层的直到直到this的指向。
window.show()返回值是window，所以this此时指向window；
window.obj.show(),obj是对象，非箭头函数，所以找到这里就停止了，this绑定到obj上。window调用obj，所以obj中的this也指向window。

五、构造函数中的this

构造函数中的this是指向实例。

由上图可以看出，构造函数中的this指向构造函数下创建的实例。

六、原型链中的this

this这个值在一个继承机制中，仍然是指向它原本属于的对象，而不是从原型链上找到它时，它所属于的对象。

七、改变this指向的方法

1. call()

call（a, b, c）方法接收三个参数，第一个是this指向，第二个，三个是传递给函数的实参，可以是数字，字符串，数组等类型的数据类型都可以。

示例：

//定义函数
function fn(n1,n2){console.log(this);  console.log(n1,n2)
}
//调用call()方法
fn.call();//=>this:window;
let obj = {fn:fn};
fn.call(obj);//=>this:obj;n1,n2:undefined
fn.call(1,2);//=>this: 1;n1=2,n2=undefined;
fn.call(obj,1,2);//=>this: obj;n1=1,n2=2;//Call方法的几个特殊属性
//非严格模式下
fn.call(undefined);//this=>window
fn.call(null);//this=>window
//严格模式下
"use strict"
fn.call(undefined);//this=>undefined
fn.call(null);//this=>null

2. apply()

apply(a, [b])和call基本上一致，唯一区别在于传参方式，apply把需要传递给fn()的参数放到一个数组（或者类数组）中传递进去，虽然写的是一个数组，但是也相当于给fn()一个个的传递。

//call()的传参方式
fn.call(obj, 1, 2);
//apply()的传参方式
fn.apply(obj, [1, 2]);

示例：

//apply方法的使用和call方法基本相同，唯一的区别是，apply方法传参要求是数组类型的，数组内可以任意形式的数据
function fn (n1,n2){console.log(this);console.log(n1,n2)console.log(arguments)
}
let obj = {fn:fn};
//调用apply()方法
fn.applay(abj,[1,2]);
fn.applay(abj,1,2)；//报错fn.applay(abj,[11,'apply',{a:123}]);//注意第二个参数必须是数组，否则会报错

3.bind()

bind（a, b, c）：语法和call一模一样，区别在于立即执行还是等待执行，bind不兼容IE6~8
bind与call的唯一区别就是call直接改变函数test的指向，而bind是生成了一个新函数test2()，该函数改变了指向。

//call()方法：改变fn中的this，并且把fn立即执行
fn.call(obj, 1, 2);
//bind()方法：改变fn中的this，fn并不执行
fn.bind(obj, 1, 2);

示例：

//bind和call方法调用形式类似，但是原理完全不同
fn.call(obj,10,20);//=>fn先执行，将fn内的this指向obj，并且把参数10,20传递给fnfn.bind(obj,10,20)//bind是先将fn中的this指向obj，并且将参数10,20预先传递给fn，但是此时的fn并没有被执行，只有fn执行时this指向和传递参数才有作用
fn.bind(obj,10,20);//=>不会有任何输出
fn.bind(obj,10,20)();//=>调用后才会有输出//=>需求：点击box这个盒子的时候，需要执行fn，并且让fn中的this指向obj
oBox.onclick=fn; //=>点击的时候执行了fn,但此时fn中的this是oBoxoBox.onclick=fn.call(opp); //=>绑定事件的时候就已经把fn立即执行了(call本身就是立即执行函数),然后把fn执行的返回值绑定给事件oBox.onclick=fn.bind(opp);
//=>fn.bind(opp)：fn调取Function.prototype上的bind方法，执行这个/* * function(){*     fn.call(opp);* }*/
oBox.onclick=function(){//=>this:oBoxfn.call(opp);
}

相同点：

call、apply和bind都是JS函数的公有的内部方法，他们都是重置函数的this，改变函数的执行环节。
不同点：

bind是创建一个新的函数，而call和aplay是用来调用函数；
call和apply作用一样，只不过call为函数提供的参数是一个个地罗列出来，而apply为函数提供的参数是一个数组

文章七：JS this指向总结

JS this指向总结_cnccl-web-js的博客-CSDN博客_this指向

使用 JavaScript 开发的时候，很多开发者多多少少会被 this 的指向搞蒙圈，但是实际上，关于 this 的指向，记住最核心的一句话：哪个对象调用函数，函数里面的this指向哪个对象。

下面分几种情况谈论下

1、普通函数调用

这个情况没特殊意外，就是指向全局对象-window。

let username='cn'
function fn(){alert(this.username);//undefined
}
fn();

可能大家会困惑，为什么不是输出守候，但是在细看一看，我声明的方式是let，不会是window对象
如果输出守候，要这样写

var username='cn'
function fn(){alert(this.username);//cn
}
fu();
//---------------
window.username='cn'
function fn(){alert(this.username);//cn
}
fn();
//可以理解为
//window.fn();

2、对象函数调用

这个相信不难理解，就是那个函数调用，this指向哪里

window.b=2222
let obj={a:111,fn:function(){alert(this.a);//111alert(this.b);//undefined}
}
obj.fn();

很明显，第一次就是输出obj.a，就是111。而第二次，obj没有b这个属性，所以输出undefined，因为this指向obj。

但是下面这个情况得注意

let obj1={a:222
};
let obj2={a:111,fn:function(){alert(this.a);}
}
obj1.fn=obj2.fn;
obj1.fn();//222

这个相信也不难理解，虽然obj1.fn是从obj2.fn赋值而来，但是调用函数的是obj1，所以this指向obj1。

3、构造函数调用

let TestClass=function(){this.name='111';
}
let subClass=new TestClass();
subClass.name='cn';
console.log(subClass.name);//cn
let subClass1=new TestClass();
console.log(subClass1.name)//111

这个也是不难理解，回忆下（new的四个步骤）就差不多了！

但是有一个坑，虽然一般不会出现，但是有必要提一下。

在构造函数里面返回一个对象，会直接返回这个对象，而不是执行构造函数后创建的对象

apply和call调用

apply和call简单来说就是会改变传入函数的this。

let obj1={a:222
};
let obj2={a:111,fn:function(){alert(this.a);}
}
obj2.fn.call(obj1);复制代码

此时虽然是 obj2 调用方法，但是使用了call，动态的把 this 指向到 obj1。相当于这个 obj2.fn 这个执行环境是 obj1 。apply 和 call 详细内容在下面提及。

5、箭头函数调用

首先不得不说，ES6 提供了箭头函数，增加了我们的开发效率，但是在箭头函数里面，没有 this ，箭头函数里面的 this 是继承外面的环境。

一个例子

let obj={a:222,fn:function(){    setTimeout(function(){console.log(this.a)})}
};
obj.fn();//undefined

不难发现，虽然 fn() 里面的 this 是指向 obj ，但是，传给 setTimeout 的是普通函数， this 指向是 window ， window 下面没有 a ，所以这里输出 undefined。

换成箭头函数

let obj={a:222,fn:function(){    setTimeout(()=>{console.log(this.a)});}
};
obj.fn();//222

这次输出 222 是因为，传给 setTimeout 的是箭头函数，然后箭头函数里面没有 this ，所以要向上层作用域查找，在这个例子上， setTimeout 的上层作用域是 fn。而 fn 里面的 this 指向 obj ，所以 setTimeout 里面的箭头函数的 this ，指向 obj 。所以输出 222 。

call和apply

call 和 apply 的作用，完全一样，唯一的区别就是在参数上面。
call 接收的参数不固定，第一个参数是函数体内 this 的指向，第二个参数以下是依次传入的参数。
apply接收两个参数，第一个参数也是函数体内 this 的指向。第二个参数是一个集合对象（数组或者类数组）

let fn=function(a,b,c){
console.log(a,b,c);
}
let arr=[1,2,3];

如上面这个例子

let obj1={a:222
};
let obj2={a:111,fn:function(){alert(this.a);}
}
obj2.fn.call(obj1);

call 和 apply 两个主要用途就是

1.改变 this 的指向（把 this 从 obj2 指向到 obj1 ）

2.方法借用（ obj1 没有 fn ，只是借用 obj2 方法）