js高级(代理,浅拷贝深拷贝,节流和防抖,闭包.hasOwnProperty)

2023-10-08 22:29
文章标签 js 代理 高级 拷贝 闭包 节流 防抖 hasownproperty

本文主要是介绍js高级(代理,浅拷贝深拷贝,节流和防抖,闭包.hasOwnProperty)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.代理

1.问题:如何定义一个对象,不会被修改,也不能被遍历?

  1. 通过Object.defineProperty(对象,属性名,option)定义默认属性

    • 无法被修改
    • 无法被删除
    • 无法被遍历

    注意:Object.Property传入的值与返回的值是同一个地址

  2. 可以配置一下属性

    • value:初始值
    • writable:true (true允许被修改)
    • enumerable:true(rue允许被遍历)
    • configurable:true(rue允许被删除)

  3. 提供get和set2个方法

    • 注意:get和set不能和value,writable一起使用,当给对象设置属性的值,会触发set
        //    var obj={}var o = Object.defineProperty({}, "name", {value: "刘德华",//初始值writable: true,//true 允许被修改enumerable: true,//true 允许被遍历configurable: true//true 允许被删除})//    delete o.name//删除// o.name="小易"//修改// for(let k in o){//     console.log(k,o[k]);//name 刘德华// }//遍历console.log(o);//{name: '刘德华'}var person = {name: "吴彦祖",}//给一个初始值person.age = 0// 问题:直接操作Person,给Person添加属性,容易出现值的不准确// 聘请一个代理(秘书)var proxy = Object.defineProperty({}, "age", {set(val) {if (!(val >= 18 && val <= 50)) {console.log("值不合法");} else {console.log("值合法");person.age = val}},get() {return `年龄${person.age}岁`}})// 读写都要经过代理proxy.age = 22//设置年龄console.log(proxy.age);//读取年龄console.log(person);
2.查看方法有几个参数

使用arguments

3.hasOwnProperty

  1. 数组是特殊的对象,也就拥有对象的原型的属性和方法

  2. for…in会遍历原型上的属性和方法

    解决:

    • 使用Object.prototype.hasOwnProperty如果是原型上属性和方法,就为false,不是为true

  3. for…of 不会遍历原型上的属性和方法

    解决:

    • 使用Object.keys结合for…of
Object.prototype.address = "中国"function Person(name, age, sex) {this.name = name,this.age = age,this.sex = sex}var p = new Person("小易", 22, "女")// for..in会遍历到父的原型上的属性和方法for (let key in p) {console.log(key);//name, age, sex,address}// 解决方案1:使用Object.keys结合for..ofvar keys = Object.keys(p)for (let key of keys) {console.log(key);//name, age, sex}// 解决方案2:Object.prototype.hasOwnProperty如果是原型上属性和方法,就为false,不是为truefor (let key in p) {// 如果是原型上属性和方法,就为false,不是为trueconsole.log(key,Object.prototype.hasOwnProperty.call(p, key));if (Object.prototype.hasOwnProperty.call(p, key)) {const el = p[key]console.log(el);}}
4.浅拷贝

1.概念:除了第一层地址不共享,第二层以上的地址都共享,就是浅拷贝

2.对象的拷贝方法

  1. Object.assign()
  2. {…obj}

3.数组的浅拷贝

  1. […arr]
  2. arr.slice(0)
  3. [].concat(arr)
  4. arr.filter((item)=>item)
  5. _.clone(arr) lodash的方法
 var Person = {name: "老刘",age: 50,children: {name: "小刘",age: 20}}// 对象浅拷贝// 方法1 // var newPerson=Object.assign({},Person)// 方法二var newPerson = { ...Person }Person.name = "老老刘"Person.children.name = "小小刘"console.log(Person);console.log(newPerson);console.log(newPerson === Person);//falseconsole.log(newPerson.children === Person.children);//true// 数组浅拷贝var arr = ["00", ["11", 22], { id: 1, name: "aa" }, { id: 2, name: "bb" }]// var arr1=[...arr]// var arr1=arr.slice(0)// var arr1=[].concat(arr)var arr1 = arr.filter(function(item){return item})arr1[0] = "99"arr1[1][0] = "zzz"console.log(arr1);console.log(arr);

   // 使用lodash的clone,实现浅拷贝,数组与对象的浅拷贝var arr=[11,[22,33],44]var arr1=_.clone(arr)arr[1][0]="zzzz"arr[0]="aaa"console.log(arr);console.log(arr1);var obj={id:1,name:"刘德华",children:{id:2,name:"小小易"}}var obj1=_.clone(obj)obj.name="zzzz"obj.children.name="ffff"console.log(obj);console.log(obj1);
