js高阶 -- 总结 02（小白）

于 2024-08-20 09:00:00 发布
阅读量193 收藏
点赞数 8
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78949452/article/details/141157720
版权

this指向

普通函数 this 指向 window

构造函数 this 指向 实例化对象

事件中 this 指向 事件源

定时器中 this 指向 window

立即执行函数 this 指向 window

对象方法中的 this 指向 对象本身

原型对象中的 this 指向 实例化对象

call方法改变this指向

<!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>

        var num = 10;
        function fun(a, b) {
            console.log(this);

            // 普通函数 this 指向 window 
            console.log(this.num + a + b);
        }

        var obj = {
            num: 20
        }

        fun(1, 2);

        // Function.prototype.call()
        // call() 改变this 指向，参数以 逗号 分割，会立即调用函数执行
        fun.call(obj, 1, 2);
    </script>
</body>

</html>

apply方法改变this指向

<!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>
        var num = 10;
        function fun(a, b) {
            console.log(this);

            // 普通函数 this 指向 window 
            console.log(this.num + a + b);
        }

        var obj = {
            num: 20
        }

        fun(1, 2);

        // Function.prototype.apply();
        // apply() 改变this 指向，参数以数组形式传递，立即调用函数执行
        fun.apply(obj, [1, 2]);
    </script>
</body>

</html>

bind方法改变this指向

<!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>
        var num = 10;
        function fun(a, b) {
            console.log(this);

            // 普通函数 this 指向 window 
            console.log(this.num + a + b);
        }

        var obj = {
            num: 20
        }

        fun(1, 2);

        // Function.prototype.bind()
        // bind() 改变 this 指向，参数以逗号隔开，不会立即调用函数执行,需要手动调用
        fun.bind(obj, 1, 2)();

        // call()  apply()  bind()
        // 相同点：都可以改变 this 指向
        // 不同点：call() apply()之间，都会立即调用函数执行，call()的参数以逗号分隔，apply()的参数以数组形式传递
        //        call() bind()之间，参数都以逗号分割，call()会立即调用函数执行，bind()需要手动调用
    </script>
</body>

</html>

call的使用场景

<!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>
        // 数据类型的判断

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

        var obj = {};
        var arr = [];
        var date = new Date();
        var num = 10;

        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]"
        console.log(Object.prototype.toString.call(num));   // "[object Number]"

    </script>
</body>

</html>

apply使用场景

<!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>
        // apply() 参数以数组形式传递，立即调用函数执行

        // Math.max() 传入参数的最大值
        console.log(Math.max(2, 3, 5, 7, 1, 7, 9, 0, 4, 7));

        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

        // 求数组中的最大值最小值
        console.log(Math.min.apply(Math, arr));
    </script>
</body>

</html>

bind使用场景

<!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>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <script>
        // bind() 不会立即调用函数执行，一般用于改变定时器中的this 指向

        // 循环绑定事件
        var btn = document.querySelectorAll("button");

        for (var i = 0; i < btn.length; i++) {
            btn[i].onclick = function () {
                var time = 5;

                this.disabled = true;

                this.innerHTML = "请" + time + "s之后再次点击";

                this.timeId = setInterval(function () {
                    console.log(this);
                    if (time > 1) {
                        time--;
                        // this 
                        this.innerHTML = "请" + time + "s之后再次点击";
                    } else {
                        // this 
                        this.removeAttribute("disabled");
                        this.innerHTML = "点击";
                        clearInterval(this.timeId)
                    }
                }.bind(this), 1000)
            }
        }
    </script>
</body>

</html>

constructor判断数据类型

<!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>
        var num = 10;

        // console.log(num.constructor);

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

        var arr = [];
        console.log(arr.constructor == Array);

        // null  undefined 不能用constructor判断数据类型

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

</html>

构造函数继承

<!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 Father(money) {
            this.money = money;
        }

        // 子构造函数
        function Son(name, money) {
            this.name = name;

            // call() 改变this指向
            Father.call(this, money);
        }

        // 构造函数继承
        var son1 = new Son("zhangsan", 2000);
        console.log(son1);
    </script>
</body>

</html>

原型对象继承

<!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 Father(money) {
            this.money = money;
        }

        Father.prototype.car = "小米su7";

        // 子构造函数
        function Son(name, money) {
            this.name = name;

            // call() 改变this指向
            Father.call(this, money);
        }

        // Son.prototype = Father.prototype 不可取

        // 子构造函数的原型 = 父构造函数的实例化
        Son.prototype = new Father();

        // Son.prototype.car  相当于访问实例化对象的car

        // 注意要把构造函数改回来
        Son.prototype.constructor = Son;

        // 构造函数继承
        var son1 = new Son("zhangsan", 2000);
        console.log(son1);

        console.log(son1.car);
    </script>
</body>

</html>

create继承

