JavaScript中的 this指向问题

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

---

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

vue中的this指向问题_JingG459的博客-优快云博客_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 实例

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

---

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

js中匿名函数和箭头函数的this指向_Dailoge的博客-优快云博客_匿名函数的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的博客-优快云博客_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); 10
    console.log(obj.sayHello()); // 20

 

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

1.通过that

var name = "小明";
var Data = {
    name: "xiaoming",
    init: function() {
        var that=this; //定义一个that
        setTimeout(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 中的函数（箭头函数、匿名方法、自执行方法、递归 、闭包）_烟花下的孤独的博客-优快云博客

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

箭头函数改写 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函数（箭头函数、立即执行函数）_一生注定学霸命的博客-优快云博客_箭头函数立即执行

箭头函数

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

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

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

立即执行函数

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

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

2.解决办法

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

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

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

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

• 用let和{}

 

---

文章六：JS中的this指向

JS中的this指向_XXXxxx光的博客-优快云博客_js this指向

this的概念：

1. 在js中，this的意思为“这个;当前”，是一个指针型变量，它动态指向当前函数的运行环境。

2. 在不同的场景中调用同一个函数，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。

总结：

1. 函数的定义位置不影响其this指向，this指向只和调用函数的对象有关。

2. 多层嵌套的对象，内部方法的this指向离被调用函数最近的对象。

四、箭头函数中的this

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

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

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

例子1：

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

例子2：

1. 由于show函数是箭头函数，所以自身不能绑定this，因此找它的上一级作用域。如果父级作用域还是箭头函数，就再往上找，一层一层的直到直到this的指向。
2. window.show()返回值是window，所以this此时指向window；
3. 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传递给fn
  
  fn.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是oBox
  
  oBox.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:oBox
      fn.call(opp);
  }
  

  相同点：

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

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

---

 文章七：JS this指向总结

JS this指向总结_cnccl-web-js的博客-优快云博客_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);//111
        alert(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 方法）