装饰器--修饰类方法（知识扩展） · Vue&&TypeSprict--基础总结

[TOC] >[success] # 知识扩展 -- Object.defineProperty 参考资料: [MDN]([https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/Object/defineProperty](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)) ~~~ 1.想了解类中的方法装饰器，就需要先了解'es5'中的'Object.defineProperty', 简单的说修饰方法的装饰器是基于'es5'提供的这个api实现的，如果浏览器不支持'es5' 其实变相的来说装饰器会失效 2.Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。 3.Object.defineProperty(obj, prop, descriptor) 有三个参数分别是： 3.1.'obj'要在其上定义属性的对象。 3.2.'prop'要定义或修改的属性的名称。 3.3.'descriptor'将被定义或修改的属性描述符。 4.返回值被传递给函数的对象。 ~~~ >[info] ## 主要的知识点对 3.3 中的'descriptor' 具体展开说明 ~~~ 1.数据描述符和存取描述符。数据描述符是一个具有值的属性，该值可能是可写的，也可能不是可写的。存取描述符是由getter-setter函数对描述的属性。描述符必须是这两种形式之一；不能同时是两者 2.是个对象里面有六个属性，'configurable','enumerable','value','writable','get','set': 2.1.'configurable' -- 当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false。 2.2.'enumerable' -- 当且仅当该属性的'enumerable'为true时，该属性才能够出现在对象的枚举属性中。默认为 false。 2.3.'value' -- 该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 'undefined'。 2.4.'writable' -- 当且仅当该属性的'writable'为true时，'value'才能被[赋值运算符] 2.5.'get' -- 一个给属性提供 'getter' 的方法，如果没有 'getter' 则为 'undefined'。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入'this'对象（由于继承关系，这里的'this'并不一定是定义该属性的对象）。默认为'undefined' 2.6.'set' --一个给属性提供 'setter' 的方法，如果没有 'setter' 则为 'undefined'。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。默认为'undefined' ~~~ >[danger] ##### 对enumerable-- 是否可枚举详细讲解 ~~~ 1. enumerable定义了对象的属性是否可以在 for...in 循环和 Object.keys() 中被枚举。 ~~~ ~~~ const obj = {name:'wang',age:27} Object.defineProperty(obj,'name',{ enumerable:true }) Object.defineProperty(obj,'age',{ enumerable:false }) for(var item in obj){ console.log(item) } 打印结果： name ~~~ >[danger] ##### 对value 和 Writable -- 属性值和是否可以写详细讲解 ~~~ 1. 'vaule' 可以重新定义该属性的值，可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 'undefined'。 2.'Writable' 是否可以对值重新赋值运算,true 可以 false 不可以 ~~~ ~~~ const obj = {name:'wang',age:27} Object.defineProperty(obj,'name',{ writable:true, value:'c' }) Object.defineProperty(obj,'age',{ writable:false, value:18 }) obj.name = '重新赋值' obj.age = 0 // 会已经报错不能重新赋值 console.log(obj.name) // 打印结果：重新赋值 console.log(obj.age) // 异常了 ~~~ >[danger] ##### 对configurable -- 修改属性详细讲解 ~~~ 1.具体可以看'MDN' 中的详解，简单的说就是如果配置为false，则其他配置不可以进行第二次配值，也无法给属性赋值，简单可以理解成锁 2.'configurable'特性表示对象的属性是否可以被删除，以及除value和writable特性外的其他特性是否可以被修改，详解看案例二 ~~~ * 案例选自MDN ~~~ var o = {}; // Object.defineProperty(o, "a", { get : function(){return 1;}, // configurable : false } ); // throws a TypeError Object.defineProperty(o, "a", {configurable : true}); // throws a TypeError Object.defineProperty(o, "a", {enumerable : true}); // throws a TypeError (set was undefined previously) Object.defineProperty(o, "a", {set : function(){}}); // throws a TypeError (even though the new get does exactly the same thing) Object.defineProperty(o, "a", {get : function(){return 1;}}); // throws a TypeError Object.defineProperty(o, "a", {value : 12}); console.log(o.a); // logs 1 delete o.a; // Nothing happens console.log(o.a); // logs 1 // 例子二 var o = {a:'1'}; Object.defineProperty(o, "a", {value : 12,configurable : false }); o.a = 19 console.log(o.a); // 19 ~~~ >[danger] ##### 属性的默认值到底什么时候生效(重要) * 案例选MDN ~~~js var o = {}; o.a = 1; // 等同于 : Object.defineProperty(o, "a", { value : 1, writable : true, configurable : true, enumerable : true }); // 另一方面， Object.defineProperty(o, "a", { value : 1 }); // 等同于 : Object.defineProperty(o, "a", { value : 1, writable : false, configurable : false, enumerable : false }); o.a = 0 // 报错 ~~~ >[danger] ##### get 和 set -- 取值和赋值 * MDN 案例 ~~~js function Archiver() { var temperature = null; var archive = []; Object.defineProperty(this, 'temperature', { get: function() { console.log('get!'); return temperature; }, set: function(value) { temperature = value; archive.push({ val: temperature }); } }); this.getArchive = function() { return archive; }; } var arc = new Archiver(); arc.temperature; // 'get!' arc.temperature = 11; arc.temperature = 13; arc.getArchive(); // [{ val: 11 }, { val: 13 }] ~~~ 或 ~~~js var pattern = { get: function () { return 'I alway return this string,whatever you have assigned'; }, set: function () { this.myname = 'this is my name string'; } }; function TestDefineSetAndGet() { Object.defineProperty(this, 'myproperty', pattern); } var instance = new TestDefineSetAndGet(); instance.myproperty = 'test'; // 'I alway return this string,whatever you have assigned' console.log(instance.myproperty); // 'this is my name string' console.log(instance.myname);继承属性 ~~~ >[info] ## get /set /value 不能共存 ~~~ 1. 首先get /set 就是实现value，因此可以推论出本身就不能共存，实际效果如下表 ~~~ | | configurable | enumerable |value |writable |get | set | | --- |--- | --- | --- |--- | --- |--- | |数据描述符 | Yes | Yes | Yes | Yes| No| No| |存取描述符 | Yes| Yes| No|No| Yes| Yes|