复习

11.复习/7.获取屏幕的宽高.html

@@ -0,0 +1,18 @@
+<!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>
+    <script>
+        const screenWidth = document.documentElement.clientWidth || document.body.clientWidth;
+        const screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
+        console.log(screenHeight);
+    </script>
+</body>
+
+</html>

11.复习/8.距离.html

@@ -0,0 +1,29 @@
+<!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: 500px;
+            background-color: #f00;
+            margin-left: 20px;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="box"></div>
+    <script>
+        const box = document.getElementById("box");
+        console.log(box.offsetLeft);
+        console.log(box.offsetTop);
+        console.log(box.offsetWidth)
+        console.log(box.offsetHeight)
+    </script>
+</body>
+
+</html>

11.复习/9.原型和原型链.html

@@ -0,0 +1,80 @@
+<!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>
+    <script>
+        // 普通函数
+        // function fn() {
+        //     console.log(this);
+        // }
+        // fn();
+        // // 箭头函数
+        // const fn1 = () => {
+
+        // }
+        // // 匿名函数
+        // let xxx = function () {
+
+        // }
+        // // 立即执行函数
+        // (function () {
+
+        // })()
+
+        // function fn1() {
+        //     console.log(this);
+        //     return 1;
+        // }
+        // console.log(fn1())
+        /**
+         * 构造函数
+         * 1.首字母大写 
+         * 2.通过new关键字调用
+         * 3.构造函数中this指向当前实例对象
+         * 4.不用return返回值
+         * 
+         * 属性写在构造函数中
+         * 方法写在原型中
+         */
+        function Fn2() {
+            this.name = '图图';
+            this.age = 3;
+            console.log(this, 'this');
+        }
+        Fn2.prototype.say = function () {
+            console.log('我叫' + this.name);
+        }
+
+        let aa = new Fn2();
+        console.log(aa);
+        aa.say();
+        /**
+         * 原型:
+         * 1.所有的构造函数都自带了一个prototype(显性)属性,该属性指向的就是当前构造函数的原型
+         * 2.所有构造函数的原型上，自带了constructor(隐性)属性，该属性指向的就是当前构造函数
+         * 3.构造函数可以通过new进行实例化 产生该构造函数的实例化对象
+         * 4.实例化对象 可以通过_proto_属性访问到该构造函数的原型对象
+         */
+
+        function Person() {};
+        var person = new Person();
+        console.log(person.__proto__ == Person.prototype);
+        console.log(Person.prototype.constructor == Person);
+        console.log(Object.getPrototypeOf(person) === Person.prototype);
+        /**
+         * 原型链:
+         * 1.访问对象的属性或方法时 现在实例化对象上查找
+         * 2.如果实例化对象上没有找到 通过_proto_属性访问到的原型对象上查找
+         * 3.如果原型对象上没有找到 则去原型对象的原型上查找 找到则返回 找不到返回undefined 
+         * 4.原型链的终点 null
+         */
+    </script>
+</body>
+
+</html>