this三种指向、上下文调用、伪数组转真数组Array.from(伪数组)、万能数据类型检测、求数组最大值Math.max(...arr)、修改定时器this、闭包、递归、浅拷贝与深拷贝、遍历dom树

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： JS高级 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65100963/article/details/124023896
版权

1.函数this三种指向

环境对象 this : 谁’调用’我,我就指向谁
小技巧: 没点没new是window, 有new是实例,有点是点左边的对象

函数表达式this的含义
普通函数:函数名()this指向window
对象方法:对象名.方法名()this指向对象
构造函数:new 函数名()this指向new创建实例对象
function fn() {
    console.log(this)
}
//普通函数 : window
fn()
//构造函数 : new创建实例对象
new fn()
let obj = {
    name: '张三',
    eat: fn
}
//对象方法 : obj对象
obj.eat()

let person = {
    name: '李四',
    eat: function () {
        console.log(this)
    },
    learn: function () {
        let eat = this.eat //person
        eat()
    }
}
// 打印几次this,分别打印什么
person.eat() //person
person.learn() //window

2.上下文调用

函数上下文:变量当前所在的函数作用域
默认情况下,函数内部的this不能主动修改(只能三选一). 如果需要修改，则需要使用上下文方式
上下文调用 : 修改函数内部的this

(1) 函数名.call(修改后的this,实参1,实参2…………)

function fn(a,b){
    console.log( a + b )
    console.log( this )
}
// 函数名.call(修改后的this)
fn.call({name:'张三'},10,20)

在这里插入图片描述

call场景01：伪数组转真数组

如果希望伪数组也可以调用数组的方法(排序、拼接),就需要把伪数组转成真数组

//1. slice可以查询数组，默认情况下不传参这个方法会得到数组本身
//2. 但是伪数组由于原型不是Array,所以无法调用slice
//3. slice方法存储在哪里? : Array.prototype
let weiArr = {
    0:88,
    1:20,
    2:50,
    3:60,
    length:4
}

weiArr = Array.prototype.slice.call(weiArr)  // weiArr.slice()
console.log(weiArr)

在这里插入图片描述

谁调用函数,this就指向谁,所以Array.prototype.slice()里this指向Array.prototype,call(weiArr)将this指向改为了weiArr,所以Array.prototype.slice.call(weiArr)相当于weiArr.slice()
实际开发中，ES6新增语法用于伪数组转真数组 : Array.from(伪数组)

let arr = Array.from(weiArr)
console.log( arr )

call场景02：万能数据类型检测 !!!面试题

1 . typeof 数据 : 有两种数据类型无法检测
null和数组无法检测,结果都是 ‘object’
2 . 解决方案:万能数据类型检测
Object.prototype.toString.call(数据)
原因:在object.prototype中有一个方法叫做toString,返回一个固定格式字符串’[object 数据类型]’
不能直接arr.toString,因为arr的原型对象里的toString是转换成字符串,object的prototype里是toString才是检测数据类型
Object.prototype调用toString()这个函数,this原本指向Object.prototype,检测的是Object.prototype的数据类型,用call将this指向变为arr,检测的就是arr的数据类型了

//值类型
let str = 'abc'
let num = 123
let bol = true
let und = undefined
let nul = null
//引用类型
let arr = [10,20,30]
let fn = function(){}
let obj = {name:'张三'}
console.log( typeof str )//'string'
console.log( typeof num )//'number'
console.log( typeof bol )//'boolean'
console.log( typeof und )//'undefined'
console.log( typeof nul )//'object'
console.log( typeof arr )//'object'
console.log( typeof fn )//'function'
console.log( typeof obj )//'object'
/* Object.prototype.toString() 返回固定格式字符串 '[object 数据类型]' */
//Object.prototype调用toString()这个函数,this原本指向Object.prototype,检测的是Object.prototype的数据类型,用call将this指向变为arr,检测的就是arr的数据类型了
console.log( Object.prototype.toString.call( str ) )//[object String]
console.log( Object.prototype.toString.call( num ) )//[object Number]
console.log( Object.prototype.toString.call( bol ) )//[object Boolean]
console.log( Object.prototype.toString.call( und ) )//[object Undefined]
console.log( Object.prototype.toString.call( nul ) )//[object Null]
console.log( Object.prototype.toString.call( arr ) )//[object Array]
console.log( Object.prototype.toString.call( fn ) )//[object Function]
console.log( Object.prototype.toString.call( obj ) )//[object Object]

