Home  >  Article  >  Web Front-end  >  11 difficult-to-understand problems in parsing Javascript_javascript tips

11 difficult-to-understand problems in parsing Javascript_javascript tips

WBOY
WBOYOriginal
2016-05-16 17:10:161246browse

1. Original value and reference value

The original value is stored in the stack, and the reference value is stored in the heap. For example, the program:

Copy the code The code is as follows:

function Person(id,name,age){
this.id = id;
this.name = name;
this.age = age;
}

var num = 10;
var bol = true;
var str = "abc";
var obj = new Object();
var arr = ['a','b ','c'];
var person = new Person(100,"Idiot's motto",25);

2.undefined and null

undefined: The variable is undefined; it is an exclusive value of Undefined type;

null: the reference is not allocated; it is an exclusive value of type Null.

typeof(undefined)== undefined;
typeof(null) == object;
undefined==null;
undefined!==null;
null instanceof Object == false;
undefined instanceof Object == false;

Although there are Undefined and Null types, the following examples illustrate that these two types are invisible, which means we can only use their values:

alert(undefined instanceof Undefined);
alert(null instanceof Null);

3. Pseudo array

Features:
1) Has length attribute;

2) Access data in index order like an array;

3) There are no array-specific data manipulation methods such as push, pop, slice...

Pseudo arrays can be converted into real arrays through Array.prototype.slice:

var faceArray = {0: 'a', 1: 'b', length: 2}//standard pseudo array;

var realArray = Array.prototype.slice.call(fakeArray);

Pseudo arrays in js: arguments, node.childNodes, document.getElementsByTagName()...

Problem in IE: node.childNodes in IE cannot be converted with slice.

Pseudo array in Jquery: Jquery itself is a pseudo array:

alert($('.class1').length); alert($('.class1').[0].tagName);

4. About simple type literals

var a = 1; b = true, c = "ccc";

The literal looks like it has a type

alert(typeof a);//number
alert(typeof b);//boolean
alert(typeof c);//string

But it cannot be measured through instanceof

alert(a instanceof Number)//false
alert(a instanceof Object)//false
alert(b instanceof Boolean)//false
alert(b instanceof Object)//false
alert(c instanceof String)//false
alert(c instanceof Object)//false

5. The prototype attribute of the function and the internal prototype attribute of the object instance

Each function (constructor) has a prototype attribute, and each object instance has an invisible (mozilla makes it public and can be obtained through __proto__) internal prototype attribute, which points to the constructor prototype attribute. The prototype can also have its own prototype attribute, which constitutes the prototype chain. Object is the top object, so all prototype chains will eventually point to Object.prototype. When accessing the properties/methods of the object instance, Start searching from the object instance itself. If it cannot be found, search upward along the prototype chain until Object.prototype.prototype == null.

6. A little secret of the constructor

Copy the code The code is as follows:

var s = new function(){return "sss"};
alert(s);//[object Object]
s = new function(){return new String("sss" )};
alert(s);//sss

Explanation about this code:

As long as the constructor after the new expression returns (return) a reference object (array, object, function, etc.), it will overwrite the anonymous object created by new. If it returns (return) a primitive type (when there is no return, it is actually return original type undefined), then the anonymous object created by new is returned.


7. The process of object creation

Copy code The code is as follows:

function Person(name){
this.name = name;
}
Person.prototype = {
getName: function(){return this.name}
};

var p = new Person('zhangsan');


Decrypt the creation process of p:

◦Create a build-in object object obj and initialize it;

◦ Point the internal [[Prototype]] of p to Person.prototype;

◦ Use p as this and use the arguments parameters to call Person’s internal [[Call]] method, that is, execute the Person function body and return the return value. If there is no return, undefined will be returned;

◦If the previous step returns the Object type, return this value to p, otherwise return obj.

8. Own and inherited properties of objects

Copy code The code is as follows:

function Person(name){
this.name = name;
}
Person.prototype = {
type: 'human',
getName: function( ){return this.name} 
};
var p = new Person('zhangsan');
alert(p.hasOwnProperty('type'));//false
p.type = 'ren';
alert(p.hasOwnProperty('type'));//true

The running result is very clear, the properties of the object cannot modify the properties of the same name in its prototype, and It will only create a property with the same name itself and assign a value to it.

9. Creation process of function object

Create a build-in object fn;

Set fn’s internal [[Prototype]] to Function.prototype;

Set the internal [[Call]] attribute, which is an internally implemented method that handles the logic of function calls. (Simply understood as pointing to the function body);

Set fn.length to funArgs.length. If the function has no parameters, set fn.length to 0;

The constructor of fn.prototype points to fn itself;

Return to fn.

10.Principle of instanceof

To check whether a is an instance of B, you need to check whether the object pointed to by B's prototype (prototype attribute of the constructor) is on the prototype chain of a.

11. Guessing about Function and Object

alert(Function instanceof Function);//true
alert(Function instanceof Object);//true
alert(Object instanceof Function);//true
alert(Object instanceof Object);/ /true

I’ve been thinking about it for a long time, but I haven’t thought it through...

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn