[Remedy] JS Soul Questions Issue 26: Practice ES 14 Methods of Operating Objects

introduction

The content to be explained in this article is about ES 14种操作对象的方法, so if I can ask you questions today, let's explore it together.

Those who look up at the stars should not be laughed at

ES 14 ways to manipulate objects

Get prototype

var obj = {
    
    a:1,b:2};
// 1.获取原型 [[GetPrototypeOf]]
var proto = Object.getPrototypeOf(obj);
console.log(proto);
console.log(obj.__proto__);
console.log(Object.prototype);

The print result is as follows:

Set up the prototype

var obj = {
    
     a: 1, b: 2 };
// 2.设置原型 [[SetPrototypeOf]]
Object.setPrototypeOf(obj, {
    
     c: 3, d: 4 });
// 同样也可以采用如下两种方式，直接赋值
// obj.__proro__ = xxx;
// Object.prototype = xxx;
console.log(obj);

The print result is as follows:

Scalability of obtaining objects

var obj = {
    
     a: 1, b: 2 };
// 3.获取对象的可拓展性 [[IsExtensible]]
var extensible = Object.isExtensible(obj);
console.log(extensible);
// 冻结对象
Object.freeze(obj);
var extensible2 = Object.isExtensible(obj);
console.log(extensible2);

The print result is true false.

Oh, from which we found a new thing freeze, action is frozen object , there is a related seal, called a closed object , (referred to as autistic ... joke ^_^), or raise your example, compare, first to introduce seala closed object :

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);

The printing results are as follows, summarizing three points: unmodifiable, undeletable, and writable . Plus readable.

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 (var key in obj) {
    
    
  console.log(obj[key]);
}

The printing results are as follows, summarizing three points: unmodifiable, undeletable, unwritable , only readable.

Get own properties

var obj = {
    
     a: 1, b: 2 };
// 4.获取自有属性 [[getOwnProperty]]
Object.setPrototypeOf(obj, {
    
     c: 3, d: 4 });
console.log(Object.getOwnPropertyNames(obj));

The answer is [ 'a', 'b' ].

Prohibited extension

var obj = {
    
     a: 1, b: 2 };
// 5.禁止拓展对象 [[PreventExtensions]]
Object.preventExtensions(obj);
obj.c = 3;
console.log(obj);
delete obj.a;
console.log(obj);

The answer is { a: 1, b: 2 }and { b: 2 }we can not objobject to expand, but you can delete it. Simply put, it is forbidden to add attributes, but attributes can be deleted .

Intercept object operation

// var obj = { a: 1, b: 2 };
// 6.拦截对象操作 [[DefineOwnProperty]]
// Object.defineProperty()

Determine whether it is its own attribute

var obj = {
    
     a: 1, b: 2 };
// 7.判断是否是自身属性 [[HasProperty]]
console.log(obj.hasOwnProperty('a'));

The answer is true.

Get object properties

var obj = {
    
     a: 1, b: 2 };
// 8.获取对象属性 [[Get]]
console.log('c' in obj);
console.log('a' in obj);
console.log(obj.a);

The print result is as follows:

false
true
1

Set object properties

var obj = {
    
     a: 1, b: 2 };
// 9.设置对象属性 [[SET]]
obj.a = 3;
obj['b'] = 4;
console.log(obj);

Answer { a: 3, b: 4 }.

Delete object properties

var obj = {
    
     a: 1, b: 2 };
// 10.删除对象属性 [[Delete]]
delete obj.a;
console.log(obj);

The answer is { b: 2 }.

Enumerate object properties

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

1
2

Get key collection

var obj = {
    
     a: 1, b: 2 };
// 12.获取键集合 [[OwnPropertyKeys]]
console.log(Object.keys(obj));

answer [ 'a', 'b' ]

Call functions

// 13.调用函数
var obj = {
    
     a: 1, b: 2 };
function test() {
    
     }
test();
obj.test = function () {
    
     }
obj.test();

new instantiates an object

// 14.实例化对象
function Test() {
    
     };
new Test();

At last

The output of articles is not easy, and I hope you all support a wave!

Past selections:

Note Warehouse of Little Lion Front End

Visit Chaoyi's blog , which is convenient for friends to read and play~

学如逆水行舟，不进则退