(2) 函数名.apply(修改后的this, 数组或伪数组 )

apply会自动帮你遍历数组，然后按照顺序逐一传参

function fn(a,b){
    console.log( a )//30
    console.log( b )//40
    console.log( a + b )//70
    console.log( this )//{name:'李四'}
}
fn.apply({name:'李四'}, [30,40] )

apply场景01：伪数组转数组

这里不需要修改this,只是借助apply传参的特点. this指向原来是谁，还是设置谁

//伪数组 本质是 :  对象
let obj = {
    0:20,
    1:66,
    2:88,
    3:90,
    length:4
}  
        
//伪数组转真数组
let arr = []
// arr.push( obj[0],obj[1],obj[2],obj[3])太麻烦
//借助 apply自动遍历数组/伪数组 逐一传参特点
//这里不需要修改this,只是借助apply传参的特点. this指向原来是谁，还是设置谁
arr.push.apply( arr,obj )
console.log(arr)
//伪数组转真数组 ：  Array.from( 伪数组 ) ES6提供的一个更简洁的静态方法
console.log( Array.from(obj) )

apply场景02：求数组最大值

以前:

//求数组最大值

        
//1.js基础 : 擂台思想
let max = arr[0]
for(let i = 1;i<arr.length;i++){
    if( arr[i] > max ){
        max = arr[i]
    }
}
console.log(max)

现在1:

let arr = [20,50,66,100,30]
//2. Math.max()
// let max1 = Math.max(arr[0],arr[1],arr[2],arr[3],arr[4])
//这里使用apply只是借助传参特点，this指向不用修改。还是原来的this
let max1 = Math.max.apply(Math,arr)
console.log( max1 )

现在2:Math.max(…arr)
ES6求最大值 …作用和apply类似，也会自动遍历数组，然后逐一传参

let arr = [20,50,66,100,30]
let max2 =  Math.max(...arr)
console.log(max2)

(3)函数名.bind(修改后的this)

函数名.bind(修改后的this,形参1,形参2…………) ,一般不会传参,因为会在调用新函数的时候传
如果传参了,则新函数的参数也会绑定不变
bind不会立即执行函数,而是返回一个修改this之后的新函数

function fn(a,b){
    console.log( a + b )
    console.log( this )
}

let newFn = fn.bind({name:'王五'})
newFn(100,200)
newFn(10,20)

bind场景：不会立即执行的函数(修改定时器this)

bind一般用于修改: 定时器函数、事件处理函数
定时器中的this : 默认指向window
定时器中的this其他方法改不了

let fn=function(){
    console.log(this)
}
let newFn=fn.bind({name:'张三'})
//定时器括号里要写newFn,不能写newFn(),因为newFn是变量赋值,newFn()是调用函数,得到的是返回值
setTimeout(newFn,2000)

//简写,减少变量污染
setTimeout(function() {
  console.log(this)
}.bind({ name: "1111" }),2000)

定时器括号里要写newFn,不能写newFn(),因为newFn是变量赋值,newFn()是调用函数,得到的是返回值
定时器里的回调函数加了.bind({ name: “1111” })后,返回了一个新的this为{ name: “1111” }的函数,从而修改了定时器的this

面试必问: call 和 apply 和 bind三者区别 !!!

