前言:
今天你们对“js两个括号连用”大约比较重视,看官们都需要剖析一些“js两个括号连用”的相关资讯。那么小编也在网摘上搜集了一些关于“js两个括号连用””的相关知识,希望咱们能喜欢,兄弟们一起来了解一下吧!双向绑定,也就是说js中的数据传到页面,页面中的内容到js,实现同步更新,简单的演示可以直接复制下放HTML代码运行。
在这个例子中,我们使用defineProperty ,Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。详细信息可以自行查看MDN文档。
简单来说,defineProperty 就是一个监听器,监听对象中某一个属性被访问和修改,在Vue2.0中就是采用defineProperty
注意事项
在使用get函数监听属性的时候,不能直接监听当前属性,否则会出现死循环。所以在使用前我将对象进行浅拷贝的原因每一个defineProperty只能对一个对象属性进行监听,所以你必须在使用之前就得知道属性的名字,但是很多时候属性是动态生成的,,所以就很麻烦。
<!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> <h1 id="hname"></h1> <input type="text" id="inputname"></body><script> let stu = { name: "" } let newstu = { ...stu };//浅拷贝 //监听器 Object.defineProperty(stu, "name", { get() { return newstu.name; }, set(val) { if (val === newstu.name) return; newstu.name = val; doubleBind(); } }) //将数据传到页面中 function doubleBind() { document.querySelector("#hname").innerHTML = stu.name; inputname.value = stu.name;//id可以直接使用 } //输入框事件,将页面中数据返回 inputname.oninput = function () { stu.name = inputname.value; } doubleBind() setTimeout(() => { stu.name = "Mary"; }, 1000)</script></html>
defineProperty的弊端很明显,在ES6中提出了Proxy, 在Vue3.0中也将使用Proxy代替defineProperty,在Proxy中,我们可以在监听整一个对象属性的变化。
<!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> <h1 id="hname"></h1> <input type="text" id="inputname"></body><script> let stu = { name: "12354" } //监听器处理函数 //监听器 stu = new Proxy(stu, { get(target, prop) { return target[prop]; }, set(target, prop,val){ if (val === target.prop) return; target[prop] = val; doubleBind(); } }); //将数据传到页面中 function doubleBind() { document.querySelector("#hname").innerHTML = stu['name']; inputname.value = stu['name'];//id可以直接使用 } //输入框事件,将页面中数据返回 inputname.oninput = function () { stu['name'] = inputname.value; } doubleBind() setTimeout(() => { stu['name'] = "Mary"; console.log(stu); }, 1000)</script></html>
对比两个例子,眼尖的friend会发现,第一个例子中我访问对象属性使用的是stu.name,而在第二个例子中使用的是stu[‘name’]的方式。在《javascript高级程序设计》
引用类型的那一章提到:一般来说,访问对象属性时使用的都是点表示法,这也是很多面向对象语言中通用的语法。不过,
在 JavaScript 也可以使用方括号表示法来访问对象的属性。除非必须使用变量来访问属性,否则我们建议使用点表示法。在我们第二个例子Proxy中,prop是一个变量,所以我们使用方括号。特别要注意,stu.name和stu[name]是不一样的,当然如果有外部变量name=“name“,就一样了
最后
想要学习java基础或者进阶java 的同学私信回复 资料领取一线大厂Java面试题总结+阿里巴巴泰山手册+各知识点学习思维导+一份300页pdf文档的Java核心知识点总结!
这些资料的内容都是面试时面试官必问的知识点,篇章包括了很多知识点,其中包括了有基础知识、Java集合、JVM、多线程并发、spring原理、微服务、Netty 与RPC 、Kafka、日记、设计模式、Java算法、数据库、Zookeeper、分布式缓存、数据结构等等。
标签: #js两个括号连用