fengchuanyu 2 dni temu
rodzic
commit
ce387fc343

+ 22 - 0
8_ES6/18_this指向.html

@@ -54,7 +54,29 @@
         // obj.sayName();
 
 
+        // this 指向是可以被修改的 通过call、 apply、 bind 方法可以修改this指向
+        var userName = "李四"
+        var obj = {
+            userName:"张三",
+            age:18,
+            sex:"男"
+        }
+        function sayName(word){
+            console.log(this.userName+"说"+word);
+        }
+        // call 方法可以修改this指向为obj对象  要执行的函数.call(修改后的this对象,参数1,参数2...)
+        // sayName.call(obj);
+        // sayName("你好");
+        // 如果函数需要接收参数 call方法中从第二个参数开始传递参数
+        // sayName.call(obj,"你好");
+
+        // apply 方法可以修改this指向为obj对象  要执行的函数.apply(修改后的this对象,参数数组)
+        // sayName.apply(obj,["你好"]);
 
+        // bind 方法可以修改this指向为obj对象  要执行的函数.bind(修改后的this对象,参数1,参数2...) 
+        // bind 方法返回一个新的函数 并不是立即执行函数
+        let bar = sayName.bind(obj,"你好");
+        bar();
     </script>
 </body>
 </html>

+ 32 - 0
8_ES6/19_原型.html

@@ -0,0 +1,32 @@
+<!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>
+        let arr = [1,2,3,4,5];
+        // new Array() 创建的数组的构造函数
+        // 那么这里 arr 就是通过Array构造函数实例化出来的变量
+        // let arr2 = new Array();
+        // arr.push(6);
+        // console.log(arr);
+        // 数组的原型是Array.prototype
+        // 实例化对象获取原型的方法  __proto__
+        // console.log(arr.__proto__);
+        // 构造函数获取原型的方法  prototype
+        // console.log(Array.prototype);
+
+        // 数组的原型是Array.prototype
+        //(arr.__proto__ === Array.prototype);
+
+        // Array.prototype.sifu = function(){
+        //     console.log("四福科技");
+        // }
+
+        // arr.sifu();
+    </script>
+</body>
+</html>

+ 54 - 0
8_ES6/20_判断数据类型.html

@@ -0,0 +1,54 @@
+<!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>
+        // 判断数据类型
+        let str = "hello";
+        let num = 100;
+        let bool = true;
+        let nul = null;
+        let unde = undefined;
+        let obj = {a:1};
+        let arr = [1,2,3];
+
+        // 方法一:typeof 他不能判断 null、Array、Object
+        // console.log(typeof str);
+        // console.log(typeof num);
+        // console.log(typeof bool);
+        // console.log(typeof nul);
+        // console.log(typeof unde);
+        // console.log(typeof obj);
+        // console.log(typeof arr);
+
+        // 方法二:instanceof 
+        // console.log(str instanceof String);
+        // console.log(num instanceof Number);
+        // console.log(bool instanceof Boolean);
+        // // 注意:null、undefined 不能用 instanceof 判断
+        // // console.log(nul instanceof null);
+        // // console.log(unde instanceof undefined);
+        // console.log(obj instanceof Object);
+        // console.log(arr instanceof Array);
+
+        // 方法三:Object.prototype.toString.call() 可以判断任何类型
+        // console.log(obj.toString());
+        // console.log(Object.prototype.toString.call(str));
+        // console.log(Object.prototype.toString.call(num));
+        // console.log(Object.prototype.toString.call(bool));
+        // console.log(Object.prototype.toString.call(nul));
+        // console.log(Object.prototype.toString.call(unde));
+        // console.log(Object.prototype.toString.call(obj));
+        // console.log(Object.prototype.toString.call(arr));
+
+        // 方法四:Array.isArray() 只能判断 Array 类型
+        // console.log(Array.isArray(arr));
+        // console.log(Array.isArray(obj));
+     </script>
+</body>
+</html>

+ 72 - 0
8_ES6/习题讲解_this指向.html

@@ -0,0 +1,72 @@
+<!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>
+        //1、写出下列输出结果
+        // 全局变量才会放到window对象中
+        // var x = 10;
+        // function test() {
+        //     var x = 20
+        //     console.log(this.x)
+        // }
+        // test()
+
+        //2、写出下列输出结果
+        // var name = "window"
+        // var obj = {
+        //     name: "obj",
+        //     func1: function () {
+        //         console.log(this.name);//obj
+        //         (function () {
+        //             console.log(this.name);//window
+        //         })()
+        //     }
+        // }
+        // obj.func1()
+
+        //3、写出下列结果
+        // var name = "the window";
+
+        // var object = {
+        //     name: "My Object",
+        //     getName: function () {
+        //         return this.name;
+        //     }
+        // }
+
+        // console.log(object.getName());//My Object
+        // console.log((object.getName)());//My Object
+        // console.log((object.getName = object.getName)());//the Window
+
+        // let a = 10;
+        // if(a=3){
+        //     console.log(a);
+        // }
+
+        //4、下列代码中当div的点击事件触发时输出的结果是?
+        // document.getElementById("div").onclick = function () {
+        //     console.log(this);//div
+        // };
+
+        //5、请写出下列代码运行结果
+        var name = "window"
+        var obj = {
+            name: "obj"
+        }
+        setInterval(function () {
+            console.log(this.name)
+        }, 300)
+        setInterval(function () {
+            console.log(this.name)
+        }.call(obj), 300)
+    </script>
+</body>
+
+</html>