ES5 ES6函数

2018-11-01  本文已影响7人  SunshineBrother

ES5

定义函数3种形式:

//语句形式定义函数              
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
 
上一篇下一篇

猜你喜欢

热点阅读