Day02-JavaScript 高阶

已于 2023-12-04 20:32:15 修改
阅读量24 收藏
点赞数
文章标签： javascript ajax 开发语言
于 2023-12-04 20:30:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Spirs/article/details/134792958
版权

一.this指向

<script>

        // this指向
        // 1.普通函数 this 非严格模式下指向 window, 严格模式下指向 undefined
        // 2.构造函数 this 指向实例化对象, 原型对象的方法中的 this 指向实例化对象
        // 3.对象方法中的 this 指向该方法所属对象
        // 4.定时器中的 this 指向 window
        // 5.立即执行函数中的 this 指向window
        // 6.事件中的 this 指向事件源

</script>

二.call方法改变this指向

<script>

        var obj = {
            num: 10
        }

        // 普通函数
        function fun(a, b) {
            console.log(this);      // window
            console.log(a + b);
            console.log(this.num + a + b);
        }

        // fun(1, 2);

        // Function.prototype.call()

        fun.call(obj, 1, 2);    // 改变了 this 指向,此时指向对象 obj; call()方法会立即调用函数执行

 </script>

三.apply方法改变this指向

<script>

        var obj = {
            num: 10
        }

        // 普通函数
        function fun(a, b) {
            console.log(this);      // window
            console.log(a + b);
            console.log(this.num + a + b);
        }

        // Function.prototype.apply();

        fun.apply(obj, [1, 2]);     // 改变了this指向,此时指向对象 obj; 立即调用函数执行

        // apply() 和 call() 的区别: call() 方法传递参数通过","隔开,而 apply() 方法传递参数通过数组的形式
        // 共同点: 都能改变 this 指向, 都能立即调用函数执行

 </script>

四.bind方法改变this指向

<script>

        var obj = {
            num: 10
        }

        // 普通函数
        function fun(a, b) {
            console.log(this);      // window
            console.log(a + b);
            console.log(this.num + a + b);
        }

        // Function.prototype.bind() 

        fun.bind(obj, 1, 2)();      // 改变了 this 指向,此时指向对象 obj; bind()方法不会立即调用函数, 需要在改变this指向之后再次调用

        // call()  apply() bind() 
        // 相同点: 都能改变 this 指向
        // 不同点: call() 和 apply() 会立即调用函数执行;
                // call() 和 bind() 传递参数通过 "," 隔开; apply() 传递参数通过数组形式
    
 </script>

五.call方法使用场景

<script>

        // 判断数据类型  typeof instanceof

        // 最精准的判断
        // Object.prototype.toString.call()

        var obj = {
            name: "zhangsan"
        }

        var arr = [];

        var date = new Date();

        console.log(Object.prototype.toString.call(10));    // [object Number]
        console.log(Object.prototype.toString.call("abc")); // [object String]
        console.log(Object.prototype.toString.call(obj));   // [object Object]
        console.log(Object.prototype.toString.call(arr));   // [object Array]
        console.log(Object.prototype.toString.call(date));  // [object Date]

 </script>

六.apply方法使用场景

<script>

        // Math.max

        console.log(Math.max(1, 2, 3, 4, 5, 6, 7, 8, 9));

        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        // 使用 apply() 方法, 求数组中的最大值
        console.log(Math.max.apply(Math, arr));
   
 </script>

七.bind方法使用场景

<body>

    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>

    <script>

        var btn = document.querySelectorAll("button");

        // 点击一次过后, 5s后才能点击第二次

        for (var i = 0; i < btn.length; i++) {
            btn[i].onclick = function () {
                var timeOut = 5;
                this.disabled = true;
                this.innerHTML = "请" + timeOut + "秒后点击";
                this.timeId = setInterval(function () {
                    if (timeOut > 1) {
                        timeOut--;
                        this.innerHTML = "请" + timeOut + "秒后点击";
                    } else {
                        this.removeAttribute("disabled");
                        this.innerHTML = "点击";
                        clearInterval(this.timeId);
                    }
                }.bind(this), 1000)
            }
        }

    </script>

</body>

</html>

八.constructor构造函数判断数据类型

