JS in-depth understanding of __JS

Http://dmitrysoshnikov.com/ecmascript

Mainly looked at the above web site of the great God's article. Benefit. Write down the summary:

Pass value type put the value type in the first part of the story is because the problem has really bothered me for a long time. Read this article to have a little understanding. There are 2 types of transfer values that we normally understand (call by value) and pointer delivery (call by reference). When I went to school to learn C and Java. The teacher always emphasizes. Java is passed by value C is a pointer pass. When I use Java, I always have a skeptical attitude about passing the message by value. Because when the object is passed in, changing the internal properties of the object can change the internal properties of the object outside. At that time the explanation was passed by the value of the reference. I was forced to accept it. Now I have a deeper understanding. Python introduces the concept of call by sharing or call by object. A backup of this object pointer is passed. Write an example to distinguish between 3 different passes.

var aro1={x:1};
var aro2={x:2};

function test (ARO1,ARO2) {
	aro1.x=100;
	ARO2={X:200};
}
Test (ARO1,ARO2);
Console.log (Aro1);
Console.log (ARO2);

Languages such as Java,js,ruby,python are used by the third (call by object) method to pass values. Passing results by value for the result: {x:1} {X:2}
Pointer pass result {x:100} {x:200} Call by object: {x:100} {X:2} You can tell the difference by seeing an example. Delivery by value is a full backup delivery. The function does not change the object outside. The reference pass is completely reversed. Since it is a reference, the change of nature has changed. Call by object is a backup of the passed reference. If the property of this object is changed. Then the reference itself does not change. And the outside still points to a place. So it all changed. But if you point the pointer to another place inside the function. Just the backup pointer points somewhere else. itself has not changed. So it doesn't affect external objects. Data Typefor data types. May be very to JS understand not deep enough people the biggest misunderstanding. Many people including many books have such a word "JS inside everything is Object". If you want to get to know more about JS. Just stay away from this idea. JS should have 9 types, of which 6 are our development levels of contact, respectively: Undefined, Null, Boolean, String, number, Object and another 3 in the bottom of the implementation Reference List completion Why we will get JS inside everything is object. And most of the time it feels right. This is because JS inside when you read its properties on other types of attributes, you will first through the Toobject method into object and then remove the object. There is a lot of illusion here. Like what:

var x=1;
Alert (x.tostring ());
Alert (X.tostring===object (x). toString);

Check this out. X is obviously a number type. But the lack of tostring method. But this is JS everywhere is the object of evidence. No.

When you call the x.tostring. JS first converts the X into object. Then there is the ToString method. Remove the transformed object immediately after it is removed

var x=1;
X.xx=1;
alert (x.xx);
x={};
X.xx=1;
alert (x.xx);

Just look at the example above to find out. X.xx=1 in the Access X. This attribute of XX will first convert X to object. The XX property of this object is then set to 1. After this line of code is finished. The transformed object is removed.
The six types we use are not discussed. It should be noted that TypeOf is able to detect the type above. Except NULL. typeof Null was previously thought to be a bug different from the specification. But when it comes to the ES5 specification, the specification is changed to typeof null as Object but. It is not an object type.

Now let's take a look at Reference List completion

The List type is used when the function passes parameters.

Completion is mainly used when the break continue return throw

What I need to be concerned about is basically the reference type: reference type

There are 2 contents in the reference type. It can be simply represented as base (the object that owns the attribute) and PropertyName (the property name);

Reference types are used in only 2 cases:

1 processing An identifier (we deal with a identifier) (Var x)

2 access to an attribute (with a property accessor) (xx.xx xx[' xx ')

For the Access reference type, the desired value is obtained through its own implementation. (can be simply understood as base[' PropertyName ') The context context is mainly composed of variable objects, this, and so on: variable Object (VO) in some JS engine implementations Vo is with __parent__ property to represent the. We can even access it and change it. Variable Object (VO): A variable object is a hidden object within the context. Save the data we defined, the variable object consists of 3 contents: 1. Declared variable 2. Method of the Declaration 3. The formal parameters of a function only in the global context can we directly access the variable through VO. Because VO is the global itself. In other contexts we are not accessible to VO. Vo is just an internal implementation. The variables and methods we define are the attributes of Vo.
In the global context, Vo===this===global in the context of a function, we create a VO when we enter the function context, which is called AO (Activation object). When we first entered this context, AO had attributes. is arguments. The variable declaration and function declaration are then scanned. Scan priority is (mainly refers to the time of the same name overwrite problem): function > Parameter > variable.

function test (x) {
	alert (x);
	function X () {
	}
}
Test (1);

function test (x,y,z) {
	console.log (arguments)
}
Test (1,2);

Arguments mainly consists of the following attributes. Callee the length parameter lengths of the function itself called. (Note that this length is the true length of the argument.) properties-indexes is an array of parameters. The number inside is the same as the length above. and points to the same address as the arguments passed in. Note here that the example above is arguments[0] and X is shared. Arguments[1] and Y are shared. But arguments [2] and Y are not shared. ThisThis can be said to be something unrelated to the function. This is beyond the comprehension of many people. Within a function, this may be a different value in different cases. This is actually related to the context. This occurs only if you enter a context. In fact, the simplest (perhaps not particularly accurate) understanding: This is the object that invokes this method. For example: a.xx () invokes the context in which the XX method is generated this is the object to point A.

var foo = {X:10};
var bar = {
  x:20,
  test:function () {
    alert (this = = bar);//True
    alert (this.x);//
  }
};
Bar.test (); True,
foo.test = bar.test;
Foo.test (); False, 10

You can review the reference type above. In the case where the left side of the function call is a reference type. This is the value of base. If it's not a reference type, it's global
。

The example above

var foo ={
		bar:function () {
			Console.log (this)
		}
}
foo.bar ();
Alert (Foo.bar = =  (foo.bar| | Foo.bar));
(foo.bar| | Foo.bar) ();

The above example Foo.bar is a reference type so this is foo. (foo.bar| | Foo.bar) is not a reference type after the operation. is a function object. So base is null is global to Money Scope ChainJS inside the scope chain is through a function of a hidden attribute [[scope]] to implement. This property is created statically (unchanged) when the function is defined. Depends on the context in which this function exists. [[scope]] is related to a function definition (regardless of the context in which the function is entered) and the scope chain is relevant to the context. The reason is that the scope chain = [[[[Scope]] of the function defined in this context is a recursive discovery that the scope chain is the last set of Scope]]+ao in the upper context.

var x = ten;
function foo () {
  var y =;
  function Bar () {
    var z =;
    Alert (x +  y + z);
  }
  Bar ();
}
Foo ();
Globalcontext.vo =
= = Global = {
  x:10
  foo: <reference to Function>
};

Foo. [[Scope]] = [
  globalcontext.vo
];
Foocontext.ao = {
  y:20,
  bar: <reference to function>
};
Foocontext.scope = Foocontext.ao + foo. [[Scope]]//i.e.:
foocontext.scope = [
  Foocontext.ao,
  globalcontext.vo
];

Bar. [[Scope]] = [
  Foocontext.ao,
  globalcontext.vo
];
Barcontext.ao = {
  z:30
};

Barcontext.scope = Barcontext.ao + Bar. [[Scope]]//i.e.:
barcontext.scope = [
  Barcontext.ao,
  Foocontext.ao,
  globalcontext.vo
];

-"x"-
-barcontext.ao//Not Found-
-foocontext.ao//Not Found--
globalcontext.vo//found-10

- "Y"-
-barcontext.ao//Not Found-
-foocontext.ao//found-20
 
-"z"-
-barcontext.ao//found-30< c49/>* 
 *

closure and scope chainClosures are a very important thing. It is also closely linked to the scope chain. So it's right here. In JS strictly speaking, each function is a closed package.  Because it can all access external variables through the scope chain. The magic of closures is because the [[scope]] property of the function is static. Related to the position defined by the function. The context is not related to the position defined by the function. This results in the execution of some functions. The definition of his context has disappeared. You can access variables in the vanishing context through the scope chain.

var x = ten;

function foo () {
  alert (x);
}

(function () {
  var x =;
  Foo (); But not
}) ();

The top is a closure. Very easy to wrong closure. Foo at the time of definition. his [[Scope]]=globalcontext.vo={x:10,foo:function}] at the time of executing foo (). Of course, this closure is not typical. An example of a more typical closure. is caused by JS can return function. Look below:

function foo () {

  var x = ten;
  var y =;

  return function () {
    alert ([x, Y]);}
  ;

}

var x =;

var bar = foo (); Anonymous function is returned

bar ();//[10, 20]

This is a closure.
functionfunction declarations and function expressions are the most needed to figure out the functions. function DeclarationFeatures of a function declaration: 1 must have a name of 2 code either at the program level or directly in another function body (meaning it can't be in the same Code fast.) 3 in the context of society to create 4 impact variable object VO 5 format must be function xxx () {}
For our programmers, the most important thing about function declarations and function expressions is the effect on variable objects. The function declaration is stored in VO. And Vo we know that when we enter the context, we are filled with variables, functions, and parameters. So you can access this function in front of the function declaration.

Foo ();
 
function foo () {
  alert (' foo ');
}
 

function ExpressionThe most important feature of a function expression is that 1 can only be defined in the position of the expression. 2 can have a name but not necessarily. 3 does not affect VO 4 to be created in the code execution phase what needs to be explained here is that as long as the feature that does not conform to the function declaration is a function expression, even though

In parentheses (grouping operator) can is only a expression
(function foo () {});

In the array initialiser–also only expressions
[function Bar () {}];

Comma also operates with expressions 
1, function Baz () {}; 
 

For a function expression, you can add () to the expression followed by an execution. It should be noted that as long as the function expression is added () it is executed. Our most common is:

(function () {
	alert (1)
}) () (
function () {
	alert (1)
} ())

In fact, just let the compiler identify the function expression, even if you do:

1,function () {
	alert (1)
} ()
var xx={
	bar:function () {
		alert (1)
	}
()}!

function xx () {
	alert (1)
} ()

I personally feel that the following of the wonderful writing not to try. No good. But you have to understand. The more you write to others, the more you know what consciousness.

Here's a ES5 specification. I think it's very useful. Is that the Bind method function can have a bind method to bind this method's this value. This value cannot be changed even by call.

prototype and prototype chainThe object-oriented nature of JS is based on the prototype implementation. (different from classes-including static and dynamic classes) based on the prototype is actually similar to the implementation based on the dynamic class (Python). What we need to pay more attention to is that the implementation of the static class (Java, C) is based on the implementation of the class: 1 to wear an object must have defined its class. 2 objects are created according to their own structure and behavior. 3 through a strict direct and immutable inheritance chain to resolve the method 4 descendants class contains all the attributes in the inheritance chain. Even though these properties may not be used. The 5 class cannot change any attributes of its instance after it is created. (Regardless of methods and properties). 6 instances cannot be added to different behavior or properties of the class structure.
The 1 basic concepts based on prototypes are objects (without having to define their classes first); 2 objects are completely dynamic and variable (and theoretically can be completely changed from one type to another); 3 objects do not have strict classes to describe their structure and behavior, objects do not need classes; 4 However, although there are no classes, But objects can have prototypes (prototypes) to delegate prototypes when they cannot answer messages themselves; The prototype of a 5 object can change at any time at run time, and 6 in a delegation (based) based pattern. Changing the characteristics of the prototype will affect all objects associated with the prototype; 7 in the inline prototype (concatenative prototyping) mode, the prototype is the original copy of the object clone, so it becomes completely independent, and changing the characteristics of the prototype does not affect the objects that are cloned from it; 8 If a message cannot be responded to, the caller can be signaled so that additional measures (such as changing the schedule) can be taken, and 9 objects may be recognized without their hierarchical position or by the specific type they belong to, but by the attributes that are currently owned.
Each object has a prototype. In JS we need to distinguish between a display of prototype and an implicit [[prototype]] (in some JS engines for the __proto__ of this property.) Can even call to it) for a function he has a display of prototype. We can set his value. For other objects, we take the value by implicit [[prototype]]. Can't change it. When you're new to an object. We will point the implicit [[prototype]] of this object to the prototype of the constructor (note that here in JS the pass parameter is call by object so that this is just a copy of a prototype pointer paid to [[prototype]]. This also leads to a change in the prototype of new objects after prototype change) Here's a better way to implement the inheritance:

function inherit (child, parent) {
  var F = function () {};
  F.prototype = Parent.prototype;
  Child.prototype = new F ();
  Child.prototype.constructor = child;
  Child.superproto = Parent.prototype;
  return child;
}