5.lodash的使用

1复制lodash.js

.https://www.bootcdn.cn/lodash.js/

2.打开官网,查文档

https://www.lodashjs.com/

6.深克隆

1.如何判断引用类型?

1.Object.prototype.toString.call(对象名)

​ 2.constructor.name

2.实现深克隆的方法?

  1. js提供的

    JSON.stringify和JSON.parse能够实现深克隆,但是会丢失方法

  var p=JSON.parse(JSON.stringify(person0))

  1. 自己写

        //------------自己写深克隆---------var person0 = {id: 1,name: "蔡徐坤",children: {id: 11,name: "小刘"}}console.log(p);function deep(o) {let temp;if (Object.prototype.toString.call(o).includes("Object")) {temp = {}} else if (Object.prototype.toString.call(o).includes("Array")) {temp = []}for (const key in o) {if (Object.hasOwnProperty.call(o, key)) {// console.log(o[key]);//    如果是引用数据类型,进行递归if (typeof o[key] === "object") {temp[key] = deep(o[key])// console.log(deep(o[key]));} else {// 如果是值类型,直接赋值temp[key] = (o[key])}}}return temp}var person1 = deep(person0)person0.children.name = "jj"// console.log(person0);// console.log(person1);/* 数组实现深克隆*/var arr0=[11,[22,33],44]var arr1=deep(arr0)arr0[1][0]="hhh"console.log(arr0);console.log(arr1);

  2. 使用lodash cloneDeep

   var person2 = {id: 1,name: "蔡徐坤",children: {id: 11,name: "小刘"}}var person3 = _.cloneDeep(person2)person2.children.name = "mmmm"console.log(person2);console.log(person3);
7.闭包

1.概念:

函数嵌套函数,内部函数可以访问外部函数的变量和参数,变量和参数不会被垃圾回收机制所回收

2.闭包的好处

  1. 减少全局变量的污染
  2. 实现缓存

3.形成闭包的3个条件

  1. 函数嵌套函数
  2. 利用作用域(局部/全局)
  3. GC(垃圾回收机制)被使用就不会回收(标记清除法,引用计数法)

4.闭包的优点

  1. 保存变量,让一个变量长期驻扎在内存中,不会被释放’
 //    对于outer来说,a是局部变量function outer() {var a=100//    对于inner来说,a是全局变量function inner(){a+10}return inner}var f=outer()console.log(f);
8.节流和防抖

降低执行频率,稀释执行次数

​ 节流 throttle

  // 节流 throttlevar box = document.querySelector(".box")box.onmousemove = throttle(function (e) {console.log(e);console.log(this);console.log(1);}, 100)// throttle页面加载执行function throttle(callback, delay = 600) {let start = Date.now()return function (e) {let end = Date.now()if (end - start >= delay) {callback.bind(this)(e)console.log(this);console.log(e);//给start重写标记开始的时间start = end}}}

​ 防抖 debounce

   var box = document.querySelector(".box")// 防抖 debouncebox.onmousemove = debounce(function (e) {console.log(e);console.log(this);console.log(1);}, 100)function debounce(callback, delay = 600) {var timer;return function (evt) {let self = thisclearTimeout(timer)timer = setTimeout(function () {console.log(this);callback.call(self, evt)// callback.call(self, evt);}, delay)}}

