|
|
@@ -0,0 +1,74 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <title>Document</title>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <ul>
|
|
|
+ <li>内容一</li>
|
|
|
+ <li>内容二</li>
|
|
|
+ <li>内容三</li>
|
|
|
+ <li>内容四</li>
|
|
|
+ </ul>
|
|
|
+ <script>
|
|
|
+ function fn() {
|
|
|
+ console.log(this); // window
|
|
|
+ console.log(arguments);
|
|
|
+ }
|
|
|
+ fn();
|
|
|
+ /**
|
|
|
+ * ES6中提供箭头函数
|
|
|
+ * 普通函数:function fn() {} fn();
|
|
|
+ * 箭头函数:() => {语句...};
|
|
|
+ * 特点：
|
|
|
+ * 1.普通函数中的this指向window,箭头函数的this指向指的是上级作用域
|
|
|
+ * 2.箭头函数中 没有arguments 但是可以通过rest去替代
|
|
|
+ * 3.普通函数中this指向可以修改 箭头函数中this指向不能修改
|
|
|
+ * 4.箭头函数中若代码块中只有一条语句，可以省略代码块
|
|
|
+ * 5.箭头函数没有办法使用new
|
|
|
+ *
|
|
|
+ */
|
|
|
+ // let fn1 = ()=>{
|
|
|
+ // console.log('这是一个箭头函数',arguments);
|
|
|
+ // };
|
|
|
+ // fn1();
|
|
|
+
|
|
|
+ let fn2 = () => console.log("111111");
|
|
|
+ fn2();
|
|
|
+
|
|
|
+ let fn3 = (...a) => {
|
|
|
+ console.log(...a);
|
|
|
+ }
|
|
|
+ fn3(43,44,56,78,90);
|
|
|
+ // setTimeout(()=>{},1000)
|
|
|
+
|
|
|
+ var list = document.querySelectorAll("ul li");
|
|
|
+ for (var i = 0; i < list.length; i++) {
|
|
|
+ list[i].onclick = function () {
|
|
|
+ // console.log(this); // 当前对象
|
|
|
+ setInterval(function () {
|
|
|
+ console.log(this); // window
|
|
|
+ }.bind(this), 1000);
|
|
|
+ };
|
|
|
+ // list[i].onclick = () => {
|
|
|
+ // console.log(this);// window
|
|
|
+ // }
|
|
|
+ }
|
|
|
+
|
|
|
+ function Fn4(name,age) {
|
|
|
+ this.name = name;
|
|
|
+ this.age = age;
|
|
|
+ }
|
|
|
+ var person = new Fn4('LiLi',19);
|
|
|
+ console.log(person);
|
|
|
+
|
|
|
+ let Person2 = (age) => {
|
|
|
+ this.age = age;
|
|
|
+ }
|
|
|
+ var news = new Person2(10);
|
|
|
+ console.log(news);
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
e