导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

⭐️ getOwnPropertyDescriptor

• configurable 可配置
• enumerable 可枚举
• value 值
• writable 可写

var obj = {
	a: 1
}

console.log(Object.getOwnPropertyDescriptor(obj, 'a'));

⭐️ defineProperty

修改一个已有的属性，或添加一个新的属性

var obj = {};
Object.defineProperty(obj, 'a', {
	value: 2,
  configurable: true,
  writable: true,
  enumerable: true
});

var obj = {};
Object.defineProperty(obj, 'a', {
	value: 2,
  configurable: true,
  writable: false, // 不可写入，但可用 delete 删除
  enumerable: true
});
obj.a = 3; // 写入失败 静默失败，严格模式报错
delete obj.a; // 可以删除

var obj = {};
Object.defineProperty(obj, 'a', {
	value: 2,
  configurable: false, // 禁止配置
  writable: true, // 允许读写
  enumerable: true
})

obj.a = 3; // 可更改

console.log(obj); // { a: 3 }

var obj = {};
Object.defineProperty(obj, 'a', {
	value: 2,
  configurable: false,
  writable: true,
  enumerable: true
})

obj.a = 3;
console.log(obj.a); // 3 更改成功
delete obj.a; //configurable: false 不可以删除
console.log(obj.a); // 3 删除失败

⭐️ getter/setter

get 操作、put 操作

let obj = {a: 1}
obj.a; //属性获取 [[Get]] 默认操作， 
// 查找当前属性，然后如果没有查找原型

obj.a = 3; // 赋值操作[[Put]]
// [[Put]]默认操作
1、先看存不存在 getter,setter
2、不存在，再看 writable 是不是 false 不让修改
3、如果不是，就赋值成功

getter / setter

为了改写默认的 [[Get]], [[Put]] 操作

var obj = {
	log: ['a', 'b'],
  get lastest() {
  	if (this.log.length === 0) {
    	return undefined;
    }
    return this.log[this.log.length - 1];
  }
}
console.log(obj.lastest);

var myObj = {
	get a() {
  	return 2;
  }
}

Object.defineProperty(myObj, 'b', {
	get: function() {
  	return this.a * 2;
  },
  enumerable: true
})
console.log(myObj.a);
console.log(myObj.b);

定义了 get 后，value，writable 这两个属性描述符不可以使用，enumerable，configuable 可以使用

Object.defineProperty(myObj, 'b', {
	get: function() {
  	return 2;
  },
  enumerable: true,
  value: 3  // 报错
})
console.log(myObj.b);

Object.defineProperty(myObj, 'b', {
	get: function(){
  	return 2;
  },
  enumerable: true,
  writable: true  // 报错
})
console.log(myObj.b);

var language = {
	set current(name){
  	this.log.push(name);
  },
  log: []
}
language.current = 'EN';
language.current = 'FA';

console.log(language.log);

get, set 应该成对出现

var obj = {
	get a() {
  	return this._a; // 返回私有变量_a
  },
  set a(val) {
  	this._a = val * 2;
  }
}
obj.a = 3;
console.log(obj.a);

综合

const person = {
	get name() {
  	return this.firstName + ' ' + this.lastName;
  },
  firstName: '',
  lastName: ''
}

person.firstName = 'Yang';
person.lastName = 'Lance';

console.log(person.name); // Yang Lance