Javascript&CSS

Let’s take a look at a piece of code: <div id="e1"></div> <div id="e2"></div> <script> var c1 = document.getElementById("e1"); var c2 = document.getElementById("e2"); var obj = {}; obj[c1] = 1; obj[c2] = 2; console.log(obj); </script> What will this code output? The answer is: Object {[object HTMLDivElement]: 2} Why does it output only one element when we assigned two elements to obj? Could it be that c1 and c2 point to the same element? First, c1 and c2 are two different DOM nodes, and by outputting c1 === c2, you’ll find the result is false. However, the result of obj[c1] === obj[c2] is true. From the above results, we can initially deduce that when c1 and c2 are used as object keys, their values might be the same. An object’s key can only be a string, so when the DOM element c1 is used as a key, it is converted to a string. Since both c1 and c2 are div elements, they are converted to the same string value, and c2 as a key will overwrite c1. This results in only one element being present. If c2 is changed to a different type of DOM node, it will be converted to a different string value. For example, if c2 is changed to a ul, using the same JavaScript code, the output will be: ...

Inheritance in Javascript can be divided into two main categories (non-constructor inheritance and constructor inheritance). Let’s start with the simpler one and get to know constructor-based inheritance. Javascript is a prototype-based language and does not have the concept of classes inherently, so we can only simulate class-based patterns to implement classes and class inheritance. We use constructor functions to simulate the concept of classes. For example, let’s define a Person class. ...

I came across a small test called “Do You Really Understand Javascript?” on SAE’s microblog. Although it consists of only a few lines of code, it highlights some easily overlooked issues. Here’s the original image from the microblog: Result of the first code snippet: 1 Javascript does not provide block-level scope, so the variable a inside the if statement’s {} is visible outside. Result of the second code snippet: 1 Here, the function name and the variable name are the same, but ...

In Javascript, there’s an interesting operator called new. In JavaScript: The Good Parts, new is listed as a not recommended operator. Let’s explore the usage of new. Consider the following code: function test() { var foo1 = new function () { this.i = 1; } var foo2 = function () { this.i = 2; } M.dis(foo1.i); // 1 M.dis(foo2.i); // undefined M.dis(this.i); // undefined foo2(); M.dis(foo2.i); // undefined M.dis(this.i); // 2 M.dis(foo1.prototype); // undefined M.dis(foo2.prototype); // [object Object] } In the code, M.dis() is equivalent to document.writeln(). The above code clearly illustrates the difference between using and not using the new operator. Below are my understandings based on the results of using and not using the new operator. ...

Constructor and prototype, as the names suggest, mean the builder (constructor) and the prototype. From a semantic perspective, if object A constructs object B, then A is the constructor of B. If the form of object A comes from object B, then object B is the prototype of A. Let’s look at a piece of code: function Person() { Person.prototype.name = "myname"; Person.prototype.age = 18; Person.prototype.sayName = function () { alert(this.name); }; } var person1 = new Person(); person1.sayName(); Here, Person is the constructor of Person.prototype. Why? Because Person constructed Person.prototype. However, the prototype of person1 is not Person.prototype. When person1 is initialized, it can be understood as a copy of Person (i.e., a new instance) is given to person1. Every time Person is instantiated, it inherits (just called inheritance for convenience) a copy of name, age, and sayName from its prototype. person1 is a copy of Person, but the prototype is not copied, so the prototype of person1 is undefined. ...