JS高阶—day03

最新推荐文章于 2024-11-16 14:11:26 发布
最新推荐文章于 2024-11-16 14:11:26 发布
阅读量62 收藏
点赞数
文章标签： javascript 前端 原型模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dcwal/article/details/132611372
版权

1.函数对象的原型的方法

1.1 Function.prototype.call()---call()方法

call():使用一个指定的 this 值调用一个函数,可以改变函数的 this 指向  立即调用函数  参数传递的方式是以逗号隔开

var o = {
    name: '小谷'
}
 function fn(a, b) {
      console.log(this);
      console.log(a+b)
};
fn(1,2)// 此时的this指向的是window 运行结果为3
fn.call(o,1,2)//此时的this指向的是对象o,参数使用逗号隔开,运行结果为3

1.2 Function.prototype.apply()---apply()方法

apply() 方法调用一个函数。可以改变函数的 this 指向   传入参数是以数组形式   立即调用函数

var o = {
    name: '小好'
}
 function fn(a, b) {
      console.log(this);
      console.log(a+b)
};
fn()// 此时的this指向的是window 运行结果为3
fn.apply(o,[1,2])//此时的this指向的是对象o,参数使用数组传递 运行结果为3

1.3 Function.prototype.bind()---bind()方法

bind() 方法不会调用函数,但是能改变函数内部this 指向, 不会立即调用 需要手动调用

 var o = {
    name: '小谷'
 };
​
function fn(a, b) {
    console.log(this);
    console.log(a + b);
};
var f = fn.bind(o, 1, 2); //此处的f是bind返回的新函数
f();//调用新函数  this指向的是对象o 参数使用逗号隔开

1.4 call、apply、bind三者的异同

  • 共同点 : 都可以改变this指向

  • 不同点:

    • call 和 apply可以改变函数内部this指向,会立即调用函数.

    • call 和 apply传递的参数不一样,call传递参数使用逗号隔开,apply使用数组传递.

    • bind 可以改变函数内部this指向,不会立即调用函数, 需要手动调用.

  • 应用场景

    1. call 经常用作判断数据类型和继承.

    2. apply 经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值

    3. bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向.

1.5 最精准的检测方式 :Object.prototype.toString()判断数据类型

        console.log(Object.prototype.toString());
        console.log(Object.prototype.toString.call(123));
        console.log(Object.prototype.toString.call(arr));
        console.log(Object.prototype.toString.call(fun));
        console.log(Object.prototype.toString.call(new Date));
        console.log(Object.prototype.toString.call(new RegExp));

1.6 constructor来判断构造函数类型

 console.log(obj.constructor == Object);//true
 console.log(date.constructor == Date);//true

1.7 instanceof 检测复杂数据类型

 console.log(new Date instanceof Object);
 console.log(new RegExp instanceof Object);
 console.log(num instanceof Object);
 console.log(fun instanceof Function);
 console.log(arr instanceof Array);

1.8  typeof 检测基本数据类型

console.log(typeof num);
console.log(typeof str);
console.log(typeof null);
console.log(typeof undefined);
console.log(typeof true);
console.log(typeof arr);
console.log(typeof obj);
console.log(typeof fun);

2.定时器传参

解决定时器不能传参的问题:在外部封装函数 写在定时器方法里面进行调用

 setTimeout(function () {
            // 12123213
            // 12123213
            // 12123213
            // 12123213
        }, 1000)

3. JS继承的实现方式

3.1 构造函数继承

  1. 先定义一个父构造函数

  2. 再定义一个子构造函数

  3. 子构造函数继承父构造函数的属性(使用call方法)

// 1. 父构造函数
 function Father(uname) {
   // this 指向父构造函数的对象实例
   this.uname = uname;
 }
  // 2 .子构造函数 
function Son(uname, age) {
  // this 指向子构造函数的对象实例
  //3.使用call方式实现子继承父的属性
  Father.call(this, uname);
  this.age = age;
}
var son = new Son('小好', 18);
console.log(son);

3.2 原型对象继承方法

  1. 先定义一个父构造函数

  2. 再定义一个子构造函数

  3. 子构造函数继承父构造函数的属性(使用call方法)

  4. 设置子级的prototype原型对象

