彻底搞懂Object，前端项目开发流程

而在MDN中关于writable属性的描述为：

当该属性的 writable 键值为 true 时，属性的值，也就是上面的 value，才能被赋值运算符改变。

这里我做个知识补充，让MDN这句描述更为准确。

在面试时有时候会被问到，const声明的变量是否可修改，准确来说可以改，分两种情况：

// 值为基本类型

const a = 1;

a = 2;// 报错

// 值为复杂类型

const b = [1];

b = [1,2];// 报错

const c = [1];

c[0] = 0;

c;// [0]

如果我们const声明变量赋值是基本类型，只要修改值一定报错；如果值是引用类型，比如值是一个数组，当我们直接使用赋值运算符整个替换数组还是会报错，但如果我们不是整个替换数组而是修改数组中某个元素可以发现并不会报错。

这是因为对于引用数据类型而言，变量保存的是数据存放的引用地址，比如b的例子，原本指向是[1]的地址，后面直接要把地址改成数组[1,2]的地址，这很明显是不允许的，所以报错了。但在c的例子中，我们只是把c地址指向的数组中的一位元素改变了，并未修改地址，这对于const是允许的。

而这个特性对于writable也是适用的，比如下面这个例子：

let o = {};

Object.defineProperty(o, ‘age’, {

value: [27],

writable: false

});

// 尝试修改name属性

o.age[0] = 18;

// 再次读取，修改成功

o.age; // 18

你看，修改成功了，所以针对MDNwritable为true才能被赋值运算符改变这句话不一定正确，比如上个例子我们就是用赋值运算符修改了数组索引为0的一项的值，具体问题具体看待，这里做个补充。

descriptor中的存取描述符

OK，我们介绍了descriptor中的数据描述符相关的vaule与writbale，接着聊聊有趣的存取描述符，也就是在vue中也出现过getter、setter方法。

我们知道，JavaScript中对象赋值与取值非常方便，有如下两种方式：

let o = {};

// 通过.赋值取值

o.name = ‘echo’;

//通过[]赋值取值，这种常用于key为变量情况

o[‘age’] = 27;

一个很直观的感受就是，对象赋值就是种瓜得瓜种豆得豆，我们给对象赋予了什么，获取的就是什么。那大家有没有想过这种情况，赋值时我提供1，但取值我希望是2。巧了，这种情况我们就可以使用Object.defineProperty()中的存取描述符来解决这个需求。说直白点，存取描述符给了我们赋值/取值时数据劫持的机会，也就就是在赋值与取值时能自定义做一些操作，

getter函数在获取属性值时触发，注意，是你为某个属性添加了getter在获取这个属性才会触发，如果未定义则为undefined，该函数的返回值将作为你访问的属性值。

setter函数在设置属性时触发，同理你得为这个属性提前定义这个方法才行，设置的值将作为参数传入到setter函数中，在这里我们可以加工数据，若未定义此方法默认也是undefined。

OK，让我们用getter与setter模拟最常见的对象赋值与取值，看个例子：

let o = {};

o.name = ‘听风是风’;

o.name; // ‘听风是风’

//使用get set模拟赋值取值操作

let age;

Object.defineProperty(o, ‘age’, {

get() {

// 直接返回age

return age;

},

set(val) {

// 赋值时触发，将值赋予变量age

age = val;

}

});

o.age = 18;

o.age; // 18

在上面例子模拟中，只要为o赋值setter就会触发，并将值赋予给age，那么在读取值getter直接返回变量age即可。

OK，到这里我们顺利学习了存取描述符setter与getter。

descriptor中的共有属性

最后，让我们了解剩余两个属性configurable与enumerable。

enumerable值类型为Boolean，表示该属性是否可被枚举，啥意思？我们知道对象中有个方法Object.keys()用于获取对象可枚举属性，比如：

let o = {

name: ‘听风是风’,

age: 27

};

Object.keys(o); // [‘name’,‘age’]

通俗点来说，上面例子中的两个属性还是可以遍历访问的，但如果我们设置enumerable为false，就会变成这样：

let o = {

name: ‘听风是风’

};

Object.defineProperty(o, ‘age’, {

value: 27,

enumerable: false

});

// 无法获取keys

Object.keys(o); // [‘name’]

// 无法遍历访问

for (let i in o) {

console.log(i); // ‘name’

};

configurable的值也是Boolean，默认是false，configurable 特性表示对象的属性是否可以被删除，以及除 value 和 writable 特性外的其他特性是否可以被修改。

先说删除，看个例子：

let o = {

name: ‘听风是风’

};

Object.defineProperty(o, ‘age’, {

value: 27,

configurable: false

});

delete o.name;//true

delete o.age;//false

o.name;//undefined

o.age;//18

删除好说，我们来看看它对于其它属性的影响，看个例子：

var o = {};

Object.defineProperty(o, ‘name’, {

get() {

return ‘听风是风’;

},

configurable: false

});

// 报错，尝试通过再配置修改name的configurable失败，因为已经定义过了configurable

Object.defineProperty(o, ‘name’, {

configurable: true

});

//报错，尝试修改name的enumerable为true，失败，因为未定义默认为false