<script>

        var num = 10;
        console.log(num.constructor);   // Number(){}

        console.log(num.constructor == Number);

        // var empty = null;
        // console.log(empty.constructor);

        // 判断数据类型的方法
        // 1.typeof
        // 2.instanceof
        // 3.Object.prototype.toString.call()
        // 4.constructor
   
 </script>

九.forEach

<script>

        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        // 通过 forEach() 遍历数组, 没有返回值
        // for (var i = 0; i < arr.length; i++) {
        //     console.log(arr[i]);
        // }

        arr.forEach(function (value, index, arr) {
            // console.log(value);
            // console.log(index);
            console.log(arr);
        })
   
 </script>

十.map

<script>

        var arr = [10, 11, 12, 13, 14, 15, 16, 17];

        // 通过 map() 方法遍历数组, 有返回值
        var rel = arr.map(function (value, index, arr) {
            // console.log(value);
            // console.log(index);
            // console.log(arr);

            return value + 10;
        })

        console.log(rel);
    
</script>

十一.fillter

<script>

        var arr = [10, 11, 12, 13, 14, 15, 16, 17];

        // filter() 过滤数组
        var rel = arr.filter(function (value, index, arr) {
            console.log("cont");        // 8次
            return value >= 15;
        })

        console.log(rel);
  
  </script>

十二.some

<script>

        var arr = [10, 11, 12, 13, 14, 15, 16, 17];

        // some() 查找数组中是否有符合条件的元素
        var rel = arr.some(function (value) {
            console.log("cont");
            return value < 10;
        })

        console.log(rel);
   
 </script>

十三.every

<script>

        var arr = [10, 11, 12, 13, 14, 15, 16, 17];

        // every() 判断数组中元素是否都符合条件

        var rel = arr.every(function (value) {
            console.log("cont");
            return value > 15;
        })

        console.log(rel);
    
</script>

十四.find

<script>

        var arr = [10, 11, 12, 13, 14, 15, 16, 17];

        // find() 返回满足条件的第一个值

        var rel = arr.find(function (value) {
            console.log("cont");
            return value > 15;
        })

        console.log(rel);
    
</script>

十五.reduce

<script>

        var arr = [10, 11, 12, 13, 14, 15, 16, 17];

        // array.reduce(function(total,value,index,array){},initialValue)
        // total 必需。初始值, 或者计算结束后的返回值。
        // value 必须。当前元素 
        // index 可选。当前元素的索引 
        // array可选。当前元素所属的数组对象。

        // initialValue 作为第一次调用 `callback`函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。

        // 数组求和
        var rel = arr.reduce(function (total, value) {
            // console.log(total);
            return total + value;
        }, 0)

        console.log(rel);


        // 数组去重
        var arr2 = [10, 29, 42, 2, 3, 3, 5, 6, 6, 9, 10];

        var newArr = arr2.reduce(function (total, value) {
            if (total.includes(value)) {
                return total;
            } else {
                total.push(value);
                return total;
            }
        }, []);
        console.log(newArr);
    
</script>

十六.构造函数继承

<script>

        // 构造函数继承

        // 父构造函数
        function Father(name) {
            // this 指父构造函数实例化的对象
            this.name = name;
        }

        // 子构造函数
        function Son(name, age, height) {
            // this 指子构造函数实例化的对象
            // this.name = name;
            this.age = age;
            this.height = height;

            // 子构造函数中继承父构造函数的属性
            // 这里的 this 仍然是子构造函数实例化的对象
            Father.call(this, name);
        }

        var son = new Son("小好", 18, 180);
        console.log(son);
    
</script>

十七.原型对象方法的继承

<script>

        // 父构造函数
        function Father(name) {
            // this 指父构造函数实例化的对象
            this.name = name;
        }

        Father.prototype.sayHi = function () {
            console.log("hello");
        }

        // 子构造函数
        function Son(name, age, height) {
            // this 指子构造函数实例化的对象
            // this.name = name;
            this.age = age;
            this.height = height;

            // 子构造函数中继承父构造函数的属性
            // 这里的 this 仍然是子构造函数实例化的对象
            Father.call(this, name);
        }

        // 子构造函数原型对象上的方法 = 父构造函数原型对象上的方法
        // 不行
        // Son.prototype = Father.prototype;

        Son.prototype = new Father();

        Son.prototype.constructor = Son;

        var son = new Son("小好", 18, 180);

        console.log(son);
        son.sayHi();
   
 </script>

