Reflection and Proxy in Front-end JavaScript

1. What is reflection?

The concept of reflection exists in many programming languages, such as Java and C# .

In object-oriented programming, classes and methods are usually defined first, and then objects are created to explicitly call methods, such as the following example:

public class User{
   private String name;
   private Date birthday;
       //....
   public int calculateAgeByBirthday(){
            // .....
   }
}
// Call User u = new User("jack", new Date());
u.calculateAgeByBirthday();

We are familiar with the above calling method. However, when you want to write some abstract frameworks (the frameworks need to interoperate with business-defined classes), since you do not know the members and methods of the business classes, reflection is used to dynamically obtain member variables or call methods.

In the following example, we use reflection to convert json into a Java object.

public static class User {
 private String name;
 public String getName() {
    return name;
 }
   public void setName(String name) {
     this.name = name;
   }
}

// Use reflection to call the object setter method.
public static <T> T fill(Class<T> userClass, Map<String, Object> json) throws Exception {
        Field[] fields = userClass.getDeclaredFields();
        T user = userClass.newInstance();
        for (Field field : fields) {
            // Capitalize the first letter String name = field.getName();
            char[] arr = name.toCharArray();
            arr[0] = Character.toUpperCase(arr[0]);
            System.out.println(new String(arr));
            Method method = userClass.getDeclaredMethod("set" + new String(arr), field.getType());
            Object returnValue = method.invoke(user, json.get(name));
        }
        return user;
}

2. Reflect in JavaScript

JavaScript provides a built-in reflection object Reflect in ES6 , but the reflection in JavaScript is different from Java reflection. First look at the 13 static methods provided by Reflect .

• Reflect.apply(target, thisArg, args)

• Reflect.construct(target, args)

• Reflect.get(target, name, receiver)

• Reflect.set(target, name, value, receiver)

• Reflect.defineProperty(target, name, desc)

• Reflect.deleteProperty(target, name)

• Reflect.has(target, name)

• Reflect.ownKeys(target)

• Reflect.isExtensible(target)

• Reflect.preventExtensions(target)

• Reflect.getOwnPropertyDescriptor(target, name)

• Reflect.getPrototypeOf(target)

• Reflect.setPrototypeOf(target, prototype)

2.1 Reflect.get(target, name, receiver)

The Reflect.get method looks up and returns the name property of the target object. If there is no such property, it returns undefined .

const obj = {
  name: 'jack',
  age: 12,
  get userInfo() {
    return this.name + 'age is ' + this.age;
  }
}

Reflect.get(obj, 'name') // jack
Reflect.get(obj, 'age') // 12
Reflect.get(obj, 'userInfo') // jack age is 12

// If the receiver parameter is passed, when the userInfo() function is called, this refers to the receiver object.
const receiverObj = {
  name: 'Xiaoming',
  age: 22
};

Reflect.get(obj, 'userInfo', receiverObj) // Xiaoming's age is 22

2.2 Reflect.set(target, name, value, receiver)

const obj = {

  name: 'jack',
  age: 12,
  set updateAge(value) {
    return this.age = value;
  },
}
Reflect.set(obj, 'age', 22);
obj.age // 22

// If the receiver parameter is passed, when the updateAge() function is called, this refers to the receiver object.
const receiverObj = {
  age: 0
};

Reflect.set(obj, 'updateAge', 10, receiverObj) // 
obj.age // 22
receiverObj.age // 10

2.3 Reflect.has(obj, name)

Reflect.has method is equivalent to the in operator in name in obj .

const obj = {
  name: 'jack',
}
obj in name // true
Reflect.has(obj, 'name') // true

2.4 Reflect.deleteProperty(obj, name)

Reflect.deleteProperty method is equivalent to delete obj[name] and is used to delete the properties of an object. If the deletion is successful or the deleted attribute does not exist, true is returned; if the deletion fails and the deleted attribute still exists, false is returned.

const obj = {
  name: 'jack',
}
delete obj.name 
Reflect.deleteProperty(obj, 'name')

2.5 Reflect.construct(target, args)

The Reflect.construct method is equivalent to new target(...args) .

function User(name){
  this.name = name;
}
const user = new User('jack');
Reflect.construct(User, ['jack']);
Reflect.getPrototypeOf(obj)
The Reflect.getPrototypeOf method is used to read the __proto__ property of an object.

2.6 Reflect.setPrototypeOf(obj, newProto)

Reflect.setPrototypeOf method is used to set the prototype of the target object. Returns a Boolean value indicating whether the setting was successful.

const obj = {
  name: 'jack',
}
Reflect.setPrototypeOf(obj, Array.prototype);
obj.length // 0

2.7 Reflect.apply(func, thisArg, args)