Object.defineProperty(o, ‘name’, {

enumerable: true

});

//报错，尝试新增set函数，失败，一开始没定义set默认为undefined

Object.defineProperty(o, ‘name’, {

set() {}

});

//尝试再定义get，报错，已经定义过了

Object.defineProperty(o, ‘name’, {

get() {

return 1;

}

});

// 尝试添加数据描述符中的vaule，报错，数据描述符无法与存取描述符共存

Object.defineProperty(o, ‘name’, {

value: 12

});

由于前面我们说了，未定义的属性虽然没用代码写出来，但它们其实都有了默认值，当configurable为false时，这些属性都无法被重新定义以及修改。

其它注意点

那么到这里，我们把descriptor中所有属性都介绍完了，在使用中有几点需要强调，这里再汇总一下。

前面概念已经提出对象属性描述符要么是数据描述符（value，writable），要么是存取描述符（get，set），不应该同时存在两者描述符。

var o = {};

Object.defineProperty(o, ‘name’, {

value: ‘时间跳跃’,

get() {

return ‘听风是风’;

}

});

这个例子就会报错，其实不难理解，存取方法就是用来定义属性值的，value也是用来定义值的，同时定义程序也不知道该以哪个为准了，所以用了value/writable其一，就不能用get/set了；不过configurable与enumerable这两个属性可以与上面两种属性任意搭配。

我们在前面已经说了各个属性是有默认值的，所以在用Object.defineProperty()时某个属性没定义不是代表没用这条属性，而是会用这条属性的默认值。

let o = {};

Object.defineProperty(o, ‘name’, {

value: ‘时间跳跃’

});

//等同于

Object.defineProperty(o, ‘name’, {

value: ‘时间跳跃’,

writable: false,

enumerable: false,

configurable: false

});

同理，以下代码也对等：

var o = {};

o.name = ‘听风是风’;

//等同于

Object.defineProperty(o, ‘name’, {

value: ‘听风是风’,

writable: true,

enumerable: true,

configurable: true

});

//等同于

let name = ‘听风是风’;

Object.defineProperty(o, ‘name’, {

get() {

return name;

},

set(val) {

name = val;

},

enumerable: true,

configurable: true

});

关于属性分类与默认值，如下表：

|

| configurable | enumerable | value | writable | get | set |

| — | — | — | — | — | — | — |

| 数据描述符 | 可以 | 可以 | 可以 | 可以 | 不可以 | 不可以 |

| 存取描述符 | 可以 | 可以 | 不可以 | 不可以 | 可以 | 可以 |

| 默认值 | false | false | false | false | undefined | undefined |

现学现用，趁热打铁

=========

那么到这里，我们详细介绍了Object.defineProperty相关属性与用法，趁热打铁，我们活用它来解决一些问题。原本我想通过模拟vue数据双向绑定，模拟const以及解决文章开头面试题，但碍于文章篇幅确实过长了，const模拟大家感兴趣可自行百度，vue数据双向绑定我会另起一篇文章，所以这里就来解决文章开头的题目好了。

我们提取题目细节，年龄只接受正整数（在set中判断），毕竟没人是负年龄，其次对应范围有对应的年龄段，根据年龄返回对应年龄段即可（在get中操作）；

这里直接上function的实现：

function Person() {

// 初始化年龄

let age;

Object.defineProperty(this, “age”, {

get() {

let ageRange = [41, 20, 0],

level = [‘老年’, ‘中年’, ‘少年’];

for (let i = 0; i < ageRange.length; i++) {

// 根据年纪大小返回对应范围

if (age >= ageRange[i]) {

return level[i];

};

};

},

set(val) {

// 年龄只保存正整数

val >= 0 ? age = val : null;

}

});

};

let p = new Person();

p.age = 1;

console.log(p.age); // ‘少年’

p.age = 39;

console.log(p.age); // ‘中年’

p.age = 41;

console.log(p.age); // ‘老年’

值得一提的是，实现代码中我们将需要年龄与相关返回值配置成了数组，而非常理上的if...else if...，这样做的好处是即便修改年龄或者增加年龄范围，我们要做的也仅仅是修改数组配置即可，而不需要对逻辑层中添加更多的if...else。更多条件判断优雅写法欢迎阅读博主这篇文章 提升代码幸福度，五个技巧减少js开发中的if else语句

为什么我不用ES6的class类来实现上面的操作了，因为公司不允许使用ES6，去年学的关于类好多都忘记了…整理这篇文章也花了好长时间，脑袋有点沉，这个改写就留给各位强大的网友吧。

那么到这里，关于Object.defineProperty的介绍就结束了。

补充

==

关于上面这道题，考察的虽然是Object.definedProperty的getter与setter，不过出题人的本意不是希望这么用的，任何对象在定义时候可以添加get，set方法，比如：

let p = {

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

资料领取方式：点击这里免费领取前端全套学习资料

知识点，真正体系化！**

[外链图片转存中…(img-ok4zHnYu-1712340182541)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

资料领取方式：点击这里免费领取前端全套学习资料

[外链图片转存中…(img-Oo0596WJ-1712340182543)]

[外链图片转存中…(img-qKf9V6lm-1712340182545)]