Understanding JavaScript's object-oriented approach

In general, the object-oriented approach that you are familiar with is based on class-oriented objects, declares a class, and then creates objects based on the description of the class declaration, using the inheritance and combinatorial relationships between classes and classes to use code. In most cases, class-oriented object-oriented languages (C++,c#,java, and so on) incorporate classes into their own type systems, where each class is also a variable type (Variable type) and allows the value of the subclass type to be assigned to the parent class type variable.

And JS design uses a completely different way of thinking. The first type of JS is not extensible (that is, the user of the language cannot add a new type) so that the language cannot be used. According to language standards, JS designed 6 types of data users can use (because JS is weak type, so the variable has no type, only data have type):

Boolean number String Null Undefined Object

In order to achieve object-oriented, JS put all the objects into the object type, so that JS has 6 types of data users can use. In addition to the UNDEFINED,JS for all types of literals (literal) syntax, now, JS's object face value represents a very successful design, and now even become a data interchange format, which is familiar with the JSON. A Sample:

var　aTShirt={color:"yellow",size:"big"}　

As a dynamic language, JS allows the user to add or remove attributes to an object that has already been created. The property is added to a nonexistent property assignment, and the DELETE keyword is used to delete the property. This delete is more likely to be confused with the C + + delete operator, which is used to release objects that are no longer in use.

With these syntax, you can already do basic object-oriented programming, but just so, JS code reusability is much weaker than other languages. For example, you can't even do a unified operation for a group of objects, you have to iterate through the loop to achieve, so JS introduced the prototype (prototype), the specific implementation is to specify a private property for each object [[prototype]], when reading an object's properties, If the object itself does not have this property, it attempts to access the corresponding property of [[prototype]]. In a concrete implementation, [[prototype]] can still have [[prototype]], the actual access is a chained operation until this property is found or [[prototype]] is empty, so often hear the [[prototype]] chain. To prevent the [[prototype]] from appearing loops, the JS engine checks for any object's [[prototype]] property being modified.

By standard, this [[prototype]] language user is inaccessible, but the Firefox JS engine exposes [[prototype]] as a public property "__proto__" so that we can manipulate the behavior of a group of objects by manipulating the prototype object. We can borrow the convenience provided by FF to understand how [[prototype]] works:

var　proto={a:1};
var　m={__proto__:proto};
var　n={__proto__:proto};
alert([m.a,n.a]);
proto.a=2;
alert([m.a,n.a]);

JS sets a built-in object as the final [[prototype]] of all objects, that is, an object created using {}, and [[prototype]] points to the built-in object.

With this mechanism, we are able to achieve a considerable degree of object reuse with a class-based language-but of course we need a function. In JS, the function is only a special object, JS designed () operator and function keyword to make JS functions look more like the traditional language. As long as the object that implements the private method [[call]] is considered to be a function object (this [[call]] is completely different from the familiar Function.prototype.call), similar to [[Prototype]],[[call]] is also completely inaccessible to language users, and this time FF did not provide us with a public attribute to replace it.

Ben came here so far, JS object-oriented has been very complete, but JS in order to make their own syntax looks more like Java language, and introduced the New keyword, in most of the language of the new is done for the class, and JS does not have classes, and even did not declare the domain, So this new is going to make a fuss over the object, and new will call the private method [[Contruct]], and any object that implements [[construct]] can be accepted by new. But how do you get an object to be new? JS does not provide additional constructs for this object method, so all function objects constructed from the Functions keyword are designed to implement the [[construct]] method. This is also the reason that JS's new is very strange for functions. It is worth mentioning that not only functions can be NEW,JS hosting environment may provide some other objects, the typical example is the ActiveXObject in IE.

The [[construct]] methods for all functions are similar: Create a new object, set its [[prototype]] as a common property of the Function object prototype, take the new object as the value of this pointer, and execute the function object

This creates a similar object in fact for the new operation of the same function: having a common prototype [[prototype]], which is handled by the same function. This new operation is very similar to class, at the same time because of the dynamic of JS, all of the "class" in the run when you slaughter, want to simulate the behavior of inheritance and so easy, because it is weak type and dynamic function, there is no need for polymorphic problems, JS can be done based on class-oriented objects.

Finally provide a few questions, everyone in the gossip writing program may do, all do to explain you have understood the protype-based JavaScript

(please look at the results in FF)

Function.prototype.prop=1;
alert(Object.prop)
alert(Function.prop)

Object.prototype.prop=1;
alert(Object.prop)
alert(Function.prop)

Function.__proto__.prop=1;
alert(Object.prop)
alert(Function.prop)

function Class(){
}
Class.prototype=Class;
Class.__proto__.prop=1
alert((new Class).prop);

function Class(){}
Class.prototype=Class.__proto__;
Function.prototype.prop=1;
alert((new Class()).prop)

function Class(){
}
Class.prototype.__proto__.prop=1;
Class.prototype=new Class;
alert((new Class).prop);