十八.Object.create继承

<script>

        var father = {
            name: "小好"
        }

        var son = Object.create(father, {
            age: {
                // 是否可枚举
                enumerable: true,
                // 是否可修改
                writable: true,
                // 是否可配置
                configurable: true,
                // 值
                value: 18
            },
            gender: {
                // 是否可枚举
                enumerable: false,
                // 是否可修改
                writable: false,
                // 是否可配置
                configurable: false,
                // 值
                value: "男"
            }
        });
        console.log(son);
    
</script>

前端拓海
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
每日作业-JavaScript第02天
qq_62089165的博客
08-20 1354
求整数1～100的累加值，但要求跳过所有个位为3的数。
Day03-JavaScript 高阶
Spirs的博客
12-04 27
严格模式、高阶函数、闭包、闭包的使用、递归、赋值、浅拷贝、深拷贝、手写递归实现深拷贝
Day04-JavaScript 高阶
Spirs的博客
12-04 28
定时器传递参数、创建对象、创建类、类的继承1、类的继承2、通过类操作DOM元素
Day01-JavaScript 高阶
Spirs的博客
12-02 34
创建对象、属性特征、定义属性、定义多个属性、获取属性特征、构造函数、静态成员和实例成员、构造函数的原型、对象原型、constructor构造函数、原型链、hasOwnProperty、扩展数组的方法、原型对象中的this指向
FE21-JS-DAY02-Vendula-Bettina
03-04
5. **函数式编程**：高阶函数、函数作为一等公民、map、filter、reduce等函数式编程概念。 6. **异步编程**：回调函数、Promise、async/await，以及如何处理异步错误。 7. **DOM操作**：选择元素（querySelector, ...
day02-js基础代码.zip
10-01
这个压缩包“day02-js基础代码.zip”很可能是包含了一些JavaScript基础教程或者练习代码的资料，旨在帮助初学者理解并掌握JS的基本概念和语法。 1. **变量和数据类型**： JavaScript 支持多种数据类型，包括基本...
day03-js高级资料.zip
10-01
"day03-js高级资料.zip"这个压缩包很可能是提供了一系列关于JavaScript高级特性和技术的教程或参考资料。从标签"js"我们可以推断，这份资料专注于JavaScript的学习与深入探讨。 在JavaScript的世界里，"高级"通常...
Javascript-day-2
02-26
函数也是对象，可以作为参数传递和作为其他函数的返回值，这是JavaScript的高阶函数特性。 SCSS，全称Sassy CSS，是一种CSS预处理器，它扩展了CSS语法，提供了变量、嵌套规则、混合、函数等特性，使CSS编写更加模块...
day03-js高级讲义.zip
10-01
4. **高阶函数**：能够接受函数作为参数或返回函数的函数称为高阶函数。例如，`Array.prototype.map()`、`filter()`和`reduce()`等，这些都是常见的高阶函数，它们能对数组进行高效操作。 5. **异步编程**：JS是非...
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 334
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐爬虫可视化 音乐数据分析 大数据毕设 大数据毕业设计 机器学习 深度学习 人工智能
从业计算机毕业设计10年，打算用一年时间分享10年毕设经验！
07-23 328
计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐爬虫可视化 音乐数据分析 大数据毕设 大数据毕业设计 机器学习 深度学习 人工智能
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
Gusha_的博客
07-23 624
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 926
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 81
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
软件著作权申请教程（超详细）（2024新版）软著申请
最新发布
m0_75269526的博客
07-23 601
软件著作权申请教程（超详细）（2024新版），软著申请，软件著作权怎么申请，手把手教你申请软件著作权，不花冤枉钱，软著申请代理，软件著作权申请着手开始准备材料了。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。这一页的内容比较多，可以参考我下面的。
VUE中的重点*
qq_61132537的博客
07-22 751
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 68
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 952
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
day--和--day区别
04-18
"day--"和"day"是两种不同的操作符，它们在编程中有着不同的含义和用法。 1. "day--"是一个后缀自减操作符，用于将变量的值减1，并返回减1之前的值。例如，如果有一个变量day的值为5，执行day--操作后，day的值将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值