深入理解this机制系列第三篇——箭头函数

×

目录

[1]痛点 [2]解决 [3]基本用法[4]回调函数[5]注意事项

前面的话

  this机制函数调用有关,而作用域则与函数定义有关。有没有什么是可以将this机制和作用域联系起来的呢?本文将介绍ES6新增的内容——箭头函数

痛点

  对于闭包的痛点在于,闭包的this默认绑定到window对象,但又常常需要访问嵌套函数的this,所以常常在嵌套函数中使用var that = this,然后在闭包中使用that替代this,使用作用域查找的方法来找到嵌套函数的this值

var a = 0;
function foo(){
    function test(){
        console.log(this.a);
    }
    return test;
};
var obj = {
    a : 2,
    foo:foo
}
obj.foo()();//0
var a = 0;
function foo(){
    var that = this;
    function test(){
        console.log(that.a);
    }
    return test;
};
var obj = {
    a : 2,
    foo:foo
}
obj.foo()();//2

解决

  而箭头函数的出现就可以很好的解决该问题。箭头函数根据当前的词法作用域而不是根据this机制顺序来决定this,所以,箭头函数会继承外层函数调用的this绑定,而无论this绑定到什么

var test = () => {
    console.log(this.a);
}
//形式上等价于
var test = function(){
    console.log(this.a);
}
//实质上等价于
function fn(){
    var that = this;
    var test = function(){
        console.log(that.a);
    }
}
var a = 0;
function foo(){
    var test = () => {
        console.log(this.a);
    }
    return test;
};
var obj = {
    a : 2,
    foo:foo
}
obj.foo()();//2

基本用法

  ES6允许使用“箭头”(=>)定义函数,一般称为胖箭头

var f = v => v;
console.log(f(1));//1
//等同于
var f = function(v) {
  return v;
};
console.log(f(1));//1

  如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

  如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来

var sum = (num1, num2) => {
    var restult = num1 + num2;
    return result;
}

  由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号

var getTempItem = id => ({ id: id, name: "Temp" });

回调函数

  箭头函数最常用于回调函数,如事件处理器或定时器中

function foo() {
    setTimeout(() => {
        console.log( this.a );
    },100);
}
var obj = {
    a: 2
};
foo.call( obj ); // 2
//等价于
function foo() {
    var that = this;
    setTimeout( function(){
        console.log( that.a );
    }, 100 );
}
var obj = {
    a: 2
};
foo.call( obj ); // 2

注意事项

  【1】this在箭头函数中被绑定,4种绑定规则中的无论哪种都无法改变其绑定

var a = 0;
function foo(){
    var test = () => {
        console.log(this.a);
    }
    return test;
};
var obj1 = {
    a : 1,
    foo:foo
}
var obj2 = {
    a : 2,
    foo:foo
}
obj1.foo()();//1
var bar = foo.call(obj1);
//由于上一条语句已经把this绑定到obj1上,且无法修改。所以本条语句call(obj2)无效,返回的值是obj1.a的值1
bar.call(obj2);//1

  【2】箭头函数不可以当作构造函数,也就是不可以使用new命令,否则会报错

var foo = () =>{return 1;}
foo();//1
var obj = new foo();//Uncaught TypeError: foo is not a constructor

  【3】箭头函数中不存在arguments对象

var foo = () =>{
    console.log(arguments);//Uncaught ReferenceError: arguments is not defined
    return 1;
}
foo();

最后

  虽然箭头函数可以把作用域和this机制联系起来,但是却容易混淆,使代码难以维护。应该在作用域和this机制中二选一,否则它们就真的汇成一锅粥了。或者只使用词法作用域,或者只使用this机制,必要时使用bind()。尽量避免使用that=this和箭头函数

  this机制系列介绍完了。最重要的还是第一篇this机制的绑定原则,第二篇this机制的优先级属于要点,而本篇则是拓展部分。如有不妥之处,欢迎交流

  以上

时间: 2024-10-12 13:00:45

深入理解this机制系列第三篇——箭头函数的相关文章

深入理解javascript作用域系列第三篇

前面的话 一般认为,javascript代码在执行时是由上到下一行一行执行的.但实际上这并不完全正确,主要是因为声明提升的存在.本文是深入理解javascript作用域系列第三篇--声明提升(hoisting) 变量声明提升 a = 2 ; var a; console.log( a ); 直觉上,会认为是undefined,因为var a声明在a = 2;之后,可能变量被重新赋值了,因为会被赋予默认值undefined.但是,真正的输出结果是2 console.log( a ) ; var a