<!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>
        // Object.create() 继承

        var father = {
            money: 200
        }

        var son = Object.create(father, {
            name: {
                enumerable: true,
                writable: true,
                configurable: true,
                value: "小明"
            }
        });

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

</html>

数组的操作方法

<!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>
        var arr = [1, 1, 2, 3, 4, 5, 6, 7, 8, 9];

        // 1.forEach() 遍历数组
        arr.forEach(function (value, index, arr) {
            // 遍历的元素
            console.log(value);

            // 索引
            console.log(index);

            console.log(arr);
        });

        // 2.map() 遍历数组
        var newArr = arr.map(function (value, index, arr) {

            // return返回值
            return value + "map";
        });
        console.log(newArr);

        // 3.filter() 过滤数组
        var newArr = arr.filter(function (value, index, arr) {
            return value % 2 == 0;
        });
        console.log(newArr);

        var data = ["小米14", "iphone 15", "小米12", "huawei Mate60", "huawei P60"];
        var huawei = data.filter(function (value, index, arr) {
            return value.includes("huawei")
        });
        console.log(huawei);

        // 4.some() 数组中是否有满足条件的元素 true false; 一旦发现满足条件的元素，后面的将不再被遍历
        var res = arr.some(function (value, index, arr) {
            console.log(value);
            return value > 5;
        });
        console.log(res);

        // 5.every() 数组中每个元素是否都符合条件; 一旦发现不满足条件的元素，后面的将不再被遍历
        var res = arr.every(function (value, index, arr) {
            console.log(value);
            return value < 5;
        });
        console.log(res);

        // 6.find() 找一个满足条件的值; 一旦找到符合条件的元素，立即返回，后面不再遍历；找不到返回 undefined
        var res = arr.find(function (value, index, arr) {
            console.log(value);
            return value > 5;
        });
        console.log(res);

        // 7.reduce() 累加器    total作为上次操作的结果
        var sum = arr.reduce(function (total, value, index, arr) {
            console.log(total);
            return total + value;
        },0)
        console.log(sum);

        // 数组去重
        var resArr = arr.reduce(function (total, value) {
            console.log(total);
            if (total.includes(value)) {
                return total;
            } else {
                total.push(value);
                return total;
            }
        }, []);
        console.log(resArr);

        // 数组元素累乘
        var res = arr.reduce(function (total, value) {
            return total * value;
        }, 1);
        console.log(res);
    </script>
</body>

