Use PHP-like magic methods in JS-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Use PHP-like magic methods in JS

Guanhui

May 23, 2020 am 10:39 AM

jsphp

Use PHP-like magic methods in JS

JavaScript Magic Method

This script uses Proxy to implement magic methods similar to those in PHP in JavaScript.

Example

You can use it like this:

const Foo = magicMethods(class Foo {
  constructor () {
    this.bar = &#39;Bar&#39;
  }
  __get (name) {
    return `[[${name}]]`
  }
})
const foo = new Foo
foo.bar // "Bar"
foo.baz // "[[baz]]"

If you are using a JavaScript compiler like Babel and have decorators enabled , you can also use the magicMethods function as a decorator:

@magicMethods
class Foo {
  // ...
}

Supporting magic methods

Given a class Class and instance, the following are the magic methods supported by this script:

__get(name)

Called when trying to access instance[name] and name is not an attribute in instance.

Note: In PHP, checking whether name exists in an instance does not use any custom __isset() method.

__set(name, value)

This method is called when trying to use instance[name] = ... and instance does not set the name attribute.

__isset(name)

This method is called when trying to check whether name exists by calling name in instance.

__unset(name)

This method is called when trying to unset the name attribute through delete instance[name].

Other methods

The following magic methods are supported through this script, but are not supported in PHP:

static __getStatic(name)

Similar to __get(), but it is used in Class instead of instance.

static __setStatic(name, value)

Similar to __set(), but used in Class instead of instance.

Why is magic method X not supported?

They are either unnecessary or impractical:

__construct() No, JavaScript already has a constructor.

__destruct(): There is no hook mechanism for object destruction in JavaScript.

__call(): Contrary to PHP, methods are like properties in JavaScript and are first obtained via __get(). To implement __call(), you simply return a function from get().

__callStatic(): Similar to __call(), but with __getStatic().

__sleep(), __wakeup(): JavaScript does not have built-in serialization and deserialization. You can use JSON.stringify() and JSON.parse(), but they have no mechanism to automatically trigger any methods.

__toString() There is already a counterpart to JavaScript's toString()

__invoke(): If you try to call a non-function object, JavaScript will throw an error, which is unavoidable.

__set_state(): There is no equivalent to var_export() in JavaScript.

__clone(): Hook for built-in cloning functionality in JavaScript.

__debugInfo(): Unable to hook into console.log() output.

Can I extend a class using magic methods?

Yes, to a certain extent:

class Bar extends Foo {}
// 或者，如果类 Bar 本身包含魔术方法：
const Bar = magicMethods(class Bar extends Foo {
  // ...
})

But unfortunately, you cannot access properties in the parent class from the subclass:

const Foo = magicMethods(class Foo {
  __get() {
    return this.bar()
  }
})
class Bar extends Foo {
  bar() {
    return &#39;value&#39;
  }
}
// 这个 *不会* 调用 B 的 bar() 方法，而是抛出一个类型错误：
(new Bar).something

Recommended Tutorial: "JS Tutorial"

The above is the detailed content of Use PHP-like magic methods in JS. For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:learnku. If there is any infringement, please contact admin@php.cn delete

Implementing JavaScript Reporting API for Browser DiagnosticsJul 24, 2025 am 12:11 AM

JavaScriptReportingAPI is a set of interfaces provided by the browser, which is used to automatically collect website operation status reports, such as CSP violations, crashes, resource loading failures, etc. Its core advantage lies in automatic collection and standardization of structures. To enable this API, you need to complete the following steps: 1. Configure Report-To and related policy headers in the HTTP response header; 2. Set up the server endpoint to receive the report; 3. Test whether the report is sent normally. Common report types include: 1.CSPViolations; 2.CrashReports; 3.DeprecationReports; 4.InterventionReports. Pay attention to when processing reports: 1.

JavaScript Object Models: Deep Copying, Shallow Copying, and Considerations for Java SerializationJul 23, 2025 am 04:07 AM

