美文网首页
ES5 ES6函数

ES5 ES6函数

作者: SunshineBrother | 来源:发表于2018-11-01 19:45 被阅读7次

    ES5

    定义函数3种形式:

    • 1、function语句形式定义函数
    • 2、function直接量定义函数
    • 3、Function构造函数形式定义函数
    //语句形式定义函数              
    function test1(){ 
        
            alert("hello function1");
        }
    //直接量形式定义函数
    var test2=function(){
        
            alert("hello function2");
        }
    //直接量形式定义函数
    var test3=new Function("a","b","return a+b");
    //调用函数
    test1();//输出hello function1
    test2();//输出hello function2
    alert(test3(1,2));//输出3
    

    ES6

    简单函数

    ///function定义函数
    function aaa(a,b){
        return a+b;
    }
    
    ///箭头函数定义函数
    var aaa=(a,b)=>{return a+b;}
    

    this指向

    function传统定义的函数,this指向随着调用环境的改变而改变,而箭头 函数中的指向则是固定不变,一直指向定义环境的

    ///function定义函数中的this指向
    function aaa(){
        console.log(this)
    }
    var obj={
        aaa:aaa
    };
    aaa();//此时输出window对象
    obj.aaa();//此时输出obj对象
    
    
    ///箭头函数中的this指向
    var aaa=()=>{
        console.log(this)
    };
    var obj={
        aaa:aaa
    }
    aaa();//此时指向window
    obj.aaa();//此时指向window
     
    

    构造函数

    箭头函数固然好用,但是不能用于构造函数,即不能被new一下

    ///使用function方法定义构造函数
    function per(){
        this.name='aaa';
        this.sex='man'
    };
    var ming=new per();
    console.log(ming); /// {name: "aaa", sex: "man"}
    
    
    ///使用箭头函数定义构造函数
    var per=>{
        this.name='bbb';
        this.sex='women';
    };
    var gang=new per();
    ///运行便会报错:Uncaught TypeError: per is not a constructor
     
    

    相关文章

      网友评论

          本文标题:ES5 ES6函数

          本文链接:https://www.haomeiwen.com/subject/cjlxxqtx.html