// 1. 父构造函数
function Father(uname, age) {
  // this 指向父构造函数的对象实例
  this.uname = uname;
  this.age = age;
}
Father.prototype.money = function() {
  console.log(100000);
 };
 // 2 .子构造函数 
  function Son(uname, age, score) {
      // this 指向子构造函数的对象实例
      Father.call(this, uname, age);
      this.score = score;
  }
// Son.prototype = Father.prototype;  这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会跟着一起变化
  Son.prototype = new Father();
  // 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数
  Son.prototype.constructor = Son;
  // 这个是子构造函数专门的方法
  Son.prototype.exam = function() {
    console.log('孩子要考试');
​
  }
  var son = new Son('小好', 18, 100);
  console.log(son);

3.3 Object.create实现类式继承

Object.create(proto, [propertiesObject])

  • 方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。返回在指定原型对象上添加新属性后的对象。

  • proto:新创建对象的原型对象。

  • propertiesObject:可选。需要传入一个对象，该对象的属性类型参照Object.defineProperties()的第二个参数。如果该参数被指定且不为 undefined，该传入对象的自有可枚举属性(即其自身定义的属性，而不是其原型链上的枚举属性)将为新创建的对象添加指定的属性值和对应的属性描述符。

4.内置对象Array的操作方法

4.1 数组方法forEach遍历数组

//forEach遍历数组 
arr.forEach(function(value, index, array) {
      // value当前元素  
      // index元素的索引
      // arr当前数组
 })
  //相当于数组遍历的 for循环 没有返回值
var arr = [1, 2, 3, 5, 6, 7, 89];

        // 遍历数组
        var rel = arr.forEach(function (value, index, arr) {
            // value当前元素
            // index元素的索引
            // arr当前数组
            console.log(value + "-----" + index);
            console.log(arr);

            return "操作元素" + value
        })
        console.log(rel);

4.2 数组方法map遍历数组

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测, map() 不会改变原始数组。

 var arr = [1, 2, 3, 5, 6, 7, 89];

        // 遍历数组
        var rel = arr.map(function (value, index, arr) {
            // value当前元素
            // index元素的索引
            // arr当前数组
            console.log(value + "-----" + index);
            console.log(arr);

            return "操作元素" + value
        })
        console.log(rel);
        console.log(arr);
​

4.3 数组方法filter过滤数组

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

 var arr = [12, 66, 4, 88, 3, 7];
  var newArr = arr.filter(function(value, index,array) {
  	 //参数一是:数组元素
     //参数二是:数组元素的索引
     //参数三是:当前的数组
     return value >= 20;
  });
  console.log(newArr);//[66,88] //返回值是一个新数组

4.4 数组方法some

some 查找数组中是否有满足条件的元素 ,如果数组中有元素满足条件返回 true，否则返回 false。

var arr = [10, 30, 4];
 var flag = arr.some(function(value,index,array) {
    //参数一是:数组元素
     //参数二是:数组元素的索引
     //参数三是:当前的数组
     return value < 3;
  });
console.log(flag);//false返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环

4.5数组方法every

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

every() 方法使用指定函数检测数组中的所有元素：

array.every(function(value,index,array))

  • 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。

  • 如果所有元素都满足条件，则返回 true。

    注意： every() 不会对空数组进行检测。

    注意： every() 不会改变原始数组。

  • var arr = [56, 32, 78, 11, 23, 103, 45, 103];
        // every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
        var rel = arr.every(function (v) {
            console.log("zhixing");
            return v < 100
            // 如果数组中检测到有一个元素不满足，则整个表达式返回false，且剩余的元素不会再进行检测。
            // 所有元素都满足条件 才会返回true
        })
        console.log(rel);

4.6 数组方法find

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

find() 方法为数组中的每个元素都调用一次函数执行：

array.find(function(value,index,array){})

  • 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。

  • 如果没有符合条件的元素返回 undefined

  • var arr = [56, 32, 78, 11, 23, 103, 45, 103];
        // find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。
        // find() 方法为数组中的每个元素都调用一次函数执行：
        // 如果没有符合条件的元素返回 undefined
        var rel = arr.find(function (v) {
            console.log("执行");
            return v > 100
        })
        console.log(rel);

4.7 数组方法reduce

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

array.reduce(function(total,value,index,array){},initialValue)

  • total 必需。初始值, 或者计算结束后的返回值。 value 必需。当前元素 index 可选。当前元素的索引 array可选。当前元素所属的数组对象。

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

  • 返回值:最终计算的一个值

  • // 求和
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        var rel1 = arr.reduce(function (total, value) {
            // console.log(total);
            // console.log(value);
            return total + value
        })
        console.log(rel1);


        // 求最大值
        var arr2 = [45, 67, 12, 2, 103, 44, 33];
        var rel2 = arr2.reduce(function (total, value) {
            // if (total < value) {
            //     total = value;
            // }
            return Math.max(total, value);
        })
        console.log(rel2);



        // 数组去重
        // splice  push()
        var arr3 = [44, 65, 44, 12, 3, 2, 5, 2, 16];
        var rel3 = arr3.reduce(function (total, value, index) {
            // []
            if (!total.includes(value)) {
                total.push(value);
            }
            return total;
        }, [])
        console.log(rel3);


        arr3.sort(function (a, b) {
            return a - b;
        })
        console.log(arr3);

暗香盈袖@
关注
js高阶day03
ZXK19990928的博客
08-31 52
● arr.reduce(function(total,value,index,array){},initialValue)：方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。● arr.map(function(){}):对数组遍历并操作数组元素,返回操作后元素组成的新数组。// (简单理解为调用函数的方式，但是它可以改变函数的 this 指向)● arr.some(function){}):对数组的元素进行判断是否有符合的元素。// ③改变this指向。
JavaScript高阶 day-03
BXY369的博客
08-28 1075
当前元素所属的数组对象。，该传入对象的自有可枚举属性(即其自身定义的属性，而不是其原型链上的枚举属性)将为新创建的对象添加指定的属性值和对应的属性描述符。bind() 方法不会调用函数,但是能改变函数内部this 指向,返回的是原函数改变this之后产生的新函数。这些 this 的指向，是当我们调用函数的时候确定的。filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
JavaScript高阶 day-04
BXY369的博客
08-29 1010
每一个构造函数，都会有一个prototype属性。该属性指向一个对象，该对象称之为原型对象,即原型。当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找(即上一层构造函数的prototype)，这样一层一层向上查找直到Object的prototype结束,这样就会形成一个链式结构，我们称为原型链。我们可以说：它们是继承关系。
JavaScript高阶 day-01
BXY369的博客
08-26 1257
我们可以随时随地为对象添加属性，也可以随时修改属性的值。name: '小好'//给对象添加属性​//修改属性的值person1.name = '张小好';通过赋值操作定义对象，添加的普通属性，注意:默认情况下都是可修改、可枚举、可配置的。如果我们想改变属性的特征，可以使用方法,该方法允许精确地添加或修改对象的属性,在遍历枚举对象属性时会被枚举到（[for...in] 或 []方法）。注意:默认情况下，使用添加的属性值是不可修改，不可枚举，不可配置(删除和添加)。
JavaScript高阶 day-05
BXY369的博客
08-29 677
JavaScript 除了提供正常模式外，还提供了严格模式（strict mode）。ES5 的严格模式是采用具有限制性 JavaScript变体的一种方式，即在严格的条件下运行 JS 代码。严格模式在 IE10 以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略。严格模式对正常的 JavaScript 语义做了一些更改：1.消除了 Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为。2.消除代码运行的一些不安全之处，保证代码运行的安全。3.提高编译器效率，增加运行速度。
JavaScript高阶 day-02
BXY369的博客
08-27 1212
（规范）。
Day03-JavaScript 高阶
Spirs的博客
12-04 54
严格模式、高阶函数、闭包、闭包的使用、递归、赋值、浅拷贝、深拷贝、手写递归实现深拷贝
JS高阶（day5）
Lzh20020926的博客
09-01 57
1 浅拷贝1 浅拷贝浅拷贝:1 赋值出来的对象与源对象共用同一个内存地址,存储在同一块空间2 改变其中一个对像另一个对象也会改变浅拷贝三种方式：1 赋值2 使用for in3 使用Object.assign()方法用于将所有可枚举属性值从一个或多个源对象分配到目标对象 将他返回目标对象2 深拷贝。
JS高阶（day1）
Lzh20020926的博客
08-31 56
1.1创建对象1.1创建对象实例化Object对象的方式有两种：使用Object构造器和使用对象的字面量。1.2 定义属性我们可以随时随地为对象添加属性，也可以随时修改属性的值。1.3 属性枚举(遍历)
day03-js高级资料.zip
10-01
"day03-js高级资料.zip"这个压缩包很可能是提供了一系列关于JavaScript高级特性和技术的教程或参考资料。从标签"js"我们可以推断，这份资料专注于JavaScript的学习与深入探讨。 在JavaScript的世界里，"高级"通常...
day03-js高级讲义.zip
10-01
JavaScript（简称JS）是一种广泛应用于Web开发的轻量级脚本语言，主要在浏览器环境中运行，为网页添加交互性。本讲义将深入探讨JS的高级特性，旨在帮助开发者提升技能，实现更复杂的前端功能。 1. **闭包**：闭包是...
03_JS内存管理和闭包（day03）1
08-04
在实际编程中，闭包常用于实现高阶函数，即函数可以作为参数传递，也可以作为另一个函数的返回值。 总的来说，JavaScript的内存管理和闭包是其核心特性，理解并熟练运用这些概念对于编写高效、无泄漏的代码至关重要...
Day03
03-10
- 匿名函数与箭头函数：简洁的函数定义方式，常用于回调和高阶函数。 - 作用域：局部作用域（函数内）和全局作用域（函数外），以及ES6引入的块级作用域。 4. **数组与对象** - 数组：使用`[]`定义，提供多种...
day01-js高级第一天课件复习资料.rar
04-08
在“day01-js高级第一天课件复习资料.rar”这个压缩包中，我们推测包含的是第一天学习JavaScript高级部分的课程内容，适用于已经有一定基础，希望深入学习JS的同学。以下是对这些高级知识点的详细阐述： 1. **原型...
跟着尚硅谷学vue2—进阶版2.0—使用 Vue 脚手架1.0
zhzijun的博客
11-13 448
分析脚手架 、ref和props、mixin混入、插件、scoped样式、总结TodoList案例、浏览器本地存储-webStorage、TodoList_本地存储
如何编译 Cesium 源码
ismartcube的博客
11-13 1205
通过以上步骤，您可以成功地从 GitHub 上下载 Cesium 源代码并在本地进行编译。对于开发人员来说，编译 Cesium 源码有助于定制功能，或者调试某些问题。如果您只是想使用 Cesium 进行开发，而不需要编译源代码，您也可以直接从 CDN 或下载预构建版本进行使用。编译的 Cesium 版本可以直接在您的应用中引用，或者部署到 Web 服务器上，供其他用户访问。提供一个高效、兼容、优化的数据转换工具，一站式完成数据转换、数据发布、数据预览操作。
从零开始快速构建Vue3项目
欧唯薇
11-13 908
是目前最推荐的方式来创建 Vue 3 项目，因为它速度快，配置简洁，并且是 Vue 3 的官方推荐工具。打开浏览器并访问 `http://localhost:5173`，你将看到一个基本的 Vue 3 应用程序运行。1、若需要使用不同版本node（兼容新旧项目环境），则需要使用nvm来进行node多版本管理，下载并安装。2、若出现某个依赖安装报错，可以npm install --ignore-scripts，最后再来单独安装报错的依赖。
【Node.js】Node.js 和浏览器之间的差异
最新发布
佚名程序员
11-16 901
Node.js 是一个基于 Chrome V8 引擎构建的开源 JavaScript 运行时，它使开发者能够在服务端运行 JavaScript 代码。Node.js 提供了高效的事件驱动和非阻塞 I/O 模型，广泛应用于构建快速、可扩展的网络应用。核心特性单线程：使用事件循环机制实现并发。非阻塞 I/O：适合高并发应用。模块化：采用 CommonJS 模块系统。浏览器是前端开发的主要运行环境。其核心任务是解析 HTML、CSS 和 JavaScript，并呈现网页内容。
Vue常用加密方式
m0_51431448的博客
11-13 172
消息摘要是从原始数据中通过特定算法计算出的一个固定长度的字符串，这个过程通常被称为哈希函数或散列函数。固定长度：无论输入的数据有多大，输出的消息摘要都有固定的长度。唯一性：理想情况下，不同的输入应该产生不同的消息摘要，虽然在现实中由于哈希碰撞的存在，这并不总是可能的。不可逆性：从消息摘要不能反推出原始数据。高效性：计算消息摘要的过程应该是快速且高效的。
解读算法高阶day07与day08代码
资源摘要信息:"算法高阶day07+day08代码.zip" 在IT领域，算法是解决问题和处理数据的基本方法，具有高效、优化的特点。算法课程的学习对于任何从事编程或数据处理的人员来说都是基础且重要的。根据文件信息，该压缩...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值