zoukankan      html  css  js  c++  java
  • ES6箭头函数总结

    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。

     此例子中两个this均指向obj

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

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

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

  • 相关阅读:
    你不是在拯救世界就是在拯救世界的路上
    你可以去当程序员了
    郭美美是个好姑娘
    据说有个老太太
    生命的尽头
    有关程序的50个至理名言
    程序员是这样的
    新买移动硬盘
    如果有天你看到我疯了,其实就是你疯了
    写字楼里写字间
  • 原文地址:https://www.cnblogs.com/xiaozhang666/p/11535498.html
Copyright © 2011-2022 走看看