JS basis - prototype and prototype chain

Foreword

In recent js finishing some of the basics of just finishing the prototype

Constructor

Each constructor (constructor) has a prototype object (the prototype), the prototype object contains a pointer pointing to the constructor, and examples of the (instance) all contain a pointer to the prototype object.

First look at an example

function Person(name, age, job) {
  this.name = name
  this.age = age
  this.job = job
  this.sayName = function() {
    alert(this.name)
  }
}
was PERSON1 = new Person ( 'Zaxlct', 28, 'Engineer' )
 was person2 = new Person ( 'Mick', 23, 'Doctor')

Examples are person2 Person person1 and examples above. Both examples have a constructor (the constructor) attribute (which is a pointer) pointing to Person. which is:

console.log(person1.constructor == Person) //true
console.log(person2.constructor == Person) //true

prototype

Each prototype constructor has a prototype property, point to call the constructor and instances created, that is, in this example person1 and person2 prototype

function Person() {}
Person.prototype.name = 'Zaxlct'
Person.prototype.age = 28
Person.prototype.job = 'Engineer'
Person.prototype.sayName = function() {
  alert(this.name)
}

was PERSON1 = new Person ()
person1.sayName() // 'Zaxlct'

was person2 = new Person ()
person2.sayName() // 'Zaxlct'

console.log(person1.sayName == person2.sayName) //true

proto

It is every JavaScript object (except null) has a property called proto, this property will point to the prototype of the object.

function Person() {}
var person1 = new Person()
console.log(person1.__proto__ === Person.prototype) // true

constructor

Each prototype has a constructor property that points associated constructor

function Person() {}
var person1 = new Person()
console.log(Person === Person.prototype.constructor) // true
console.log(person1.__proto__ === Person.prototype) // true

Examples of the prototype

When reading the properties instance, if found, will look for the prototype associated with the object's attributes, if still finding out, went to prototype prototype, it has been found so far top level.

function Person() {}

Person.prototype.name = 'Kevin'

was person = new Person ()

person.name = 'Daisy'
console.log(person.name) // Daisy

delete person.name
console.log (person.name) // Kevin In this example, we add a person to an instance of an object attribute name, when we print person.name, the natural result is Daisy.

But when we removed the person's name attribute, read person.name, will not find the name attribute is the person. From the person from the person's prototype object proto , which is Person.prototype Look, fortunately, we find a name attribute, the result is Kevin.

Private variables, function

Variables and functions inside the function definition if you do not provide external interface, it will not be accessible to the outside, that is, become private variables and private functions.

function the Obj () {
   var A = 0 // private variable 
  var Fn = function () {
     // private function 
  }
}

There he = new Obj ()
console.log(o.a) //undefined
console.log(o.fn) //undefined

Static variables, functions

When a function is defined by. "" Its properties and functions added by the object itself can still get access, but did not visit examples of such variables and functions are called static variables and functions.

function Obj() {}
  Obj.a = 0 // static variable 
  Obj.fn = function () {
     // static function 
}

console.log(Obj.a) //0
console.log(typeof Obj.fn) //function

There he = new Obj ()
console.log(o.a) //undefined
console.log(typeof o.fn) //undefine

Examples of variables, functions

In object-oriented programming in addition to some library functions at the same time we want to define some properties and methods when the object definitions, instantiated can access, JavaScript can do so.

function the Obj () {
     the this II.A = []; // instance variables 
    the this .fn = function () { // example method     
    }
}
 
console.log(typeof Obj.a); //undefined
console.log(typeof Obj.fn); //undefined
 
There o = new Obj ();
console.log(typeof o.a); //object
console.log(typeof o.fn); //function

A topic below

function Foo() {
  getName = function() {
    alert(1)
  }
  return this
}
Foo.getName = function() {
  alert(2)
}
Foo.prototype.getName = function() {
  alert(3)
}
var getName = function() {
  alert(4)
}
function getName() {
  alert(5)
}

// Please write the following output:

Foo.getName()
getName()
Foo().getName()
getName()
new Foo.getName()
new Foo().getName()
new new Foo().getName()

Interpretation: First, define a function called Foo, and then created a static property called getName stores an anonymous function Foo, followed by prototype object Foo newly created anonymous function is called getName. And later by function variable expression creates a function getName, and finally declare a function called getName.

First to play through your answers, let's look at a specific analysis

//答案：
Foo.getName() //2
getName() //4
Foo().getName() //1
getName() //1
new Foo.getName() //2
new Foo().getName() //3
new new Foo().getName() //3

The first question: Foo.getName natural function is to access storage on Foo static properties, is naturally 2
The second question, directly call getName function. Since it is a direct call function that is called getName access the current role of the above domains, so with the 123 we have nothing to do. But here there are two pits, one variable declaration upgrade, the second is a function expression.
Tips on function variables, omitted here a million words. . . . When the final execution of the code in question is

function Foo() {
  getName = function() {
    alert(1)
  }
  return this
}
var getName // only enhance variable declarations 
function getName () {
  alert(5)
} // enhance the function declaration statement covering var 

Foo.getName = function () {
  alert(2)
}
Foo.prototype.getName = function() {
  alert(3)
}
getName = function() {
  alert(4)
} // final assignment covering function getName Again

The third question Foo () getName ();. First implementation of the Foo function, and then call the return value of a function Foo object's property getName function. Here Foo function return value is this, this points to the window object. So third question is equivalent to performing window.getName (). Here, however, the value of Foo function assigned to this variable function(){alert(1)}.
The fourth asked directly call getName function, equivalent to window.getName (), the answer as before.
Three questions were investigated behind the operator precedence js Q