</html>
柿子来了
关注
  • 8
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用Python实现四阶龙格-库塔（Runge-Kutta）方法求解高阶微分方程.pdf
09-29
它通过一系列近似步骤来逼近微分方程的真实解，尤其适用于高阶微分方程。在Python中实现四阶龙格-库塔方法，可以使用以下步骤： 1. **定义微分方程**：首先，你需要明确你要解决的微分方程。在这个例子中，有两个...
JavaScript高阶第一天.xmind
08-09
js高阶知识总结： 理解Object： 1.返回一个由一个给定对象的自身可枚举属性组成的数组：Object.keys(对象名) 2.in 判断属性是否存在："属性名" in 对象名 3.delete 删除属性 4.返回一个由指定对象的所有自身属性...
js高阶 -- 总结 01（小白）
2301_78949452的博客
08-19 273
创建对象，属性的特征，定义属性的特征，定义多个属性特征，构造函数，实例成员和静态成员，构造函数的原型，对象原型，constructor构造函数，原型链，方法，原型对象中的this指向，数组的方法
小白JavaScript学习笔记----JavaScript 进阶
weixin_51877011的博客
05-05 843
垃圾回收机制(Garbage Collection) 简称 GCJS中内存的分配和回收都是自动完成的，内存在不使用的时候会被垃圾回收器自动回收。正因为垃圾回收器的存在，许多人认为JS不用太关心内存管理的问题但如果不了解JS的内存管理机制，我们同样非常容易成内存泄漏（内存无法被回收）的情况不再用到的内存，没有及时释放，就叫做内存泄漏面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。举个栗子：蛋炒饭。
javascript高阶函数---filter---map---reduce
weixin_47450807的博客
10-25 856
javascript高阶函数—filter—map—reduce 高阶函数就是给函数传入的参数就是一个函数,例如 filter(function(){.....}) 这里就以数组为例 filter用法 filter的汉语意思就是过滤的意思，在数组中就是将不满足条件的数据过滤掉。过滤后的数组元素存放在新的数组中。 例子： map用法 reduce用法 ...
攻防世界之Web高阶-NaNNaNNaNNaN-Batman
weixin_42075643的博客
06-07 151
是个附件，下载下来： 利用sublime-Text打开： 这里顺便提一下，电脑自带的文本编辑器和notepad打开都会显示乱码… 发现是一段js，右键浏览器打开 F12可以看到： 我们直接把eval函数改为alert函数： 这里还是要看个人的经验，比如xss的时候，alert是经常用来测试是否存在漏洞的，所以可以试一下。。。 将上边的复制到文本，然后对其进行逻辑上的梳理： 这里需要知道js中的正则表达式，^表示开始$表示结尾，要想满足上边的if，则可以进行拼接：去掉重复的字符可以得到be0
JavaScript中数组高阶函数的使用
前端卷王小白的博客
06-27 236
数组高级函数,forEach,map,filter,reduce,some
javascript高级 --- 函数柯里化
一只路过的小码农
04-16 312
一、介绍 函数柯里化(currying)又称部分求值，一个currying函数首先接受一部分参数，该函数不会立即求值，而是返回另外一个函数，刚才传入的参数通过闭包存起来，当真正需要求值时，一次性返回。 二、案例 函数求值 普通函数 function add (x, y) { return x + y } add(1,2) 我们用柯里化实现 function add(x) { return f...
Javascript 高阶函数
yb305
07-29 129
react2-高阶组件与路由_react 高阶组件 路由
2401_84170391的博客
04-27 759
useCallback(fn, deps) 相当于 useMemo(() => fn, deps)console.log(‘未传递第二个参数…’) // 每次组件渲染，那会执行回调函数。console.log(‘传递第二个参数为空数组…’) // 组件挂载执行一次回调函数。console.log(‘传递第二个参数为数组，添加 todos 依赖项…// 如果都没匹配到，重定向路由路径为/home。// 组件挂载及依赖项更新时执行回调函数。首页 || // Link跳转路由。
react redux基础+react-redux+redux高阶
wlt19990910的博客
10-13 130
1- redux基础 1-1 action creators 统一管理所有的action对象 // 创建数据仓库 import {createStore} from 'redux' ​ let initState = { name:'小白', age:99 } ​ // 第一个形参： 上一次的状态 // 第二个形参： 定义的规则 {type:'changeName',name:'小黑'},{type:'changeAge',age:100} function reducer(sta...
heyunjiang#Blog#高阶-js解释器1
07-25
背景最近遇到一个问题，我在使用 window.btoa() 方法将普通字符串转成 base64 编码时，如果字符串中有中文，则会报错，提示超出了编码的范围，随着
高等数学ppt课件 3-3高阶导数.ppt
07-09
高等数学ppt课件 3-3高阶导数
高阶函数-函数柯里化- 手写
05-14
一、高阶函数 定义：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数： 1、若 A 函数，接受的参数是一个函数，那么 A 就可以称为高阶函数。 2、若 A 函数，调用的返回值依然是一个函数，那么 A 就...
微信小程序骨架屏
djjdjdjdjddjjdjd的博客
08-16 349
⑤ 在onLoad 中页面加载前定义 isLoading.value=true, 在加载完后定义 isLoading.value=false.骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。① 在相应微信小程序页面右下角点生成骨架屏，左侧小程序目录会自动生成 .wxml 、.wxss 文件，⑥ 在生成骨架屏页面中 v-if="isLoading" v-else 定义显示与隐藏。
网上商品订单转手系统bootpf
weixin_43213064的博客
08-18 413
【代码】springboot网上商品订单转手系统bootpf
Vue3项目-Cesium地图初始化
StupidlyGrass的博客
08-19 80
将node_modules中cesium/Build/Cesium文件夹拷贝至public目录下。3、index.html配置。一、安装、配置Cesium。1、安装Cesium。二、使用Cesium。
Vue :class 绑定可以结合多个判断维度来动态设置类
最新发布
u010865136的专栏
08-19 73
二、:class="[isMute && 'disabled', env.isH5 && 'TUIChat-H5-footer']"一、数组语法允许你根据条件动态添加多个类名。数组中的每个元素可以是一个类名的字符串，或者是一个对象。对象中的键是类名，值是布尔值。
高阶-1 链表-查找链表最后节点 C语言、
07-11
在C语言中，高阶数据结构如链表是一种动态数据结构，其中每个节点通常包含数据域和指向下一个节点的指针。如果需要查找链表的最后一个节点，由于常规链表没有直接提供这个信息，我们通常会采用迭代或者递归的方式来实现。 **迭代法**： 遍历整个链表直到遇到NULL，这是最后一个节点的前一个节点。因为链表的最后一个节点的next指针通常是NULL，所以它的前一个节点就是最后一个节点。下面是一个简单的示例： ```c struct Node { int data; struct Node* next; }; struct Node* findLastNode(struct Node* head) { if (head == NULL) { return NULL; } struct Node* current = head; while (current->next != NULL) { current = current->next; } return current; } ``` **递归法**： 虽然递归不是寻找链表最后一节点的理想选择，因为它可能会导致栈溢出，但在教学或某些特定场景下可以尝试。以下是递归版本： ```c struct Node* findLastNodeRecursive(struct Node* head) { if (head == NULL || head->next == NULL) { return head; } return findLastNodeRecursive(head->next); } ``` 在这两个函数之后，你可以通过 `lastNode = findLastNode(head);` 获取到链表的最后一个节点。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值