zoukankan      html  css  js  c++  java
  • 石川es6课程---4、箭头函数

    石川es6课程---4、箭头函数

    一、总结

    一句话总结:

    相当于函数的简写,类似python lambda 函数,先了解即可
    let show1 = function () {
        console.log('abc')
    }
    
    let show2 = () => {
        console.log('abc')
    }
    
    show1() // 调用函数
    show2()

    1、箭头函数格式?

    () => {} :// 箭头函数,去掉 function, 加上 =>

    2、箭头函数注意点?

    如果只有一个参数,()可以省;如果只有一个return,{}可以省
    let show4 = function (a) {
        return a*2
    }
    
    let show5 = a => a * 2  //简洁,类似python lambda 函数

    二、箭头函数

    • 箭头函数,就是函数的简写
      • 如果只有一个参数,()可以省
      • 如果只有一个return{}可以省
    // 普通函数
    function name() {
    
    }
    // 箭头函数,去掉 function, 加上 =>
    () => {
    
    }
     
    let show1 = function () {
        console.log('abc')
    }
    
    let show2 = () => {
        console.log('abc')
    }
    
    show1() // 调用函数
    show2()
    
    let show4 = function (a) {
        return a*2
    }
    
    let show5 = a => a * 2  //简洁,类似python lambda 函数
    
    console.log(show4(10))
    console.log(show5(10))

    普通函数

    function(){
        //函数体
    }
    

    箭头函数

    () => {
        //函数体
    }
    

    1. 如果只有一个参数,()可以省略
    2. 如果只有一个return语句,{}可以省略
    let show=()=>{
        alert("abc")
    }
    // show();
    let show1= a => {
        alert(a)
    }
    show1(777)
    let arr=[12,5,8,99,14,26]
    arr.sort((a,b) => {
        return a-b
    })
    ## 4.函数-箭头函数

    - 箭头函数,就是函数的简写
    - 如果只有一个参数,`()` 可以省
    - 如果只有一个`return``{}`可以省

    ```js
    // 普通函数
    function name() {

    }
    // 箭头函数,去掉 function, 加上 =>
    () => {

    }
    ```

    ```js
    let show1 = function () {
    console.log('abc')
    }

    let show2 = () => {
    console.log('abc')
    }

    show1() // 调用函数
    show2()

    let show4 = function (a) {
    return a*2
    }

    let show5 = a => a * 2 //简洁,类似python lambda 函数

    console.log(show4(10))
    console.log(show5(10))
    ```

    三、ES6箭头函数总结

    转自或参考:ES6箭头函数总结
    https://www.cnblogs.com/mengff/p/9656486.html

    1. 箭头函数基本形式

    let func = (num) => num;
    let func = () => num;
    let sum = (num1,num2) => num1 + num2;
    [1,2,3].map(x => x * x);

    2. 箭头函数基本特点

    (1). 箭头函数this为父作用域的this,不是调用时的this

    箭头函数的this永远指向其父作用域,任何方法都改变不了,包括call,apply,bind。
    普通函数的this指向调用它的那个对象。

    let person = {
        name:'jike',
        init:function(){
            //为body添加一个点击事件,看看这个点击后的this属性有什么不同
            document.body.onclick = ()=>{
                alert(this.name);//?? this在浏览器默认是调用时的对象,可变的?                  
            }
        }
    }
    person.init();

    上例中,init是function,以person.init调用,其内部this就是person本身,而onclick回调是箭头函数,
    其内部的this,就是父作用域的this,就是person,能得到name。

    let person = {
        name:'jike',
        init:()=>{
            //为body添加一个点击事件,看看这个点击后的this属性有什么不同
            document.body.onclick = ()=>{
                alert(this.name);//?? this在浏览器默认是调用时的对象,可变的?                  
            }
        }
    }
    person.init();

    上例中,init为箭头函数,其内部的this为全局window,onclick的this也就是init函数的this,也是window,
    得到的this.name就为undefined。

    (2). 箭头函数不能作为构造函数,不能使用new

    //构造函数如下:
    function Person(p){
        this.name = p.name;
    }
    //如果用箭头函数作为构造函数,则如下
    var Person = (p) => {
        this.name = p.name;
    }

    由于this必须是对象实例,而箭头函数是没有实例的,此处的this指向别处,不能产生person实例,自相矛盾。

    (3). 箭头函数没有arguments,caller,callee

    箭头函数本身没有arguments,如果箭头函数在一个function内部,它会将外部函数的arguments拿过来使用。
    箭头函数中要想接收不定参数,应该使用rest参数...解决。

    let B = (b)=>{
      console.log(arguments);
    }
    B(2,92,32,32);   // Uncaught ReferenceError: arguments is not defined
    
    let C = (...c) => {
      console.log(c);
    }
    C(3,82,32,11323);  // [3, 82, 32, 11323]

    (4). 箭头函数通过call和apply调用,不会改变this指向,只会传入参数

    let obj2 = {
        a: 10,
        b: function(n) {
            let f = (n) => n + this.a;
            return f(n);
        },
        c: function(n) {
            let f = (n) => n + this.a;
            let m = {
                a: 20
            };
            return f.call(m,n);
        }
    };
    console.log(obj2.b(1));  // 11
    console.log(obj2.c(1)); // 11

    (5). 箭头函数没有原型属性

    var a = ()=>{
      return 1;
    }
    
    function b(){
      return 2;
    }
    
    console.log(a.prototype);  // undefined
    console.log(b.prototype);   // {constructor: ƒ}

    (6). 箭头函数不能作为Generator函数,不能使用yield关键字

    (7). 箭头函数返回对象时,要加一个小括号

    var func = () => ({ foo: 1 }); //正确
    var func = () => { foo: 1 };   //错误

    (8). 箭头函数在ES6 class中声明的方法为实例方法,不是原型方法

    //deom1
    class Super{
        sayName(){
            //do some thing here
        }
    }
    //通过Super.prototype可以访问到sayName方法,这种形式定义的方法,都是定义在prototype上
    var a = new Super()
    var b = new Super()
    a.sayName === b.sayName //true
    //所有实例化之后的对象共享prototypy上的sayName方法
    
    
    //demo2
    class Super{
        sayName =()=>{
            //do some thing here
        }
    }
    //通过Super.prototype访问不到sayName方法,该方法没有定义在prototype上
    var a = new Super()
    var b = new Super()
    a.sayName === b.sayName //false
    //实例化之后的对象各自拥有自己的sayName方法,比demo1需要更多的内存空间

    因此,在class中尽量少用箭头函数声明方法。

    (9). 多重箭头函数就是一个高阶函数,相当于内嵌函数

    const add = x => y => y + x;
    //相当于
    function add(x){
      return function(y){
        return y + x;
      };
    }

    (10). 箭头函数常见错误

    let a = {
      foo: 1,
      bar: () => console.log(this.foo)
    }
    
    a.bar()  //undefined

    bar函数中的this指向父作用域,而a对象没有作用域,因此this不是a,打印结果为undefined

    function A() {
      this.foo = 1
    }
    
    A.prototype.bar = () => console.log(this.foo)
    
    let a = new A()
    a.bar()  //undefined

    原型上使用箭头函数,this指向是其父作用域,并不是对象a,因此得不到预期结果

    参考: https://www.cnblogs.com/bfc0517/p/6706498.html
          https://www.cnblogs.com/biubiuxixiya/p/8610594.html

     
  • 相关阅读:
    SCILAB简介[z]
    UG OPEN API编程基础 2约定及编程初步
    Office 2003与Office 2010不能共存的解决方案
    UG OPEN API 编程基础 3用户界面接口
    NewtonRaphson method
    UG OPEN API编程基础 13MenuScript应用
    UG OPEN API编程基础 14API、UIStyler及MenuScript联合开发
    UG OPEN API编程基础 4部件文件的相关操作
    UG OPEN API编程基础 1概述
    16 UG Open的MFC应用
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/11600469.html
Copyright © 2011-2022 走看看