本文详细介绍了JavaScript中Object的原型方法，如hasOwnProperty、isPrototypeOf、propertyIsEnumerable等，并探讨了Object的各种方法，包括defineProperties、assign、create等。同时，文章还重点讨论了ES6引入的新特性，如Symbol、Reflect和Proxy，以及如何使用Proxy实现双向数据绑定。此外，还对比了defineProperty和Proxy在对象属性操作上的差异。
目录
1.defineProperties - 用于给对象设置属性的
9.getOwnPropertyDescriptors - 获取对象所有属性的描述符
13.preventExtensions - 将一个对象变的不可扩展(添加属性)
18.seal - 封闭一个对象(不能添加、删除，但能修改)
Object原型方法
1.hasOwnProperty
用于判断一个对象中是否具有某个自带的属性。自带属性，指的是自身就有的，而非继承来的
原型中带有这个属性,判段的时候返回false.---只判断自己中是否有,不判断原型
语法：对象.hasOwnProperty(属性名) - 返回布尔值
2.isPrototypeOf
判断一个对象是否在另一个对象的原型链上
其实就是判段一个对象中的属性和方法能不能被另一个对象所使用
语法：对象.isPrototypeOf(另一个对象) - 返回布尔值
3. propertyIsEnumerable
判断某个属性是否可遍历
语法:对象.propertyIsEnumerable(属性名) - 返回布尔值
4.顶级原型中的toString(只能被对象使用)
用于将对象转成字符串
语法：对象.toString() -- 返回' [object Object] '
精准的检测对象类型的方法toString - 是顶级原型中的toString - 结果是 [object 数据在js中内置的构造函数的名称]
例:
console.log(Object.prototype.toString.call(10)) -- [object Number]
console.log(Object.prototype.toString.call(true)) -- [object Boolean]
console.log(Object.prototype.toString.call('')) -- [object String]
console.log(Object.prototype.toString.call(new Date)) -- [object Date]
console.log(Object.prototype.toString.call(/a/)) -- [object RegExp]
5.valueOf
用于查看对象的具体的值
时间,对象,日期来调用能获取对应的时间戳
6.toLocaleString
用于转字符串的
正常情况下和toString没什么区别
数字对象的原型上也有一个方法 - toLocaleString - 可以将数字进行千分位分割
Object方法
1.defineProperties - 用于给对象设置属性的
属于Object构造函数的方法 - 用于给对象设置属性的
语法：Object.defineProperties(对象, {
属性名: { 对象的描述符 - 给某个属性设置特性
writable: 布尔值, -- 这个属性是否可设置
enumerable: 布尔值, -- 这个属性是否可以遍历
configurable: 布尔值 -- 属性是否可删除
}
})
2. defineProperty - 监视对象属性的
当对象属性的值被修改时，可以监视到，访问对象属性的值的时候，可以监视到
语法：Object.defineProperty(对象, 属性名, {
get() {
当访问对象的这个属性的时候会先触发这个函数
}
当设置对象的属性的值的时候会先执行set方法
set(){
set参数表示将要修改的值是多少
}
双向绑定
改变页面内容 - 对象的值就改变
对象的值改变了 - 页面内容改变
<body>
<input type="text">
</body>
<script>
var obj = {
msg:'你好2023'
}
//实现双向绑定
//改变input中的内容让obj.msg也改变
var ipt = document.querySelector('input')
ipt.oninput = function(){ //只要文本框内容改变就会触发oninput
obj.msg = this.value
}
//改变数据让页面改变 - 监听数据改变
Object.defineProperty(obj,'msg',{
get(){
return ipt.value
},
set(val){ //将要改变的值
ipt.value = val
}
})
</script>3.assign - 拷贝对象(浅拷贝)
用于将一个对象中可遍历的属性复制到另一个目标对象中，返回目标对象
语法:var 新目标对象 = Object.assign(原目标对象, 被复制的对象)
4.create - 创建对象并设置原型和属性
语法:Object.create(原型, 设置属性的对象) - 返回对象
默认都是不能改不能删除
扩展:
1.对象可以没有原型
2.创建对象应该增加一个步骤 - 设置原型
new操作符到底干了什么？
1.在构造函数中创建了空对象
2.给他设置原型对象
3.将this指向他
4.执行构造函数代码
5.返回这个空对象
5.entries-将对象中可遍历的键值对组成一个数组
语法：Object.entries(对象) - 返回数组
6.fromEntries - 将键值对组成的数组转成对象
语法：Object.fromEntries(数组) - 返回对象
7.freeze - 将一个对象冻结
语法：Object.freeze(对象) - 将对象冻结
默认可添加、可删除、修改原型
将obj冻结 - 不可以添加、删除、修改原型
8.isFrozen - 判断对象是否被冻结
语法：Object.isFrozen(对象) - 返回布尔值
默认情况下没有被冻结
9.getOwnPropertyDescriptors - 获取对象所有属性的描述符
10.getPrototypeOf - 获取对象原型
语法：Object.getPrototypeOf(对象) - 返回原型对象
11.hasOwn - 判断对象是否具有某个自带的属性
语法：Object.hasOwn(对象, 属性) - 返回布尔值
12. is - 判断两个数据表面看起来是否相等
语法：Object.is(两个数据) - 返回布尔值
13.preventExtensions - 将一个对象变的不可扩展(添加属性)
语法：Object.preventExtension(对象) - 这个对象就不可以添加属性了
默认情况下是可扩展的
14.isExtensible - 判断一个对象是否可扩展
语法：Object.isExtensible(对象) - 返回布尔值
15.keys - 将对象所有键组成一个数组
语法：Object.keys(对象) - 返回数组 (把所有的键组成一个数组)
16.values - 将对象所有的值组成一个数组
语法：Object.values(对象) - 返回数组 (把所有的值组成一个数组)
17.setPrototypeOf - 给对象设置原型
语法：Object.setPrototypeOf(对象, 原型)
18.seal - 封闭一个对象(不能添加、删除，但能修改)
语法：Object.seal(对象)
区别:封闭可以修改
冻结不可修改
isSealed - 判段是否是封闭的
19.getOwnPropertySymbols
将对象中所有symbol属性，组成一个数组。
20.getOwnPropertyNames( )
获取所有自带的键
ES6的对象操作
1、Symbol
ES6提供的一个函数,用来创建一个数据的
语法：Symbol('字符串') - 返回一个Symbol数据
每个Symbol数据都是唯一的
Symbol的作用，作为键放在对象中使用--给对象添加属性(不会覆盖前面的)
从Symbol中还原原本的字符串 - Symbol数据.desciption
2、Reflect
es6提供的一个对象
用来操作对象的：访问对象的值，设置对象的键值对，删除对象的键值对
因为以前的操作语法，操作完成后我们无法确定操作是否成功 - 对我们后续操作对象有影响
Reflect操作对象的话，操作结束后可以知道我们操作是否成功
语法: 访问对象中的值 - Reflect.get(对象, 属性) - 返回访问到的值/undefined
设置对象中的键值对 - Reflect.set(对象, 属性, 值) - 返回布尔值
删除对象中的键值对 - Reflect.deleteProperty(对象, 属性) - 返回布尔值
3、Proxy
Proxy是es6提供的一个构造函数 - 创建一个所有键值对都被监视起来的对象
语法：new Proxy(对象),{
get(){
},
set(){
}
}
批量的双向绑定
<body>
<input type="text">
</body>
<script>
var obj = {
msg:'hello'
}
var pbj = new Proxy(obj,{
get(o, k,){
// console.log(o, k);
return ipt.value
},
//o代表被监听的对象(obj), k代表监听的属性, v代表将要修改的值
set(o, k, v){
// console.log(o, k, v);
o[k] = v
ipt.value = v
}
})
var ipt = document.querySelector('input')
ipt.oninput = function(){
pbj.msg = this.value
}
</script>defineProperty和Proxy的对比
defineProperty能监视已经存在的属性，动态添加属性和删除属性是监听不到的，但是Proxy可以
defineProperty实现两个标签两个数据的双向绑定
<body>
<input type="text" name="msg">
<input type="text" name="age">
</body>
<script>
var obj = {
msg: '张三',
age: 12
}
//defineProperty实现两个标签两个数据的双向绑定
//1.获取两个文本框
var ipts = document.querySelectorAll('input')
//2.改变input改变数据 -- 伪数组可以用forEach遍历
ipts.forEach(ipt => {
ipt.oninput = function(){
//4.获取当前input的name属性的值
var prop = this.getAttribute('name')
//3.改数据
obj[prop] = this.value
}
})
//改变数据就改变input的值
//遍历对象
for(let key in obj){
//每个键都要被监视
Object.defineProperty(obj,key,{
get(){
//return 对应文本框的value --- return XX.value
var value
ipts.forEach(ipt => {
if(ipt.getAttribute('name') === key){
value = ipt.value
}
})
return value
},
set(val){
//改变对应的文本框的value
// ipt.value = val
ipts.forEach(ipt => {
if(ipt.getAttribute('name') === key){
ipt.value = val
}
})
}
})
}
</script>用Proxy实现两个标签两个数据的双向绑定
<body>
<input type="text" name="msg">
<input type="text" name="age">
</body>
<script>
var obj = {
msg: '张三',
age: 12
}
//1.获取两个文本框
var ipts = document.querySelectorAll('input')
ipts.forEach(ipt => {
ipt.oninput = function(){
//4.获取当前input的name属性的值
var prop = this.getAttribute('name')
//3.改数据
pbj[prop] = this.value
}
})
//改变数据再改变input
var pbj = new Proxy(obj, {
get(o, key) {
// return ipt.value
ipts.forEach(ipt => {
if(ipt.getAttribute('name') === key){
value = ipt.value
}
})
return value
},
set(o, key, value) {
// ipt.value = value
ipts.forEach(ipt => {
if(ipt.getAttribute('name') === key){
ipt.value = value
}
})
}
})
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