Shallow copy only copies the top-level properties of the object, nested reference types share the same memory address, and modifying the copy will affect the original object; deep copy recursively copies all levels to ensure complete independence. For example, using Object.assign or extension operators is a shallow copy, modifying nested objects will reflect the original object; while JSON.parse(JSON.stringify(obj)) or Lodash's _.cloneDeep() can achieve deep copy to avoid mutual influence. In addition, deep copying requires attention to special types of processing such as functions, circular references, and Date. When communicating across languages, the impact of Java serialization on data structures must also be considered.

How to select an HTML element by class or tag name in JS?Jul 23, 2025 am 04:01 AM

Selecting HTML elements in JavaScript can be achieved in three ways: 1. Use getElementsByClassName to select by class name, return dynamic HTMLCollection, you need to write the class name, such as 'box', and access the first element through boxes[0]; 2. Use getElementsByTagName to select by tag name, and also return dynamic HTMLCollection, suitable for batch operations such as modifying all li styles; 3. Use querySelectorAll to select by CSS selector, support more complex selection logic, return static NodeList, if only the first match is required, you can use querySe

Working with Dates in JavaScript: A Complete GuideJul 23, 2025 am 03:59 AM

JavaScript's date processing requires attention to creating, getting set values, formatting and time zone issues. 1. Create a Date object by using no parameters, timestamps, date strings or components; note that the month starts at 0 and the browser parses the strings may be inconsistent. 2. Use getDate, setDate and other methods to get/set the value, and use getTime() to compare the date. 3. Intl.DateTimeFormat can be used to ensure consistency, and third-party libraries can also be used. 4. UTC method should be used to deal with time zones to avoid confusion. The sending server recommends using UTC and converting it to the backend.

JavaScript Performance Optimization: Debouncing and ThrottlingJul 23, 2025 am 03:57 AM

Debouncingdelaysfunctionexecutionuntilafterapauseinactivity,idealforsearchinputsandformvalidation;2.Throttlinglimitsexecutiontoonceperfixedinterval,perfectforscrollandmousemoveevents;bothreduceperformanceloadwhilepreservingUX.

Leveraging JavaScript Proxies and Reflect API for Advanced Metaprogramming with Java InteropJul 23, 2025 am 03:55 AM

JavaScriptProxies and ReflectAPI can be used to enhance the interoperability of Java and JavaScript in Nashorn or GraalVM environments. 1. Use Proxy to intercept access to Java objects, such as recording attribute access logs or dynamically modifying the return value, and implementing it through get traps and Reflect.get; 2. You can proxie the Java class itself and control constructor calls through construct traps; 3. Use apply traps to automatically convert parameter types before calling Java methods to improve compatibility between JS and Java; 4. Reflect provides more consistent operation methods, such as Reflect.has

Implementing JavaScript Security Headers in Node.jsJul 23, 2025 am 03:48 AM

The method of setting up JavaScript security headers in Node.js applications is to use Helmet middleware to implement it through the backend. 1. Install and introduce the Helmet package and add it to the Express middleware chain to enable the default security headers; 2. Common security headers include CSP to prevent XSS attacks, X-Content-Type-Options to avoid MIME type guessing, X-Frame-Options to prevent click hijacking, HSTS to force HTTPS access, etc.; 3. CSP policies can be customized to meet external resource loading needs, but 'unsafe-inline' should be avoided, and Nonce or Hash is recommended instead; 4. Enable

Advanced JavaScript Readable and Writable StreamsJul 23, 2025 am 03:47 AM

Readable and writable streams in JavaScript achieve efficient data transmission through chunking processing. 1. ReadableStream is used to read data in asynchronously in blocks, suitable for large file reading, HTTP response and other scenarios; 2. WritableStream receives data and processes it, such as writing to files or recording logs; 3. Use the .pipe() method to automatically process back pressure, connecting readable and writable streams; 4. Transform stream can be converted during data flow; 5. In actual use, pay attention to error processing, back pressure control and correct ending of streams. Mastering these key points will help improve big data processing capabilities and performance.

See all articles