hace 1 año · 3e3403e421
--- a/Dom/18_this指向.html
+++ b/Dom/18_this指向.html
@@ -0,0 +1,77 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+  <title>Document</title>
			
 
				+  <style>
			
 
				+    #div1 {
			
 
				+      width: 200px;
			
 
				+      height: 200px;
			
 
				+      background: pink;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <div id="div1"></div>
			
 
				+  <script>
			
 
				+    var div1 = document.getElementById('div1')
			
 
				+    //1.当前对象引用中，  谁的事件 this指向就是谁
			
 
				+    // div1.onclick = function(){
			
 
				+    //   console.log(this)
			
 
				+    // }
			
 
				+
			
 
				+    //2.在定时器当中， this指向window
			
 
				+    // var timer = setInterval(function () {
			
 
				+    //   console.log(this)
			
 
				+    // }, 2000)
			
 
				+    // div1.onclick = function () {
			
 
				+    //   var timer = setInterval(function () {
			
 
				+    //     console.log(this)
			
 
				+    //   }, 2000)
			
 
				+    // }
			
 
				+    //3.在对象下面 this指向对象本身
			
 
				+    // var person = {
			
 
				+    //   name: 'zs',
			
 
				+    //   age: 20,
			
 
				+    //   eat: function(){
			
 
				+    //     console.log(this)
			
 
				+    //   }
			
 
				+    // }
			
 
				+    // person.eat()
			
 
				+    //4.在函数内 this指向window
			
 
				+    // function xx(){
			
 
				+    //   console.log(this)
			
 
				+    // }
			
 
				+    // xx()
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+    div1.onclick = function(){
			
 
				+      console.log(this,'a')
			
 
				+      var timer = setInterval(function(){
			
 
				+        console.log(this,'b')
			
 
				+      },2000)
			
 
				+      abc()
			
 
				+      
			
 
				+    }
			
 
				+    var abc = function(){
			
 
				+      console.log(this,'c')
			
 
				+    }
			
 
				+    console.log(this,'d')
			
 
				+
			
 
				+    /* 
			
 
				+      div   a        d  window
			
 
				+      window b       a  div
			
 
				+      window c       c  window 
			
 
				+      window d       b  window
			
 
				+    
			
 
				+    */
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/Dom/19_修改this指向.html
+++ b/Dom/19_修改this指向.html
@@ -0,0 +1,48 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+  <title>Document</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+  <div id="div1"></div>
			
 
				+  <script>
			
 
				+    /* 
			
 
				+    区别;
			
 
				+    1.调用方法不一样
			
 
				+    2.call  apply直接调用修改之后的方法  bind 返回的是一个方法 需要再去调用
			
 
				+    call(修改的this，参数1，参数2)
			
 
				+    apply(修改的this，[参数1，参数2])
			
 
				+    bind(修改的this，参数1，参数2)()
			
 
				+    
			
 
				+    */
			
 
				+    // var person = {
			
 
				+    //   name:'zs',
			
 
				+    //   age: 18,
			
 
				+    //   eat: function(){
			
 
				+    //     console.log(this)
			
 
				+    //   }
			
 
				+    // }
			
 
				+    // person.eat()
			
 
				+
			
 
				+    var person2 = {
			
 
				+      name:'lisi',
			
 
				+      age: 30
			
 
				+    }
			
 
				+    // person.eat.call(person2)
			
 
				+
			
 
				+
			
 
				+    function xx(x,y){
			
 
				+      console.log(x,y,this)
			
 
				+    }
			
 
				+    xx(1,2)
			
 
				+    xx.call(person2,1,2)
			
 
				+    xx.apply(person2,[1,2])
			
 
				+    //bind不会调用函数  返回的是一个方法
			
 
				+    xx.bind(person2,1,2)()
			
 
				+
			
 
				+  </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/Dom/20_类.html
+++ b/Dom/20_类.html
@@ -0,0 +1,45 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+  <title>Document</title>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <script>
			
 
				+    /* 
			
 
				+    1.构造函数可以创建实例化对象
			
 
				+    2.属性写在 构造函数里 
			
 
				+      方法写在 原型对象下
			
 
				+    */
			
 
				+    //构造函数
			
 
				+    function person(name, age) {
			
 
				+      this.name = name
			
 
				+      this.age = age
			
 
				+      // this.eat = function () {
			
 
				+      //   console.log(this.name + '我在吃饭')
			
 
				+      // }
			
 
				+    }
			
 
				+    
			
 
				+    //原型对象
			
 
				+    person.prototype.eat = function(){
			
 
				+      console.log(this.name + '我在吃饭')
			
 
				+    }
			
 
				+    /* 
			
 
				+      所有的构造函数都有一个prototype属性
			
 
				+      这个prototype属性 指向的都是原型对象
			
 
				+    */
			
 
				+    //实例化对象
			
 
				+    var p1 = new person('zs', 18)
			
 
				+    var p2 = new person('lisi', 20)
			
 
				+    console.log(p1)
			
 
				+    console.log(p2)
			
 
				+    p1.eat()
			
 
				+    p2.eat()
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/Dom/21_下落的树叶/img/1.png
+++ b/Dom/21_下落的树叶/img/1.png
--- a/Dom/21_下落的树叶/img/2.png
+++ b/Dom/21_下落的树叶/img/2.png
--- a/Dom/21_下落的树叶/img/3.png
+++ b/Dom/21_下落的树叶/img/3.png
--- a/Dom/21_下落的树叶/img/4.png
+++ b/Dom/21_下落的树叶/img/4.png