JavaScript is partly an object-oriented language.
To learn JavaScript, we got to learn the object-oriented parts of JavaScript.
In this article, we’ll look at JavaScript metaprogramming with proxies and built-in browser objects.
Proxies and Function Traps
We can intercept function calls with the get and apply operations.
For instance, we can create a handler by writing:
const person = {
name: "james",
foo(text) {
console.log(text);
}
}
const proxy = new Proxy(person, {
get(target, propKey, receiver) {
const propValue = target[propKey];
if (typeof propValue !== "function") {
return propValue;
} else {
return function(...args) {
return propValue.apply(target, args);
}
}
}
});
proxy.foo('james')
We have the person object that we control with the get method.
target is the object we’re controlling.
In this case, it’s the person object.
propKey is the property key.
We check if the property is a function.
If it’s not, we return whatever value it has.
Otherwise, we call the function with this being target with the arguments.
And we return the result.
The Browser Environment
The browser environment is controlled with JavaScript.
It’s the natural host for JavaScript programs.
Including JavaScript in an HTML Page
We can include JavaScript in an HTML page with the script tag.
For instance, we can write:
<!DOCTYPE>
<html>
<head>
<title>app</title>
<script src="script.js"></script>
</head>
<body>
<script>
let a = 1;
a++;
</script>
</body>
</html>
We have a script tag with src set to script.js .
And we also have an inline script with JavaScript code inside it.
BOM and DOM
JavaScript code on a page has access to various objects.
They include core ECMAScript objects, which are ones like Array , Object , etc.
DOM are objects that have to do with the current page.
BOM has objects that deal with everything outside the page like the browser window and desktop screen.
The DOM is standardized in various W3C specs.
But the BOM isn’t in any standard.
BOM
The BOM is a collection of objects that gives us access to the browser and the computer screen.
The objects are accessible through the global window object.
The window Object
The window object is a global object provided by the browser environment.
For instance, we can add a global variable by writing:
window.foo = 1;
Then foo is 1.
Some core JavaScript functions are part of the window object.
For instance, we can write:
parseInt('123');
then we get 123.
It’s the same as:
window.parseInt('123');
These can vary from one browser to another, but they’re implemented consistently and reliably across all major browsers.
The window.navigator Property
The navigator property has some information about the browser and its capabilities.
One is the navigator.userAgent property.
For instance, we can write:
window.navigator.userAgent
then we get the user agent string.
We may get a string like:
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36 Edg/84.0.522.52"
returned.
We can use this to check for which browser.
For instance, we can write:
if (navigator.userAgent.indexOf('MSIE') !== -1) {
//...
} else {
//...
}
to check if a script is running in Internet Explorer.
But it’s a bad way to check for browser features since the user agent can be spoofed.
We can just check for the feature we want directly:
if (typeof window.addEventListener === 'function') {
// ...
} else {
// ...
}
Conclusion
Browsers have various built-in objects we can use.
Also, we can use proxies to control functions.