相同点 : 作用一致，修改函数this指向
不同点 :
传参方式不同 : call是按照顺序传参, apply是自动遍历数组/伪数组传参
执行机制不同 : call和apply会立即执行函数,而bind不会立即执行而是得到修改this的新函数

3.闭包

1.闭包closure是什么 :
a. 闭包 是一个 访问其他函数内部变量 的 函数
b. 闭包 = 函数 + 上下文引用 的组合
闭包是一个组合
在这里插入图片描述

2.闭包作用 : 解决变量污染

//局部作用域 :  在函数内部声明
function fn() {
//局部变量:fn上下文
  let num = 10
  // fn1 + 访问num 组合才叫闭包
  function fn1() {
    console.log(num)
  }
  fn1()
}
fn()

闭包案例:

document.querySelector('.btn').onclick = function(){
    //1.获取用户搜索的内容
    let txt = document.querySelector('input').value
    //2.网络请求 : 不是立即就能出结果的，网络请求需要时间的。
    //使用定时器来模拟请求
    setTimeout(function(){
        alert(`${txt}的搜索结果如下:123条`)
    },1000)
}

4.递归

(1)递归函数: 一个函数 在内部 调用自己

递归作用和循环类似的,也需要有结束条件(优先用循环,递归少用)
递归应用:

function fn(){
    console.log('今天学得很开心')
    fn()
}
fn()

(2)双函数递归 : 两个函数互相调用

function fn1(){
    console.log('哈哈')
    fn2()
}
function fn2(){
    console.log('呵呵')
    fn1()
}
fn1()

(3)递归应用:

浅拷贝与深拷贝 :

方式一(推荐) : JSON方式实现

let newObj = JSON.parse( JSON.stringify( obj ) )

浅拷贝： 拷贝地址

let newObj = obj
修改拷贝后的数据，原数据也会修改
newObj.name = '李四'
console.log( obj,newObj)

深拷贝 : 拷贝数据

(1)先把js对象 -> JSON字符串   (JSON会自动帮你深拷贝)
 let jsonStr = JSON.stringify( obj )
(2)再把 JSON字符串 -> js对象
 let newObj = JSON.parse( jsonStr )
 newObj.name = '李四'
console.log(obj,newObj)

//简写:
let newObj = JSON.parse( JSON.stringify( obj ) )
方式二(递归) : 了解
let obj = {
    name:'张三',
    age:20,
    sex:'男',
    hobby:['吃饭','睡觉','学习'],
    student:{
        name:"班长",
        score:90
    }
}
//使用递归函数
function kaobei(obj,newObj){
    for(let key in obj){
        if( obj[key] instanceof Array ){
            //声明一个空数组,然后继续拷贝数组里面的数据
            newObj[key] = []
            //递归调用继续拷贝 数组
            kaobei(obj[key],newObj[key])
        }else if(  obj[key] instanceof Object ){
             //声明一个空对象
             newObj[key] = {}
            //递归调用继续拷贝 对象
            kaobei(obj[key],newObj[key])
        }else{
            newObj[key] = obj[key]
        }
    }
}
//创建一个空对象，然后深拷贝
let newObj = {}
//一个函数 在内部 调用自己
kaobei(obj,newObj)

newObj.name = '李四'
newObj.hobby[0] = '摸鱼'
newObj.student.name = 'ikun'
console.log( obj,newObj)

遍历dom树

