Want to learn front-end or programming knowledge welcome to pay attention to the column:
Coding, learning programming – Zhihu column
One, W3C standard box model and IE box model difference:
1. W3C standard box model:
The height and width of the box is determined by the content area of the box only by width and height, excluding the border and inner and outer margins.
2. IE box model:
In IE box model, the box width and height not only includes the width and height of elements, but also includes the border and inner margin of elements.
So under the same Settings, IE elements will look smaller than the standard box. If you want the standard box to look like the IE box model, you can set the element style:
.item { box-sizing: border-box; // box-sizing: content-box; // Default value, standard box model effect}Copy the codeDifferences between querySelectorAll and getElementsBy series
How does the querySelectorAll method differ from the getElementsBy series of methods based on the answers under this question? Let me summarize briefly:
- QuerySelectorAll belongs to the W3C Selectors API specification, while the getElementsBy series belongs to the W3C DOM specification.
- The querySelectorAll method accepts arguments as CSS selectors and throws an exception when passed one that does not conform to the CSS selector specification, while the getElementsBy series accepts arguments as a single className, tagName, and so on.
- From a return value perspective, querySelectorAll returns an immutable list of nodes, while the getElementsBy series returns a dynamic list of nodes.
// Demo 1
var ul = document.querySelectorAll('ul')[0],
lis = ul.querySelectorAll("li");
for(var i = 0; i < lis.length ; i++){
ul.appendChild(document.createElement("li"));
}
// Demo 2
var ul = document.getElementsByTagName('ul')[0],
lis = ul.getElementsByTagName("li");
for(var i = 0; i < lis.length ; i++){
ul.appendChild(document.createElement("li"));
}
Copy the codeBecause LIS in Demo 2 is a dynamic node list, each call to LIS will re-query the document, resulting in the problem of infinite loop.
However, LIS in Demo 1 is a static node list and a snapshot of the LI set, which will not be affected by any operation on the document.
- General consensus: getElementsBy performs better than querySelectorAll
- QuerySelectorAll returns a NodeList, while getElementsBy returns an HTMLCollection
3. Differences between NodeList and HTMLCollection
- HTMLCollection is a collection of elements while NodeList is a collection of nodes (that is, it can contain elements, text nodes, comments, and so on).
- Node. childNodes, querySelectorAll(although static) return NodeList, while Node. children and Node. getElementsByXXX return HTMLCollection.
The difference between dynamic scope and static scope:
- Static scoping is also called lexical scoping: when a variable in a lexical scoped function is encountered that is neither a parameter nor a local variable defined within the function, it is queried against the context in which the function is defined.
var foo = 1; function static() { console.log(foo); } (function() { var foo = 2; static(); } ());Copy the codeJS variables are statically scoped, which prints 1 instead of 2 in the code above, because the static function records foo as 1 when the scope is created. If the scope is dynamically scoped, it should print 2
Static scope is the key to generating a closure, that is, it is statically scoped after the code is written.
- When a function in a dynamic domain encounters a variable that is neither a parameter nor a local variable defined within the function, it queries the environment in which the function is called
In JS, the execution of this is based on a dynamic domain query, and the following code prints 1, which would have printed 2 if static scoped
var foo = 1; var obj = { foo: 2, bar: function() { console.log(this.foo); }}; var bar = obj.bar; bar();Copy the codeV. Data type detection method:
- Typeof: Uses typeof to detect data types, and returns the following values: number, String, Boolean, undefined, function, object
The common return values will not be mentioned, but the following situations need to be noted:
console.log(typeof NaN); //number
console.log(typeof typeof typeof function(){}) //string
var str = 'abc';
console.log(typeof str++); //number
console.log(typeof ('abc' + 1)); //string
console.log(typeof null); //object
console.log(typeof /\d/g); //object
console.log(typeof []); //object
console.log(typeof new Date()); //object
console.log(typeof Date()); //string
console.log(typeof Date); //function
Copy the code- Instanceof: The result checked with instanceof is true as long as it is on the current instance’s prototype chain, so the final result checked may not be correct in the class’s prototype inheritance.
1. Use instanceof to determine basic types:
var str1 = 'abc';
var str2 = new String('abc');
console.log(str1 instanceof String); //false
console.log(str2 instanceof String); //true
console.log(false instanceof Boolean); //false
console.log(new Boolean(false) instanceof Boolean) //true
Copy the codeUse typeof instead of Instanceof for basic types.
2.
function Foo(){}
var foo = new Foo();
console.log(foo instanceof Foo) //true
Copy the code3. Judge the inheritance relationship:
function Parent() {}
function Child() {}
Child.prototype = new Parent();
Child.prototype.constructor = Child;
var child = new Child();
console.log(child instanceof Child); //true
console.log(child instanceof Parent); //true
console.log(child instanceof Object); //true
console.log(Child instanceof Function); //true
console.log(Function instanceof Object); //true
console.log(Child instanceof Child); //false
Copy the codeIf you are confused by the output above, I suggest you take a look at this article: Understanding javascript archetypes and closures in Depth (5) – Instanceof – Blogpark
- Constructor: Detects data types
console.log((1).constructor === Number); //true
console.log("a".constructor === String); //true
console.log([].constructor === Array); //true
console.log({}.constructor === Object); //true
Copy the codeThe detection is comprehensive, but it has its limitations: if we overwrite the class’s prototype, we may overwrite its constructor, and the result may not be accurate.
function Fn() {}
Fn.prototype = new Array();
var f = new Fn();
console.log(f.constructor === Array); // true
Copy the codeConstructor does not detect null, undefined types, so it is not very useful to use constructor to determine the type
- Object.prototype.toStrong.call
Object. The prototype. ToStrong. Call () is the most commonly used detection data type is the most accurate way,
function toString(data) {
return Object.prototype.toString.call(data).slice(8, -1);
}
console.log(toString('abc') === 'String');
console.log(toString(1) === 'Number');
console.log(toString(false) === 'Boolean');
console.log(toString(null) === 'Null');
console.log(toString(undefined) === 'Undefined');
console.log(toString([]) === 'Array');
console.log(toString({}) === 'Object');
console.log(toString(function(){}) === 'Function')
Copy the codeThe relation between function and object:
First, a function is an object:
var fn = function() {}
console.log(fn instanceof Object); //true
Copy the codeYes, functions are objects, but functions are not like arrays —- you can say arrays are objects, because arrays are like a subset of objects, but functions and objects are not just about inclusion and inclusion.
Objects can be created by functions:
function Fn() {
this.name = "Lindz";
this.year = 1995;
}
var fn1 = new Fn(); // {name: "Lindz", year: 1995}
Copy the codeThe above example is very simple. It shows that objects can be reconstructed by functions, but objects are actually created by functions. One might argue that:
var obj = { a: 10, b: 20 };
var arr = [5, true, "aa"];
Copy the codeBut these are all syntactic sugar in programming, and the compiler actually does the following for us:
var obj = new Object();
obj.a = 10;
obj.b = 20;
var arr = new Array();
arr[0] = 5;
arr[1] = true;
arr[2] = "aa";
console.log(typeof (Object)); // function
console.log(typeof (Array)); // function
Copy the codeTo be continued!
Did this article help you? Welcome to join the front End learning Group wechat group:
