关于普通函数和箭头函数的this指向问题详解

2022-05-08 00:02:33 阅读：152 来源： 互联网

标签：function 函数 sayHello 箭头 window 详解 var name

1. 普通函数this指向问题

this 永远指向调用包含自己（this本身）的函数对应的对象。

也就是说，包含 this 的函数只在乎是谁调用了它，跟在哪里进行的函数声明没有关系。

下面就来举个例子说明：

function test(){
    var a = 1;
    console.log(this.a);
}

test(); //undefined  其实是 window.test()

如果函数在最外层直接运行，默认绑定的对象是 window，因为 test() 是被window对象调用的，所以这里的 this.a 对应的应该是全局变量（或者叫window变量）而不是test函数里的局部变量，由于在 window 对象中没有声明变量 a，所以输出 undefined。

下面我们对代码进行改造一下：

var a = 2; //window对象下的变量

function test(){
    var a = 1;
    console.log(this.a);
}

test(); // 打印结果为 2

下面再来分析一个经典的例子：

var name = 'China';
var obj = {
    name : 'America',
    show : function() {
        console.log(this.name)
    }
}

obj.show(); // America

从上述代码可以看出，包含 this 的函数是 show（），而show（）函数通过对象obj调用的，所以 this.name 指向 obj 中的 name（America）;

我们再来对代码进行改造：

var name = 'China';
var obj = {
    name : 'America',
    show : function() {
        return function(){
            console.log(this.name);
        }
    }
}

var a = obj.show();
a(); // China

这里的 obj.show（）返回的是一个匿名函数

function(){
    console.log(this.name);
}

然后赋值给变量a，等价于：

var a = function(){
    console.log(this.name);
}

或

function a(){
    console.log(this.name);
}

所以最后执行的 a（）== window.a（）, 函数a 里面的 this.name 指向 window.name('China')，所以最终输出 China。

看到这里，相信大家对 this 已经有个比较清楚的认识了，下面给大家介绍4种 this 常用的场景。

1. 在一般函数方法中使用 this 指代全局对象

function test(){
　　this.x = 1;
　　alert(this.x);
}
test(); // 1

2. 作为对象方法调用，this 指代上级对象

function test(){
　　alert(this.x);
}

var obj = {};

obj.x = 1;
obj.m = test;
obj.m(); // 1

3. 作为构造函数调用，this 指向 new 出的对象

function test(){
    this.name = 'China';
}

var t = new test();
console.log(t.name); //'China'

4. apply, call 调用

function Animal(){
    this.name = 'animal';
}

function Cat(){
    Animal.call(this);
}

var cat = new Cat();
console.log(cat.name);// 'animal'

以上便是普通函数中 this 全部的解答。

2. 箭头函数的this指向问题

先来个总结：

箭头函数体内的this对象，就是定义该函数时所在的作用域指向的对象，而不是使用时所在的作用域指向的对象。

下面是普通函数的列子：

var name = 'window'; // 其实是window.name = 'window'

var A = {
   name: 'A',
   sayHello: function(){
      console.log(this.name)
   }
}

A.sayHello();// 输出A

var B = {
  name: 'B'
}

A.sayHello.call(B);//输出B

A.sayHello.call();//不传参数指向全局window对象，输出window.name也就是window

从上面可以看到，sayHello这个方法是定义在A对象中的，当当我们使用call方法，把其指向B对象，最后输出了B；可以得出，sayHello的this只跟使用时的对象有关。

改造一下：

var name = 'window'; 

var A = {
   name: 'A',
   sayHello: () => {
      console.log(this.name)
   }
}

A.sayHello();// 还是以为输出A ? 错啦，其实输出的是window

我相信在这里，大部分同学都会出错，以为sayHello是绑定在A上的，但其实它绑定在window上的，那到底是为什么呢？

一开始，我重点标注了“该函数所在的作用域指向的对象”，作用域是指函数内部，这里的箭头函数，也就是sayHello，所在的作用域其实是最外层的js环境，因为没有其他函数包裹；然后最外层的js环境指向的对象是winodw对象，所以这里的this指向的是window对象。

那如何改造成永远绑定A呢：

var name = 'window'; 

var A = {
   name: 'A',
   sayHello: function(){
      var s = () => console.log(this.name)
      return s//返回箭头函数s
   }
}

var sayHello = A.sayHello();
sayHello();// 输出A 

var B = {
   name: 'B';
}

sayHello.call(B); //还是A
sayHello.call(); //还是A

OK，这样就做到了永远指向A对象了，我们再根据“该函数所在的作用域指向的对象”来分析一下：

该函数所在的作用域：箭头函数s 所在的作用域是sayHello,因为sayHello是一个函数。
作用域指向的对象：A.sayHello指向的对象是A。

所以箭头函数s 中this就是指向A啦～～

----------------finish-------------

最后是使用箭头函数其他几点需要注意的地方

不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

标签：function,函数,sayHello,箭头,window,详解,var,name
来源： https://www.cnblogs.com/suihung/p/16244584.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

关于普通函数和箭头函数的this指向问题详解

1. 普通函数this指向问题

2. 箭头函数的this指向问题