//封装一个遍历dom树函数
function addElement(arr, father) {
  //遍历数组
  for (let i = 0; i < arr.length; i++) {
    //(1)创建空标签
    let div = document.createElement("div")
    //(2)设置内容
    div.innerHTML = `<p>${arr[i].type || arr[i] }</p>`
    //(3)添加到父盒子
    father.appendChild(div)
    //如果元素还有data属性,则需要使用递归继续添加下级菜单
    if( arr[i].data ){
        addElement(arr[i].data , div)
    }
  }
}
addElement(arr, document.querySelector(".menu"))
九九nine9
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6之Array.from()方法
weixin_30553837的博客
02-11 2096
　　Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。 　　那么什么是类数组对象呢？所谓类数组对象，最基本的要求就是具有length属性的对象。 　　1、将类数组对象转换为真正数组： let arrayLike = { 0: 'tom', 1: '65', 2: '男', 3: ['jane','john','...
分享JS数组求和与求最大值的方法
11-23
前言 面试遇到一个问题：JS数组求和函数。我第一想到的就是数组循环。然而我觉得面试官问这个问题一定不是想考这个人人皆知的方法。当时机智的我竟然想到了递归函数不断加和数组的项，然而折腾了好久都没调好方法，事实证明这并不是最优解。最后面试官问我有没有见过reduce()，真木有哇。所以回来查资料，Array.reduce()是ES5新增的新属性，相似的还有Array.reduceRight()。 下文来总结一下数组求和的方法。 最粗暴的方法：循环获取 通过for循环一项项地加和。看代码： Array.prototype.sum = function (){ var result = 0; f
微信小程序 调用远程接口 给全局数组赋值代码实例
01-03
关键是 let that = this 因为在onLoad 的 wx.request方法里， this指的是 wx.request 的上下文， 所以应该是在 onLoad 的时候定义 let that = this 调用远程服务，序列化后，把obj赋值给bookList 最开始的报错代码如下： Page({ data: { bookList: [] }, onLoad: function() { wx.request({ url: 'https://jiashubing.cn/wechat/book', header: { 'content-type': '
史上最全JavaScript数组去重的十种方法（推荐）
10-19
主要介绍了JavaScript数组去重的十种方法,利用元素的属性和特性进行不同的去重方法，并实例演示如何测试去重超大数组，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
js刷leetcode常用语法
weixin_43098069的博客
05-28 345
1.除法取整 let sum=7; sum=sum/10; 我们无法得到sum=0，因为sum会等于0.7，如果想取整，那么请使用Math.floor()，向下取整 sum=Math.floor(sum/10);
JavaScript中的内置函数math.max()或math.min()如何传入数组
Super_hzj的博客
07-10 1230
JavaScript中的内置函数math.max()或math.min()如何传入数组 array = [1,2,3,4] 只要在array前加上三个点 ...array 就能按空格分隔取出值 结果是 1 2 3 4 在math.max里就可以math.max(...array) 就可以传入你想传入的数组了. ...
JS中this的四种调用方法
weixin_41390717的博客
12-14 2624
JavaScript的函数内部如果调用了this,那么这个this到底指向谁? JS中this有四种调用方法各自的指向也有所不同所以答案是根据具体情况来看的
this关键字/数组初始化/可变参数的数组
Endeavor_G的博客
03-03 346
this关键字表示”调用方法的那个对象”的引用。 我们有时在写程序时会有这种需求，想要在方法内部获得当前对象的引用（就是调用当前方法的那个对象），那么就可以在方法内部使用this关键字代指当前对象的引用。 比如 public class Test { public static void main(String[] args) { new At().aa().sout(...
Java-一维数组总结
Piepis的博客
05-13 496
Array综述 java 语言中的数组是一种引用数据类型。不属于基本数据类型，数组的父类是 object。 数组实际上是一个容器，可以同时容纳多个元素（数组是一个数据的集合） 数组： 字面意思是"一组数据" 数组当中可以存储"基本数据类型"的数据，也可以存储"引用数据类型" 的数据 数组因为是引用类型，所以数组对象是堆内存当中（数组是存储在堆内存当中的） 数组当中如果存储的是"Java对象" 的话，实际上存储的是对象的"引用（内存地址）" 数组一旦创建，在java 中规定，长度不可变（数组长度不可以变）
es6的新增语法，this指向，数组中查找元素，set
liulang68的博客
12-21 217
函数中没有定义i这个变量。所以我们会去外面找，这个时候的i是全局变量。 以前我们可以需要些a=ary[1],b=ary[2],c=ary[3] 把箭头函数赋值给一个变量，然后通过变量名字去调用。 如果不要让其做返回值，我们一定要把括号加上。 只有函数才有作用域。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta.....
JAVA学习面向对象——this关键字 、 引用类型数组 、 方法重载 、 构造方法
weixin_41806595的博客
04-28 212
1.方法的重载 （1）方法的签名 方法的签名=方法名+参数列表 （2）方法的重载（overload） 1）在同一个类中，方法名称相同，参数列表不同，称之为方法的重载 2）在编译时有编译器根据签名自动绑定调用的方法 2.构造方法 （1）作用 1）给成员变量初始化 2）与类同名，没有返回值类型 3）在创建对象（new）时被自动调用 4） ...
Linux Awk数组操作详细介绍
01-09
数组元素用 0 或空串来初始化，这根据上下文而定。例如： 　一、定义方法 　1：可以用数值作数组索引(下标) 　Tarray[1]=“cheng mo” 　Tarray[2]=“800927” 　2：可以用字符串作数组索引(下标) 　Tarray[...
C++ Vector 动态数组的实现
12-23
以下使用方法以 int 数据类型为例，使用时可自定义数据类型 注意：下文中区间为左闭右开 1. 定义（初始化）Vector vector<int> v; 创建一个空vector vector<int> v(5); 创建一个vector，元素个数为 5 vector...
ES6之数组的扩展
lovewhoilove
08-22 149
1 扩展运算符 扩展运算符（spread）是三个点...，它的作用就好比 rest 参数的逆运算，即将一个数组转为参数序列。 console.log(...[1, 2, 3]) //1 2 3 console.log(1, ...[2, 3, 4], 5) //1 2 3 4 5 该运算符主要用于函数调用： function add(x, y) { return x + y; } const numbers = [4, 38]; add(...numbers); // 42 再举个例子：求数组中的最
ES6知识点总结三：数组的扩展（扩展运算符···、Array.from()、Array.of()...）
qq_43628158的博客
06-27 298
数组的扩展（扩展运算符···、Array.from()、Array.of()）
【前端面试系列之JS】js中的数组遍历方法
阿卡内的博客
07-13 1822
js中的数组遍历方法
伪数组转成真数组的方法
qq_52006046的博客
01-30 295
我们需要确认将要解构赋值的这个数据结构是“可遍历的（iterable）”，或者说这个数据结构需要部署有Iterator接口。我们需要确认将要解构赋值的这个数据结构是“可遍历的（iterable）”，或者说这个数据结构需要部署有Iterator接口。里面的this就是能实现伪数组转换成真数组的关键，通过call()方法将里面的this绑定到伪数组对象上，再通过循环将伪数组的每一项push进一个真数组再返回这个真数组。第三种也是通过调用Array的slice的截取方法，后面有第二种和第三种的区别分析。
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 350
步骤很详细，直接上教程……
C语言调用openssl库实现求数组md5算法
02-21
使用 C 语言调用 OpenSSL 库来实现求数组 MD5 算法，可以使用 OpenSSL 库中的函数 EVP_MD5() 来处理数据，具体步骤如下： 1. 定义一个 EVP_MD_CTX 结构体，用于存放 MD5 的上下文信息； 2. 使用 EVP_MD_CTX_init() 函数初始化 EVP_MD_CTX 结构体； 3. 使用 EVP_DigestInit_ex() 函数初始化摘要上下文；4. 使用 EVP_DigestUpdate() 函数传入要处理的数组； 5. 调用 EVP_DigestFinal_ex() 函数完成计算； 6. 使用 EVP_MD_CTX_cleanup() 函数清理 MD5 的上下文信息； 7. 使用 EVP_MD_CTX_destroy() 将 EVP_MD_CTX 结构体的内存释放掉。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值