导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

针对性攻坚(TODO)

认知

不要因为 Vue 使用到了 Object.defineProperty() 数据劫持，就把它和 Proxy 混为一谈。它俩不是一个东西

• Object.defineProperty(obj, prop, descriptor) 是直接处理 obj，然后当操作 obj 时，会在 set、get 方法中进行拦截
  • 对 obj 本身操作
  • 给 obj 上新增没有的属性
• Proxy(target, handler) 是通过处理 obj 以后，是返回了一个代理对象，你是通过操作这个代理对象，来对数据做操作的
  • 创建一个 obj 的代理，中间隔了一层交流
  • 相比 defineProperty 少了个 prop 参数，因为是对已有的 obj 操作、处理

功能

自定义对象属性的获取、赋值、枚举、函数调用等功能

⭐️ 用法

getter、setter 基本用法

let target = {
  a: 1,
  b: 2
}

let proxy = new Proxy(target, {
  get(target, prop) {
    console.log('This is property value ' + target[prop]);
    return target[prop];
  },
  set(target, prop, value) {
    target[prop] = value;
  }
});

console.log("proxy.a", proxy.a); // 走了代理 This is ...
console.log("target.a", target.a); // 直接访问，没走代理。没显示 This is ...
proxy.b = 3;
console.log("target.b", target.b); // 3
console.log("proxy.b", proxy.b); // 3
console.log(proxy); // Proxy {a: 1, b: 2}

处理数组、函数

• Object.defineProperty 没法直接处理数组
• Proxy 可以。函数对象和数组都行

let arr = [
  { name: 'Lance', age: 27 },
  { name: 'GC', age: 31 },
  { name: 'Jerry', age: 29 },
  { name: 'Sherry', age: 30 }
];

let persons = new Proxy(arr, {
  get(arr, prop) {
    return arr[prop];
  },
  set(arr, prop, value) {
    arr[prop] = value;
  }
});

persons[0] = { name: 'Xi', age: 30 }
console.log(arr, persons);
// [
//   { name: 'Xi', age: 30 },
//   { name: 'GC', age: 31 },
//   { name: 'Jerry', age: 29 },
//   { name: 'Sherry', age: 30 }
// ] [
//   { name: 'Xi', age: 30 },
//   { name: 'GC', age: 31 },
//   { name: 'Jerry', age: 29 },
//   { name: 'Sherry', age: 30 }
// ]

let fn = function() {
  console.log('I am a function. ');
}

fn.a = 123;

let newFn = new Proxy(fn, {
  get(fn, prop) {
    return fn[prop] + ' This is a Proxy return';
  }
});

console.log(newFn.a); // 123 This is a Proxy return

has

• a 不在 proxy 本身身上，是 proxy 从 target 代理来的

let target = {
  a: 1,
  b: 2
}

let proxy = new Proxy(target, {
  get(target, prop) {
    return 'GET: ' + prop + ' = ' + target[prop];
  },
  set(target, prop, value) {
    target[prop] = value;
    console.log('SET: ' + prop + ' = ' + value);
  },
  has(target, prop) {
    console.log(target[prop]);
  }
});

console.log('a' in proxy); // false
console.log(proxy); // a, b 在 Proxy 的 Target 下

deleteProperty

• 经过了代理 deleteProperty 删除了 target 中的 b

let target = {
  a: 1,
  b: 2
}

let proxy = new Proxy(target, {
  get(target, prop) {
    return 'GET: ' + prop + ' = ' + target[prop];
  },
  set(target, prop, value) {
    target[prop] = value;
    console.log('SET: ' + prop + ' = ' + value);
  },
  has(target, prop) {
    return Reflect.has(target, prop);
  },
  deleteProperty(target, prop) {
  	delete target[prop];
    console.log(1);
  }
});

delete proxy.b;
console.log("proxy", proxy);
console.log("target", target);

ES - 14 种对象操作方法

获取原型 [[GetPrototypeOf]]

• 通过原型方法: Object.getPrototypeOf(obj)
• 通过 proto : obj.proto
• 通过构造函数的原型属性: 构造函数.prototype

var obj = { a: 1, b: 2 };
var proto = Object.getPrototypeOf(obj);
console.log(proto); // Object.prototype
console.log(obj.__proto__);
console.log(Object.prototype);

设置原型 [[SetPrototypeOf]]

• 通过 Object.setPrototypeOf(obj, xxx)
• 通过 obj.proto = xxx
• 通过 Object.prototype = xxx

var obj = { a: 1, b: 2 };
Object.setPrototypeOf(obj, { c: 3, d: 4 });
// obj.__proto__ = { c: 3, d: 4};
// Object.prototype = { c: 3, d: 4 };
console.log(obj);

获取对象的可扩展性 [[IsExtensible]]

Object.isExtensible() 方法判断一个对象是否是可扩展的（是否可以在它上面添加新的属性）。

var extensible = Object.isExtensible(obj);
console.log(extensible); // true
Object.freeze(obj); // 冻结
var extensible2 = Object.isExtensible(obj);
console.log(extensible2); // false

Object.seal

• 不可新增删除，可修改可枚举

var obj = { a: 1, b: 2 };
Object.seal(obj); // 封闭对象
obj.c = 3; // 不可新增
console.log(obj);
delete obj.a; // 不可删除
console.log(obj);
obj.b = 3; // 可修改原有属性
console.log(obj);

for (const key in obj) {
  console.log(`key: ${key} - val: ${obj[key]}`);
}

Object.freeze

• 不可新增删除修改，但可枚举

var obj = { a: 1, b: 2 };
Object.freeze(obj); // 冻结对象
obj.c = 3; // 不可新增
console.log(obj);
delete obj.a; // 不可删除
console.log(obj);
obj.b = 3; // 不可修改
console.log(obj);

for (const key in obj) {
  console.log(`key: ${key} - val: ${obj[key]}`);
}

获取自有属性 [[GetOwnProperty]]

• 获取自有属性，不返回原型上的属性

var obj = { a: 1, b: 2 };
Object.setPrototypeOf(obj, { c: 3, d: 4 });
console.log(Object.getOwnPropertyNames(obj)); // ['a', 'b']

禁止扩展对象 [[PreventExtensions]]

• 不可扩展
• 可删除

var obj = { a: 1, b: 2 };
Object.preventExtensions(obj);
obj.c = 3;
console.log(obj);

delete obj.a;
console.log(obj);

拦截对象操作 [[DefineProperty]]

• Object.defineProperty()

判断是否是自身属性 [[HasOwnProperty]]

• obj.hasOwnProperty(key)

var obj = { a: 1, b: 2 };
console.log(obj.hasOwnProperty('a'));

获取 [[GET]]

var obj = { a: 1, b: 2 };
console.log('c' in obj);
console.log('a' in obj);
console.log(obj.a);

设置 [[SET]]

var obj = { a: 1, b: 2 };
obj.a = 3;
obj['b'] = 4;
console.log(obj);

删除 [[Delete]]

var obj = { a: 1, b: 2 };
delete obj.a;
console.log(obj);

枚举 [[Enumerate]]

var obj = { a: 1, b: 2 };
for (var k in obj) {
	console.log(obj[k]);
}

获取键集合 [[OwnPropertyKeys]]