深入理解javascript作用域系列第三篇——声明提升(hoisting)

× 目录 [1]变量 [2]函数 [3]优先 前面的话 一般认为,javascript代码在执行时是由上到下一行一行执行的.但实际上这并不完全正确,主要是因为声明提升的存在.本文是深入理解javascript作用域系列第三篇——声明提升(hoisting) 变量声明提升 a = 2 ; var a; console.log( a ); 直觉上,会认为是undefined,因为var a声明在a = 2;之后,可能变量被重新赋值了,因为会被赋予默认值undefined.但是,真正的输出结果是2 c

深入理解DOM事件机制系列第三篇——事件对象

× 目录 [1]获取 [2]事件类型 [3]事件目标[4]事件代理[5]事件冒泡[6]事件流[7]默认行为 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.所有浏览器都支持event对象,但支持方式不同.本文将详细介绍事件对象 获取事件对象 [1]一般地,event对象是事件程序的第一个参数 [注意]IE8-浏览器不支持 //IE8-浏览器输出undefined,其他浏览器则输出事件对象[object MouseEvent] <div i

深入理解javascript对象系列第三篇——神秘的属性描述符

× 目录 [1]类型 [2]方法 [3]详述[4]状态 前面的话 对于操作系统中的文件,我们可以驾轻就熟将其设置为只读.隐藏.系统文件或普通文件.于对象来说,属性描述符提供类似的功能,用来描述对象的值.是否可配置.是否可修改以及是否可枚举.本文就来介绍对象中神秘的属性描述符 描述符类型 对象属性描述符的类型分为两种: 数据属性和访问器属性 数据属性 数据属性(data property)包含一个数据值的位置,在这个位置可以读取和写入值.数据属性有4个特性 [1]Configurable(可配置性

深入理解javascript函数系列第三篇

前面的话 函数是javascript中特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本文是深入理解javascript函数系列第三篇--属性和方法 属性 [length属性] 函数系列第二篇中介绍过,arguments对象的length属性表示实参个数,而函数的length属性则表示形参个数 function add(x,y){ console.log(arguments.length)//3 console.log(

javascript面向对象系列第三篇——实现继承的3种形式

前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.开宗明义,继承是指在原有对象的基础上,略作修改,得到一个新的对象.javascript主要包括类式继承.原型继承和拷贝继承这三种继承方式.本文是javascript面向对象系列第三篇——实现继承的3种形式 类式继承 大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,如new和instanceof.不过在后来的ES6中新增了一些元素,比如class关键字,但这并不

EnjoyingSoft之Mule ESB基础系列第三篇:Mule message structure - Mule message结构

目录 1. 探索Mule Message结构 2. Mule Message的Payload 3. Mule Message的Property 4. Mule Message的Attachment 5. Mule的Variable 6. 使用Java操作Mule Message Mule ESB是一个使用Java语言编写的开源企业服务总线,企业服务总线英文Enterprise Service Bus,简称ESB.其相关源代码也托管在GitHub上,可以在https://github.com/mu

深入理解javascript作用域系列第四篇——块作用域

× 目录 [1]let [2]const [3]try 前面的话 尽管函数作用域是最常见的作用域单元,也是现行大多数javascript最普遍的设计方法,但其他类型的作用域单元也是存在的,并且通过使用其他类型的作用域单元甚至可以实现维护起来更加优秀.简洁的代码,比如块作用域.随着ES6的推广,块作用域也将用得越来越广泛.本文是深入理解javascript作用域系列第四篇——块作用域 let for (var i= 0; i<10; i++) { console.log(i); } 上面这段是很熟

深入理解 Linux Cgroup 系列(三):内存

原文链接:深入理解 Linux Cgroup 系列(三):内存 通过上篇文章的学习,我们学会了如何查看当前 cgroup 的信息,如何通过操作 /sys/fs/cgroup 目录来动态设置 cgroup,也学会了如何设置 CPU shares 和 CPU quota 来控制 slice 内部以及不同 slice 之间的 CPU 使用时间.本文将把重心转移到内存上,通过具体的示例来演示如何通过 cgroup 来限制内存的使用. 1. 寻找走失内存 上篇文章告诉我们,CPU controller 提