9.盒子拖拽.(原型链+继承+构造函数)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 100px;height: 100px;background-color: pink;position: absolute;}.boxRed {width: 100px;height: 100px;background-color: red;position: absolute;top: 115px;}.boxYellow {width: 100px;height: 100px;background-color: yellow;position: absolute;top: 300px;}</style>
</head><body><div class="box"></div><div class="boxRed"></div><div class="boxYellow"></div><script>// 原型拖拽function DragBox(cls) {this.el = document.querySelector(cls)}DragBox.prototype = {constructor: DragBox,dragStart() {let self = thisthis.el.onmousedown = function (e) {let disX = e.offsetXlet disY = e.offsetYself.dragIng(disX, disY)self.dragEnd()}},dragIng(x, y) {let self = thisdocument.onmousemove = function (e) {console.log(this);self.el.style.left = e.pageX - x + "px"self.el.style.top = e.pageY - y + "px"}},dragEnd() {document.onmouseup = function () {document.onmousemove = document.onmouseup = null}},}new DragBox(".box").dragStart()// 红色继承function DragBoxLimit(el) {DragBox.call(this, el)}DragBoxLimit.prototype = new DragBox;DragBoxLimit.prototype.dragIng = function (x, y) {let self = this;document.onmousemove = function (e) {let mX = e.pageX - xlet mY = e.pageY - yif (mX < 0) {mX = 0}if (mY < 0) {mY = 0}self.el.style.left = mX + "px"self.el.style.top = mY + "px"}}new DragBoxLimit(".boxRed").dragStart()// 黄色继承function DragBoxLimitText(el) {DragBox.call(this, el)}DragBoxLimitText.prototype = new DragBox;DragBoxLimitText.prototype.dragIng = function (x, y) {let self = this;document.onmousemove = function (e) {let mX = e.pageX - xlet mY = e.pageY - yif (mX < 0) {mX = 0}if (mY < 0) {mY = 0}self.el.style.left = mX + "px"self.el.style.top = mY + "px"self.el.innerHTML = "top:" + self.el.style.top + "<br>left:" + self.el.style.left}}new DragBoxLimitText(".boxYellow").dragStart()</script>
</body></html>

