箭头函数：this的指向问题

关于typescript中函数的定义，有提到过它的定义方式（详见：函数的定义及特性），当时提到typescript中的'=>'不是ES6中的箭头函数的意思。什么是ES6的箭头函数？代码如下：

var fnc = v => v;

第一次看到这个，你肯定心里在想：what ' s this！！！！！！！！！！！！！解释一下，上述代码表现形式就相当于：

var fnc = function(v) {return v
}

看到这里，我们对箭头函数也就有了一个初步的印象，箭头函数简化了我们常规函数的书写方式，当然了，它的简化还有以下几种情况：

// 1.包含单个参数传递
var fnc = v => v;var fnc = function (v) {return v
};// 2.包含多个参数或者不包含参数
var f = () => 5;
// 等同于
var f = function () {return 5
};var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function (num1, num2) {return num1 + num2;
};// 3.如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错
var getTempItem = id => ({id: id,name: "Temp"
});// 4.变量解构方式
var full = ({first,last
}) => first + ' ' + last;
// 等同于
function full(person) {return person.first + ' ' + person.last;
}

箭头函数的定义我们就介绍到这里，那么我们为什么要使用箭头函数呢？难道仅仅是因为写法相对于比较简单？当然不是了，查看ES6的官方文档，我们可以知道，箭头函数具有以下特性：

函数体内的this对象，指的是定义时所在的对象，而不是使用时所在的对象；
箭头函数不可以当作构造函数，也就是说不可以使用new命令，否则会抛出错误；
不可以使用arguments对象，这个对象在函数体内是不存在的；
不可以使用yield命令，也就是说箭头函数不能用作generator函数；

其它的特性我们暂且放一边，有兴趣的小伙伴可以自己尝试下，我们主要要说的就是this的指向问题。常说箭头函数解决了this的指向问题，那么到底它解决的时什么问题？我们先看代码：

<script>function fnc() {setTimeout(function () {console.log(this.id)    // 这里打印的是1}, 1000)};var id = 1;fnc.call({id: 2});
</script>

很明显，我们看到函数fnc内部包含一个定时函数，1秒后执行，在普通函数的定义中，函数fnc内的this只得就是全局的window对象，所以这里打印的id值是1而不是2。如果我们想打印2呢？常规的解决办法如下：

<script>function fnc() {var that = this;setTimeout(function () {console.log(that.id)   // 这里打印值为2}, 1000)};var id = 1;fnc.call({id: 2});
</script>

常规的解决方式，就是定义一个值来改变this的指向，这样虽然可以达到我们的目的，但是很麻烦，而且很容易就忘记了，导致我们在使用this的时候，很难去判断此时的this指向的是谁，但是箭头函数很好的解决了这个问题：函数体内的this对象，指的是定义时所在的对象，而不是使用时所在的对象，如何理解呢？请看代码：

<script>function fnc() {setTimeout(() => {console.log(this.id);   // 这里打印值为2}, 1000);};var id = 1;fnc.call({id: 2});
</script>

这里的箭头函数中的this，指的就是我们在定义fnc的本身。我们再看一个例子来看下箭头函数跟普通函数的区别，箭头函数到底干了啥：

function Timer() {this.s1 = 0;this.s2 = 0;// 箭头函数setInterval(() => this.s1++, 1000);// 普通函数setInterval(function () {this.s2++;}, 1000);
}var timer = new Timer();setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);

看上面的代码，运行结果是：在3.1秒的延时后，分别打印s1:3和s2:0。根据结果，我们可以很明显的看到，箭头函数内的this指的是绑定定义时所在的作用域（即Timer函数），所以在3.1秒的延时内，timer函数内的s1被自加了三次，所以结果是3，而普通函数内的this是全局的window对象，并没有触及到timer内的s2，所以在3.1秒的延时内，timer函数内的s2不会有任何变化。我们再看一个例子：

function foo() {return () => {return () => {return () => {console.log('id:', this.id);};};};
}var f = foo.call({id: 1});var t1 = f.call({id: 2})()(); // id: 1
var t2 = f().call({id: 3})(); // id: 1
var t3 = f()().call({id: 4}); // id: 1

我们可以看到，三次打印全部是1，这就说明了上面代码之中，this统统指向了一个对象，就是定义的函数foo，不管你嵌套了多少内层函数，都是指向最外层的foo函数的this，因为你嵌套的内层函数是箭头函数，它们木有自己的this，所以这一点就验证了之前提到的箭头函数的特性：函数体内的this对象，指的是定义时所在的对象，而不是使用时所在的对象。

箭头函数：this的指向问题相关推荐

箭头函数的this指向谁_高阶函数
NodeJS 系列文章,本篇是第一篇,首先,预计将后续高频使用逻辑串一遍,依次是高阶函数,promise以及事件机制.本篇主要是高阶函数. call.bind.apply call.apply 都是改 ...
箭头函数的this指向谁_你好，我是 JavaScript 的 this
JavaScript 有个关键字 this, 时不时冒出来,让你猜一猜,"我到底指向谁?" 这个 this 指向 window, 那个 this 又是刚刚 new 出来的新对象,这 ...
箭头函数的this指向
这里先明确一点:箭头函数的 this 指向比较特殊,它总是指向其最近的外层函数作用域的 this 所指对象箭头函数箭头函数为以下形式的函数 const func = (paramList) =&g ...
箭头函数改变this指向
1.箭头函数 <div>我是div</div><script>const oDiv = document.querySelector('div');// 普通函数o ...
ES6语法---箭头函数/关于this指向
this指向问题: ES5:var obj = {x:1,func:function(){console.log(this.x);},test:function(){//定时器为异步setTimeou ...
ES6 箭头函数及this指向
1.箭头函数用箭头 => 定义函数 var fn = function(num){return num; }var fn1 = (num)=>num;var fn3 = ()=>1 ...
关于箭头函数中this指向问题
对于箭头函数中的this指向问题一直困扰我很久,查阅文章现在终于弄懂了. 先上一段代码: var user="Absorbed-22";let person={user:" ...
javascript箭头函数和this的指向问题
箭头函数下面两代码等价: const fun1 = function(x){return x*x;}const fun = x => x*x; function换成=>,放在参数和函数体 ...
Vue中的methods配置项中的箭头函数this指向及相关源码分析
之前在使用Vue时遇到一个问题,我们知道在Vue的methods中定义函数时,要想使用到Vue实例或者组件实例的this时,我们就不能使用箭头函数定义方法,因为箭头函数中的this是在函数定义时生成的 ...
js箭头函数/函数this指向
一.函数的this指向 this是每一个函数都一定有的关键词 this本质上是一个对象数据结构用于指向数据通过this关键词,可以调用操作这个数据 1.this指向window 声明式函 ...

箭头函数：this的指向问题

箭头函数：this的指向问题相关推荐

最新文章

热门文章