数据被劫持的那些年(defineProperty的参数及解释)

在之前的一道可能是面试题的题中，我们有提到过一些数据劫持的东西，但有些朋友可能并不了解这些东西，所以本次就做了一次较详细的讲解

一、什么是defineProerty

1.翻译

首先我们先进行翻译，通过翻译我们可以大致了解这个词的意思

dufine：定义

property：属性

简单理解就是可以在一个对象上定义一个新属性，或者修改一个对象的现有属性，并且会返回这个对象(即返回值是对象形式)

2.语法

Object.defineProperty(obj, propperty, descriptor)

3.参数

obj：要绑定属性的目标对象

property：绑定的属性名

descriptor：配置项(对象形式)

个人对defineProperty的理解就是property属性已被劫持，这时你想要使用property这个属性，劫匪会做出相应的反应

二、descriptor的属性值

在这个对象类型的属性中又包括了大致六种属性值

1.value

设置属性默认值，默认为undefined

2.writable

设置属性是否能被修改，默认是不可修改(false)

3.enumerable

属性是否可以被枚举，即是否能被遍历，默认为不可遍历(false)

4.configurable

设置属性是否可以修改或删除，默认为不可修改和删除(false)

5.get

获取属性是要执行的操作

6.set

设置属性要执行的操作

以上则是descriptor的属性值，这写属性值并不是必须全部出现的

三、属性值的解释

准备：

首先我们先做一下准备工作

let obj = {
    a: 1,
    b: 2
}
let obj1 = {}

1.value的使用

value可以给对象设置一个属性

Object.property(obj1,'word',{
    value: 'Hello,word'
})
console.log(obj1.word)//'Hello,word'

可以通过遍历动将obj属性添加到obj1中

for(let i in obj) {
    Object.definedProperty(obj1, i, {
        value: obj[i]
    })
}
console.log(obj1)//{a:1, b:2}

2.writable的使用

writable为true时可以改变属性值

可以结合value实现对象的深拷贝

for(let i in obj) {
    Object.defineProperty(obj1, i,{
        value: obj[i],
        writable: true
    })
}
obj1.b = 3
console.log(obj)//{a:1,b:2}
console.log(obj2)//{a:1,b:3}

3.enumerable的使用

for(let i in obj) {
    Object.definedProperty(obj1,i,{
        value:obj[i],
        writable:true,
        enumerable:false
    })
}
//此时去遍历obj1
for(let x in obj1) {
    console.log(x)
}
//会发现并没有去遍历，

4.configurable的值为false

for(let x in obj) {
    Object.definedProperty(obj1, x,{
        value: obj[i],
        writable: true,
        emumerable: false,
        configurable: true
    })
}
delete obj1.a    //删除a这个属性
console.log(obj1)//会发现a属性并未被删除

5.get的值为一个函数

Object.difineProperty(obj, a, {
    get() {
        return 3
    }
})
console.log(obj.a)//3

get的作用是在当你获取对象中被劫持的那个属性值时，获取的值为get方法所返回的值

并且此时打印obj发现里面并没有a这个属性值了

注：get方法中并没有参数

6.set的值同样也是一个函数

set的作用是在修改对象中被劫持的属性值时，调用set方法中的函数，set方法中有一个参数，参数为所修改的值，具体用法如下

Object.defineProperty(obj,'a',{
    set(val) {
        console.log(val)//打印结果为3
    }
})
obj.a = 3//此时会调用set方法的函数

那么以上便是此次对defineProperty的介绍了，本次干货较多

有问题可以私信或评论啊

另外，可以根据此次内容写一个原生的call(修改this指向的方法)