JS-part14.3-了解对象 / 数据劫持_js 劫持对象原型-CSDN博客

本文链接：https://blog.csdn.net/Xiaolei233/article/details/120192545

本文探讨JavaScript对象，特别是`for in`循环的工作原理，解释为何某些属性未被遍历到。通过介绍`hasOwnProperty()`和`defineProperty()`方法，特别是`defineProperty()`在数据劫持中的应用，阐述了数据劫持的概念和意义。数据劫持允许开发者隐藏属性并控制其读写方式，从而实现不直接操作DOM而仅关注数据更新的效果。

摘要由CSDN通过智能技术生成

Javascript

对象

对象

对象
  + 我们数据类型的一种
  + 以键值对的形式存储数据
  + 因为 __proto__ 和 原型链 可以访问自己没有的属性

for in 循环

for in 循环
  + 专门遍历对象
  + 遍历对象身上的所有属性
  + 遍历对象身上所有的 可枚举 的属性(包括原型链上的所有 可枚举 属性)
    => 一种是自定义的属性
    => 我们可以自己设置为可枚举属性

function Person(){
   
    this.name = 'Jack'
    this.age = 18
    this.gender = '男'
}

Person.prototype.sayHi = function(){
    console.log('hello world') }

let p1 = new Person()
console.log(p1)

for(key in p1){
   
    console.log('我执行了', key )
}

遍历到了 4 个属性/方法
在这里插入图片描述

而对象自己的 contructor 属性和以下这些方法并没有被遍历出来

在这里插入图片描述
问题:

为啥? (因为可枚举标志为 false, 不是可枚举属性)
如何判断某个属性是对象自己身上的还是原型链上的?
因为自己的可以修改, 而原型上的不能轻易修改, 因为是和其他实例共用的

我们来看看这些对象自己的方法

对象自己的方法

hasOwnProperty()

=> 查看是不是自己的属性
=> 语法: 对象.hasOwnProperty('你要检测的属性名')

console.log(p1.hasOwnProperty('name'))  // true
console.log(p1.hasOwnProperty('sayHi'))  // false

在这里插入图片描述

defineProperty() 数据劫持

=> 一种给对象添加属性的方法
=> 我可以给一个我设置的属性设置各种各样的行为状态(例如: 是否可修改, 是否可枚举)
=> 语法: Object.defineProperty(给哪一个对象添加, 添加的 key, {
              所有添加的设置
          })

// 数据劫持
let obj = {
   
    name: 'Jack'
}
// 普通添加
obj.age = 18

// 数据劫持
Object.defineProperty(obj, 'gender', {
   
    // 对 obj.gender 属性进行一系列的配置
})

console.log