首页 > 代码库 > ES6中的箭头函数

ES6中的箭头函数

2024-11-03 04:33:39   209人阅读

关于函数表达式中的this:
自动引用正在调用当前方法的.前的对象
1、obj.fun()中的this
　　fun中的this -> obj
2、new Fun()
　　Fun中的this -> 正在创建的新对象
3、fun()和匿名函数自调
　　this -> window
4、类型.prototype.fun() fun中的this -> 将来调用fun的.前的子对象，子对象一定是当前类型
5、如果this不是想要的对象
　　fun.call(替换this的对象)，相当于对象.fun()
ex:键盘事件

 1 //var self=this;//②将this用变量self替换
 2 //...
 3 document.onkeydown=function(e){
 4     switch(e.keyCode){
 5     case 37:this.moveRow(1); break;
 6     case 38:this.moveCow(1); break;
 7     case 39:this.moveRow(-1); break;
 8     case 40:this.moveCow(-1); break;
 9     }
10 }.bind(this)//①
11 //...

ECMAScript6中的箭头函数:(Chrome 56版本以上支持)
语法：标识符 => 表达式
ex1:var result = values.sort(function(a, b){return a - b;});
　　function(a,b){return a - b;} -> (a, b) => a - b);

ex2:var sum = function(num1, num2){return num1 + num2;};
　　var sum = (num1, num2) => num1 + num2;

举例说明：

 1 var obj = {
 2   birth:1990,
 3   getAge:function(){
 4     var fun = function(){
 5       return new Date().getFullYear() - this.birth;
 6     };
 7     return fun();
 8   }
 9 };
10 obj.getAge();//NaN

毫无疑问，上述代码输出结果为NaN，可通过绑定this，结果输出27；

1 getAge:function(){
2     var fun = function(){
3       return new Date().getFullYear() - this.birth;
4     }.bind(this);
5     return fun();
6   }

同样的，可以将上下文this缓存到一个变量中，以便在本函数作用域内包含另一个函数作用域的情况下可以继续使用此上下文对象this；

 1 var obj = {
 2   birth:1990,
 3   getAge:function(){
 4     var self = this;
 5     var fun = function(){
 6       return new Date().getFullYear() - self.birth;
 7     };
 8     return fun();
 9   }
10 };
11 obj.getAge();//27

更为简洁的方法，使用箭头函数代替；

1 var obj = {
2   birth:1990,
3   getAge:function(){
4     var fun = () => new Date().getFullYear() - this.birth;
5     return fun();
6   }
7 };
8 obj.getAge();//27

//箭头函数没有它自己的this值，箭头函数内的this值继承自外围作用域；
//可以修复this的指向，始终指向词法作用域（静态作用域）：在书写代码或者说定义时确定的；

箭头函数的绑定：

1 var obj = {
2   birth:1990,
3   getAge:function (year) {
4     var fun = (y) => y - this.birth;
5     return fun.call({birth:1992}, year);//call函数的第一个参数都是要传给当前对象的对象及函数内部的this；
6   }
7 };
8 obj.getAge(2017);//27

补充：

箭头函数的确与传统函数有不同之处，但仍存在共同的特点；
1、对箭头函数进行typeof操作会返回“function”；
2、箭头函数仍是Function的实例，故而instanceof的执行方式与传统函数一致；
3、call/apply/bind方法仍适用于箭头函数，但就算调用这些方法扩充当前作用域，this也依旧不会变化；
　  箭头函数与传统函数最大的不同之处在，禁用new操作；

 声明：本博客的文章除特殊说明外均为原创，转载请注明出处；

ES6中的箭头函数


联系
我们