zoukankan      html  css  js  c++  java
  • JS函数和箭头函数

    函数的声明和调用

    函数定义可以使用“function”关键字,代码函数头和函数体组成,函数头可以由函数名和参数列表组成,语法格式:函数名(参数列表){函数体}。如

    function name(arg){console.log(arg)}
    

    调用

    name(arg)
    

    当函数没有函数名的时候称匿名函数

    function(arg){console.log(arg)}
    

    通常需要赋值给一个变量,不然报错

    var name=function(arg) {
        console.log(arg)
    }
    

    调用

    name(arg)
    

    定义在对象里

    var obj={
        fn:function name() {
        console.log(name.name+"  "+name.length)
    }
    }
    

    可以这样调用

    obj.fn()
    

    还用一种就是定义完就马上被调用

    (function name() {
        console.log(name.name+"  "+name.length)
    })();
    

    这里只列了常用的函数声明及调用方式

    箭头函数

    ES6标准新增了一种新的函数:Arrow Function(箭头函数)。

    为什么叫Arrow Function?因为它的定义用的就是一个箭头:

    x => x * x
    

    上面的箭头函数相当于:

    function (x) {
        return x * x;
    }
    

    箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一种像上面的,只包含一个表达式,连{ ... }和return都省略掉了。还有一种可以包含多条语句,这时候就不能省略{ ... }和return:

    x => {
        if (x > 0) {
            return x * x;
        }
        else {
            return - x * x;
        }
    }
    如果参数不是一个,就需要用括号()括起来:
    
    // 两个参数:
    (x, y) => x * x + y * y
    
    // 无参数:
    () => 3.14
    
    // 可变参数:
    (x, y, ...rest) => {
        var i, sum = x + y;
        for (i=0; i<rest.length; i++) {
            sum += rest[i];
        }
        return sum;
    }
    

    如果要返回一个对象,就要注意,如果是单表达式,这么写的话会报错:

    // SyntaxError:
    x => { foo: x }
    因为和函数体的{ ... }有语法冲突,所以要改为:
    
    // ok:
    x => ({ foo: x })
    this
    

    箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。

    回顾前面的例子,由于JavaScript函数对this绑定的错误处理,下面的例子无法得到预期结果:

    var obj = {
        birth: 1990,
        getAge: function () {
            var b = this.birth; // 1990
            var fn = function () {
                return new Date().getFullYear() - this.birth; // this指向window或undefined
            };
            return fn();
        }
    };
    

    现在,箭头函数完全修复了this的指向,this总是指向词法作用域,也就是外层调用者obj:

    var obj = {
        birth: 1990,
        getAge: function () {
            var b = this.birth; // 1990
            var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
            return fn();
        }
    };
    obj.getAge(); // 25
    

    如果使用箭头函数,以前的那种hack写法:

    var that = this;
    
    

    就不再需要了。

    由于this在箭头函数中已经按照词法作用域绑定了,所以,用call()或者apply()调用箭头函数时,无法对this进行绑定,即传入的第一个参数被忽略:

    var obj = {
        birth: 1990,
        getAge: function (year) {
            var b = this.birth; // 1990
            var fn = (y) => y - this.birth; // this.birth仍是1990
            return fn.call({birth:2000}, year);
        }
    };
    obj.getAge(2015); // 25
    
  • 相关阅读:
    AX ERROR: Could not find my mock parent, most likely I am stale 不及格的程序员
    利用Segue在视图控制器间传值的问题 不及格的程序员
    Creating a Singleton Instance 不及格的程序员
    iPad 通知 UIKeyboardWillShowNotification 不会在keyBoard处在Undock状态下接到通知 不及格的程序员
    Why RootViewController's view is rotated Automatically by System when the app first loaded? 不及格的程序员
    如何弹出UIDatePicker最好 不及格的程序员
    jQuery开始做恶了 不及格的程序员
    what is the SEL,id and IMP,Class ,Method? 不及格的程序员
    Objectivec 字符串比较的陷井 不及格的程序员
    Unable to create any keyboard shortcuts after the iOS 6.1.3 update on iPad. 不及格的程序员
  • 原文地址:https://www.cnblogs.com/panbingwen/p/11631228.html
Copyright © 2011-2022 走看看