10.盒子拖拽(类)


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 100px;height: 100px;background-color: pink;position: absolute;}.boxRed {width: 100px;height: 100px;background-color: red;position: absolute;top: 115px;}.boxYellow {width: 100px;height: 100px;background-color: yellow;position: absolute;top: 300px;}</style>
</head><body><div class="box"></div><div class="boxRed"></div><div class="boxYellow"></div><script>class box {constructor(el) {this.el = document.querySelector(el)}dragStart() {let self = thisthis.el.onmousedown = function (e) {let disX = e.pageX-this.el.offsetLeftlet disY = e.offsetYself.dragIng(disX, disY)self.dragEnd()}}dragIng(x, y) {let self = thisdocument.onmousemove = function (e) {console.log(this);self.el.style.left = e.pageX - x + "px"self.el.style.top = e.pageY - y + "px"}}dragEnd() {document.onmouseup = function () {document.onmousemove = document.onmouseup = null}}}class yellowBox extends box {constructor(el) {super(el)// this.left=e.pageX-e.offsetX}dragIng(x, y) {let self = thisdocument.onmousemove = function (e) {console.log(this);self.el.style.left = e.pageX - x + "px"self.el.innerHTML = "left:" + self.el.style.leftself.el.style.top = e.pageY - y + "px"self.el.innerHTML = "top:" + self.el.style.top + "<br>left:" + self.el.style.leftconsole.log( self.el.style.left);}}}class RedBox extends box {constructor(el) {super(el)// this.left=e.pageX-e.offsetX}dragIng(x, y) {let self = thisdocument.onmousemove = function (e) {console.log(this);let mX = e.pageX - xlet mY = e.pageY - yif (mX < 0) {mX = 0}if (mY < 0) {mY = 0}self.el.style.left = mX + "px"self.el.style.top = mY + "px"}}}var b = new yellowBox(".boxYellow")var p = new box(".box")var r=new RedBox(".boxRed")r.dragStart()b.dragStart()p.dragStart()</script>
</body></html>

11.tab栏切换

在这里插入图片描述

 var Main = document.querySelectorAll(".main")for (var i = 0; i < TabItem.length; i++) {TabItem[i].onclick = change(i)//change会被执行4次// console.log(TabItem[i].onclick);}function change(n) {return function (e) {for (var i = 0; i < TabItem.length; i++) {TabItem[i].className = "tab-item"// 下面的图片Main[i].className = "main"}// e.target.className="tab-item active"this.className = "tab-item active"console.log(this);// 下面的图片Main[n].className = "main selected"}}

这篇关于js高级(代理,浅拷贝深拷贝,节流和防抖,闭包.hasOwnProperty)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/168393。

相关文章

前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...
JS 实现复制到剪贴板的几种方式小结

JS 实现复制到剪贴板的几种方式小结

《JS实现复制到剪贴板的几种方式小结》本文主要介绍了JS实现复制到剪贴板的几种方式小结,包括ClipboardAPI和document.execCommand这两种方法,具有一定的参考价值,感兴趣的... 目录一、Clipboard API相关属性方法二、document.execCommand优点：缺点：
阅读更多...
深入解析Spring TransactionTemplate 高级用法(示例代码)

深入解析Spring TransactionTemplate 高级用法(示例代码)

《深入解析SpringTransactionTemplate高级用法(示例代码)》TransactionTemplate是Spring框架中一个强大的工具,它允许开发者以编程方式控制事务,通过... 目录1. TransactionTemplate 的核心概念2. 核心接口和类3. TransactionT
阅读更多...
Java中ArrayList的8种浅拷贝方式示例代码

Java中ArrayList的8种浅拷贝方式示例代码

《Java中ArrayList的8种浅拷贝方式示例代码》：本文主要介绍Java中ArrayList的8种浅拷贝方式的相关资料,讲解了Java中ArrayList的浅拷贝概念,并详细分享了八种实现浅... 目录引言什么是浅拷贝？ArrayList 浅拷贝的重要性方法一：使用构造函数方法二：使用 addAll(
阅读更多...
Node.js 中 http 模块的深度剖析与实战应用小结

Node.js 中 http 模块的深度剖析与实战应用小结

《Node.js中http模块的深度剖析与实战应用小结》本文详细介绍了Node.js中的http模块,从创建HTTP服务器、处理请求与响应,到获取请求参数,每个环节都通过代码示例进行解析,旨在帮... 目录Node.js 中 http 模块的深度剖析与实战应用一、引言二、创建 HTTP 服务器：基石搭建（一
阅读更多...
Python中列表的高级索引技巧分享

Python中列表的高级索引技巧分享

《Python中列表的高级索引技巧分享》列表是Python中最常用的数据结构之一,它允许你存储多个元素,并且可以通过索引来访问这些元素,本文将带你深入了解Python列表的高级索引技巧,希望对... 目录1.基本索引2.切片3.负数索引切片4.步长5.多维列表6.列表解析7.切片赋值8.删除元素9.反转列表
阅读更多...
正则表达式高级应用与性能优化记录

正则表达式高级应用与性能优化记录

《正则表达式高级应用与性能优化记录》本文介绍了正则表达式的高级应用和性能优化技巧,包括文本拆分、合并、XML/HTML解析、数据分析、以及性能优化方法,通过这些技巧,可以更高效地利用正则表达式进行复杂... 目录第6章：正则表达式的高级应用6.1 模式匹配与文本处理6.1.1 文本拆分6.1.2 文本合并6
阅读更多...
使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错：ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.
阅读更多...
JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
高效+灵活，万博智云全球发布AWS无代理跨云容灾方案！

高效+灵活，万博智云全球发布AWS无代理跨云容灾方案！

摘要 近日，万博智云推出了基于AWS的无代理跨云容灾解决方案，并与拉丁美洲，中东，亚洲的合作伙伴面向全球开展了联合发布。这一方案以AWS应用环境为基础，将HyperBDR平台的高效、灵活和成本效益优势与无代理功能相结合，为全球企业带来实现了更便捷、经济的数据保护。 一、全球联合发布 9月2日，万博智云CEO Michael Wong在线上平台发布AWS无代理跨云容灾解决方案的阐述视频，介绍了
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2