|
|
@@ -0,0 +1,71 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ #box {
|
|
|
+ width: 300px;
|
|
|
+ height: 300px;
|
|
|
+ background: #0f0;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <!--
|
|
|
+ 箭头函数:()=>{代码块...}
|
|
|
+ 特点：
|
|
|
+ 1.普通函数中this指向window 箭头函数this指向的是上级作用域
|
|
|
+ 2.箭头函数中没有arguments
|
|
|
+ 3.普通函数中this指向可以修改 箭头函数中this指向不能修改
|
|
|
+ 4.箭头函数中代码块中只有一条语句 可以省略代码块
|
|
|
+ 5.箭头函数不可以使用new
|
|
|
+ -->
|
|
|
+ <div id="box"></div>
|
|
|
+ <button id="btn">点击</button>
|
|
|
+ <script>
|
|
|
+ var box = document.getElementById("box");
|
|
|
+ var btn = document.getElementById("btn");
|
|
|
+ // 普通函数
|
|
|
+ // function fn1() {
|
|
|
+
|
|
|
+ // }
|
|
|
+ // fn1()
|
|
|
+ // 匿名函数
|
|
|
+ // let aa = function() {
|
|
|
+
|
|
|
+ // }
|
|
|
+ // aa();
|
|
|
+ // 立即执行函数
|
|
|
+ // (function() {
|
|
|
+ // console.log("你好")
|
|
|
+ // })()
|
|
|
+ let obj = {
|
|
|
+ name:"图图"
|
|
|
+ }
|
|
|
+ function fn1() {
|
|
|
+ console.log(this.name);
|
|
|
+ console.log(arguments);
|
|
|
+ }
|
|
|
+ console.log(new fn1(),'普通')
|
|
|
+ // fn1.call(obj);
|
|
|
+ // 箭头函数
|
|
|
+ let fn2 = () => console.log(this.name,'箭头函数');
|
|
|
+ // console.log("好好好", ...rest);
|
|
|
+ ;
|
|
|
+ // fn2.call(obj);
|
|
|
+ // fn2('你好');
|
|
|
+ console.log(new fn2(),'箭头')
|
|
|
+ btn.onclick = function () {
|
|
|
+ console.log(this);
|
|
|
+ setTimeout(function () {
|
|
|
+ let fn3 = () => {
|
|
|
+ console.log("我好", this);
|
|
|
+ };
|
|
|
+ fn3();
|
|
|
+ }, 2000);
|
|
|
+ };
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
e