JS prototype presentation and prototype inheritance

1. __ proto __

       As we all know, JS that everything in the object, so every data will have a __ proto __ attribute that is called 隐式原型.
       An object (obj) of 隐式原型（ __ proto __ ）points of the object structure 构造函数（Object()）的原型属性(Object.prototype). The reason for this is to ensure that instances (obj) to access the properties and methods defined in the properties of the prototype constructor (Object.prototype) in.

2.prototype

       Function is a special object, other objects, and in addition as there __ __ proto properties, there are their own unique attributes ( prototype), this property is described as 指针. It points to a data object type, object of this is to include the use of all the properties and methods that can be shared in the future use of this function constructed (we call this object prototype object).

       Prototype object also has a property called constructor, this property contains a pointer that points back to the original function. Similar arguments.callee, but arguments can only get inside the function, and the function prototype constructor property within the object can be used at any location can access to this function.

3. Relationship between constructor prototype, examples

• Constructors Fn身上have properties prototypeof the prototype object, the prototype object has a constructorproperty that points to 当前prototype所在the constructor of Fn;
• In new执行constructing the function Fn, it creates a 实例对象f, instance object f的__proto__point constructor function of Fn 原型prototype;
• Because the instance object f的__proto__points to the constructor function Fn 原型prototype, so examples 对象fmay be indirectly accessible to Fn prototype prototype的方法.
  

4. Examples and prototype relation detection

• isPrototypeOf()函数For the objects between the two detecting whether there seems prototype relationship using the following method:

  // 查看 Fn 的 prototype 对象，是否是 f 原型
  Fn.prototype.isPrototypeOf(f);   

• instanceof运算符, For detecting whether an instance from a particular constructor, used as follows:

 // 查看 f 对象是否是构造函数 Fn 的实例
 console.log(f instanceof Fn); 
 // 查看 f 对象是否是构造函数 Fn 的实例    
 console.log(f instanceof Object); 

Two ways to use, if the return ture, if not return false;
Note: instanceof operator the right to the constructor, and the prototype for all the js are from the Object constructor.

    function Fn(){}
    function Fun(){}
    var f = new Fn();
    console.log( f.__proto__ === Fn.prototype );   		    // t
     
    console.log( Fn.prototype.isPrototypeOf(f) );     	    // t
    console.log( Fun.prototype.isPrototypeOf(f) );       	// f
    console.log( Object.prototype.isPrototypeOf(f) );       // t

    console.log( f instanceof Fn );         // t
    console.log( f instanceof Fun );        // f
    console.log( f instanceof Object );     // t

5. JS parser sequentially access attribute

       When accessed 实例 fwhen a property or method, will be first in 当前实例对象 fthe search, and if not, then along __proto__looking to continue upward, if found 最顶头的Objector not found, it will be thrown undefined. If you 实例中找到, or 某层原型中找到will 读取并使用, at the same time 停止向上look for.
       Thus, 解析器的解析顺序遵循就近原则if the property exists found in a recent position, we will not continue to look for upward.

6. prototype applications

(1) simple application:

function Fn(){
    this.test= "hello";
}
Fn.prototype.show = function(){
    console.log(this.test);
}
var f = new Fn();
console.log(f);
f.show();

(2) to re-array:

Array.prototype.noRepeat = function(){
    var m = [];
    for(var i=0;i<this.length;i++){
        if(m.indexOf(this[i]) == -1){
            m.push(this[i]);
        }
    }
    return m;
}
var arr = [3,4,5,6,7,6,5,4,3,2,1];
var res = arr.noRepeat();
console.log(res);

var arr1 = ["a","b","c","b","a"];
var res1 = arr1.noRepeat();
console.log(res1);

7. Prototype inheritance

       Examples ①

function Parent(){

}
Parent.prototype.show = function(){
    console.log("哈哈哈");
}

function Child(){

}
for(var i in Parent.prototype){
    Child.prototype[i] = Parent.prototype[i];
}
Child.prototype.show = function(){
    console.log("hello");
}

var p = new Parent();
p.show();
console.log(p.name);

var c = new Child();
c.show();
console.log(c.name);

       Example ②

function Parent(){
    this.name = "hello world";
}
Parent.prototype.show = function(){
    console.log("哈哈哈show方法");
}

function Child(){
}

var p = new Parent();
console.log(p)
var c = new Child();
console.log(c);