<! DOCTYPEhtml>
<html >
<head>
<meta charset="UTF-8">   
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>  
<meta name="viewport" content="Width =device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />       
<title>Arrow function</title>
<style type="text/css">
html {height: 100%; }body {width: 200px;height: 100%;position: relative;padding: 0;margin: 0; }</style>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
<script>
var obj = {
    data: ['beijing'.'shanghai'].init: function () {
        console.log(arguments[0].name);//xutongbao
        var test = () = > {
            console.log(this.data);//["beijing", "shanghai"]
            console.log(arguments[0].name);  //xutongbao
        }
        test();        
    }
}
obj.init({name: 'xutongbao'});
var test = () = > {
    console.log(arguments);  ReferenceError: arguments are not defined
}
test({name: 'xutongbao'}); 
</script>
</body>
</html>
Copy the code

Since this is already scoped in the arrow function, we cannot bind this when we call the arrow function with call() or apply(), i.e. the first argument passed in is ignored:

<! DOCTYPEhtml>
<html >
<head>
<meta charset="UTF-8">   
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>  
<meta name="viewport" content="Width =device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />       
<title>Arrow function</title>
<style type="text/css">
</style>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
<script>
var obj = {
    birth: 1990.getAge: function (year) {
        var b = this.birth; / / 1990
        var fn = (y) = > y - this.birth; // This. Birth is still 1990
        return fn.call({birth:2000}, year); }};var age = obj.getAge(2018); / / 28
console.log(28)

</script>
</body>
</html>
Copy the code