The Reflect.apply method is equivalent to Function.prototype.apply.call(func, thisArg, args) and is used to execute a given function after binding the this object.

const nums = [1,2,3,4,5];
const min = Math.max.apply(Math, nums);
// Called via Reflect.apply const min = Reflect.apply(Math.min, Math, nums);

2.8 Reflect.defineProperty(target, propertyKey, attributes)

Reflect.defineProperty method is equivalent to Object.defineProperty and is used to define properties for objects.

const obj = {};
Object.defineProperty(obj, 'property', {
  value: 0,
  writable: false
});

Reflect.defineProperty(obj, 'property', {
  value: 0,
  writable: false
});

2.9 Reflect.getOwnPropertyDescriptor(target, propertyKey)

Gets a description object for the specified property.

2.10 Reflect.isExtensible (target)

Returns a Boolean value indicating whether the current object is extensible.

2.11 Reflect.preventExtensions(target)

Used to make an object non-extensible. It returns a Boolean value indicating whether the operation was successful.

2.13 Reflect.ownKeys (target)

Reflect.ownKeys method is used to return all properties of an object.

const obj = {
  name: 'jack',
  age: 12,
  get userInfo() {
    return this.name + 'age is ' + this.age;
  }
}
Object.getOwnPropertyNames(obj)
Reflect.ownKeys(obj) // ['name', 'age', 'userInfo']

3. Proxy in JavaScript

Proxies are very useful in programming. They can add a layer of "interception" before the target object to implement some common logic.

Proxy constructorProxy (target, Proxy ) parameters:

• target : The target object of the proxy, which can be any type of object, including built-in arrays, functions, and proxy objects.
• handler : It is an object whose properties provide the processing function when certain operations occur.

const user = {name: 'hello'}
const proxy = new Proxy(user, {
  get: function(target, property) { // Triggered when reading the property return 'hi';
  }
});
proxy.name // 'hi'

3.1 Interception operations supported in Proxy

• handler.get(target, property, receiver)
• handler.set(target, property, value, receiver)
• handler.has(target, property)
• handler.defineProperty(target, property, descriptor)
• handler.deleteProperty(target, property)
• handler.getOwnPropertyDescriptor(target, prop)
• handler.getPrototypeOf(target)
• handler.setPrototypeOf(target, prototype)
• handler.isExtensible(target)
• handler.ownKeys(target)
• handler.preventExtensions(target)
• handler.apply(target, thisArg, argumentsList)
• handler.construct(target, argumentsList, newTarget)

3.2 get()

It is used to intercept the read operation of a certain attribute. It can accept three parameters, namely the target object, the attribute name and proxy instance itself. The last parameter is optional.

const user = {
  name: 'jack'
}
// Return a value only if the attribute exists, otherwise throw an exception.
const proxy = new Proxy(user, {
  get: function(target, property) {
    if (!(property in target)) {
       throw new ReferenceError(`${property} does not exist.`);
    }
    return target[property];
  }
});
proxy.name // jack
proxy.age // ReferenceError: age does not exist.

We can define some common proxy objects and then let child objects inherit them.

// Return a value only if the attribute exists, otherwise throw an exception.
const proxy = new Proxy({}, {
  get: function(target, property) {
    if (!(property in target)) {
       throw new ReferenceError(`${property} does not exist.`);
    }
    return target[property];
  }
});
let obj = Object.create(proxy);
obj.name = 'hello'
obj.name // hello
obj.age // ReferenceError: age does not exist.

3.3 set()

It is used to intercept the assignment operation of a certain attribute. It can accept four parameters, namely the target object, attribute name, attribute value and Proxy instance itself. The last parameter is optional.

// Character type attribute length check let sizeValidator = {
  set: function(target, property, value, receiver) {
    if (typeof value == 'string' && value.length > 5) {
       throw new RangeError('Cannot exceed 5 characters.');
    }
    target[property] = value;
    return true;
  }
};

const validator = new Proxy({}, sizeValidator);
let obj = Object.create(validator);
obj.name = '123456' // RangeError: Cannot exceed 5 characters.
obj.age = 12 // 12

3.4 has()

Used to intercept the HasProperty operation, that is, this method will take effect when determining whether an object has a certain property. Such as the in operator.

It accepts two parameters, the target object and the attribute name to be queried.

const handler = {
  has (target, key) {
    if (key[0] === '_') {
      return false;
    }
    return key in target;
  }
};
var target = { _prop: 'foo', prop: 'foo' };
var proxy = new Proxy(target, handler);
'_prop' in proxy // false

3.5 defineProperty()

defineProperty() method intercepts Object.defineProperty() operation.

3.6 deleteProperty()

Used to intercept delete operations. If this method throws an error or returns false , the current attribute cannot be deleted by the delete command.

3.7 getOwnPropertyDescriptor()

getOwnPropertyDescriptor() method intercepts Object.getOwnPropertyDescriptor() and returns a property description object or undefined .

3.8 getPrototypeOf()

It is mainly used to intercept and obtain the object prototype. The interception operation is as follows:

• Object.getPrototypeOf()

• Reflect.getPrototypeOf()

• __proto__

• Object.prototype.isPrototypeOf()

• instanceof
  

const obj = {};
const proto = {};
const handler = {
    getPrototypeOf(target) {
        console.log(target === obj); // true
        console.log(this === handler); // true
        return proto;
    }
};

const p = new Proxy(obj, handler);
console.log(Object.getPrototypeOf(p) === proto); // true

3.9 setPrototypeOf()

Mainly used to intercept Object.setPrototypeOf() method.

const handlerReturnsFalse = {
    setPrototypeOf(target, newProto) {
        return false;
    }
};

const newProto = {}, target = {};

const p1 = new Proxy(target, handlerReturnsFalse);
Object.setPrototypeOf(p1, newProto); // throws a TypeError
Reflect.setPrototypeOf(p1, newProto); // returns false

3.10 isExtensible()

Method intercepts the Object.isExtensible() operation.

const p = new Proxy({}, {
  isExtensible: function(target) {
    console.log('called');
    return true; //You can also return 1; etc. to represent the value of true}
});

console.log(Object.isExtensible(p)); // "called"
                                     // true

3.11 ownKeys()

Used to intercept the read operation of the object's own attributes. Specifically, the following operations are intercepted.

• Object.getOwnPropertyNames()

• Object.getOwnPropertySymbols()

• Object.keys()
• for...in loop.
  

const p = new Proxy({}, {
  ownKeys: function(target) {
    console.log('called');
    return ['a', 'b', 'c'];
  }
});

console.log(Object.getOwnPropertyNames(p)); // "called"

3.12 preventExtensions()

Used to intercept Object.preventExtensions() . This method must return a Boolean value, otherwise it will be automatically converted to a Boolean value.

This method has a limitation: proxy.preventExtensions can only return true when the target object is not extensible (that is, Object.isExtensible(proxy)為false ), otherwise an error will be reported.

const p = new Proxy({}, {
  preventExtensions: function(target) {
    console.log('called');
    Object.preventExtensions(target);
    return true;
  }
});

console.log(Object.preventExtensions(p)); // "called"
                                          // false

3.13 apply()

The apply method intercepts the following operations.

• proxy(...args)

• Function.prototype.apply() and Function.prototype.call()

• Reflect.apply()


It accepts three parameters: the target object, the context object of the target object (this), and the parameter array of the target object.

const handler = {
  apply (target, ctx, args) {
    return Reflect.apply(...arguments);
  }
};

example:

const target = function () { };
const handler = {
  apply: function (target, thisArg, argumentsList) {
    console.log('called: ' + argumentsList.join(', '));
    return argumentsList[0] + argumentsList[1] + argumentsList[2];
  }
};

const p = new Proxy(target, handler);
p(1,2,3) // "called: 1, 2, 3" 6

3.14 construct()

Used to intercept new commands. Here is how to write the interception object:

const handler = {
  construct (target, args, newTarget) {
    return new target(...args);
  }
};

This method accepts three parameters.

• target : target object.
• args : An array of arguments to the constructor.
• newTarget : The constructor that the new command acts on when creating an instance object.

Note: The method must return an object and the target object must be a function, otherwise an error will be reported.

const p = new Proxy(function() {}, {
  construct: function(target, argumentsList) {
    return 0;
  }
});

new p() // The return value is not an object, error is reported const p = new Proxy({}, {
  construct: function(target, argumentsList) {
    return {};
  }
});
new p() //The target object is not a function, error

4. Observer Pattern

Observer is a very common pattern, which is defined as when the state of an object changes, all objects that depend on it are notified and automatically updated.

We use Proxy to implement an example where the observation function is automatically executed when the state of the observed object changes.

Observer function, wraps the observation target and adds the observation function.

• observable wraps the observed target and returns a Proxy object.
• observe adds an observation function to the queue.
  

const queuedObservers = new Set();

const observe = fn => queuedObservers.add(fn);
const observable = obj => new Proxy(obj, {set});
// Automatically execute the observation function when the property changes.
function set(target, key, value, receiver) {
  const result = Reflect.set(target, key, value, receiver);
  queuedObservers.forEach(observer => observer());
  return result;
}

example:

const user = observable({
  name: 'jack',
  age: 20
});

function userInfo() {
  console.log(`${user.name}, ${user.age}`)
}

observe(userInfo);
user.name = 'Xiaoming'; // Xiaoming, 20

This concludes this article about reflection and proxy in front-end JavaScript . For more relevant JavaScript reflection and proxy content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!