JS Basic Summary (2) – prototype and prototype chain

preface

The lunar calendar 2019 is coming to an end, taking advantage of a few days ago work things less, sorted out the basic knowledge of javascript, here to share with you, like the big guys can give a small praise. This article is also featured on Github.

I am making: github.com/Michael-lzg

The constructor

Each constructor has a prototype object that contains a pointer to the constructor, and each instance contains an internal pointer to the prototype object.

Let’s start with an example

function Person(name, age, job) {
  this.name = name
  this.age = age
  this.job = job
  this.sayName = function() {
    alert(this.name)
  }
}
var person1 = new Person('Zaxlct'.28.'Engineer')
var person2 = new Person('Mick'.23.'Doctor')
Copy the code

Person1 and person2 are both instances of Person in the above example. Both instances have a constructor property, which (as a pointer) points to Person. That is:

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

prototype

Each constructor has a Prototype attribute that points to the prototype of the instance created by calling the constructor, which is person1 and person2 in this case.

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

var person1 = new Person()
person1.sayName() // 'Zaxlct'

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

console.log(person1.sayName == person2.sayName) //true
Copy the code

proto

This is a property that every JavaScript object (except null) has, called Proto, which points to the object’s prototype.

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

constructor

Each stereotype has a constructor property pointing to the associated constructor

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

Examples and prototypes

When an instance property is read, if it cannot be found, it looks for the property in the stereotype associated with the object. If not, it looks for the stereotype until it reaches the topmost level.

function Person() {}

Person.prototype.name = 'Kevin'

var person = new Person()

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

delete person.name
console.log(person.name) // Kevin
Copy the code

In this example, we add the name attribute to the instance object Person. When we print Person. name, the result will be Daisy.

But when we delete the name property of person, and we read Person.name, and we don’t find the name property in the Person object, we get the name property from the prototype of Person, person.proto, In Person. Prototype, luckily we found the name property, which is Kevin.

Object.create()

Syntax: Object.create(proto, [propertiesObject])

Method creates a new object, using an existing object to provide a proTO for the newly created object.

• New Object() creates objects using constructors, adding properties under its own instance.
• Object.create() Es6 creates objects in another way, which can be understood as inheriting an Object, adding properties under the stereotype.

// New Object()
var a = { rep: 'apple' }
var b = new Object(a)
console.log(b) // {rep: "apple"}
console.log(b.__proto__) / / {}
console.log(b.rep) // {rep: "apple"}

// object.create ()
var a = { rep: 'apple' }
var b = Object.create(a)
console.log(b) / / {}
console.log(b.__proto__) // {rep: "apple"}
console.log(b.rep) // {rep: "apple"}
Copy the code

Classic Interview questions

var obj1 = { name: 'one' }
obj2 = Object.create(obj1)
obj2.name = 'two'
console.log(obj1.name)
//one

var obj1 = { prop: { name: 'one' } }
obj2 = Object.create(obj1)
obj2.prop.name = 'two'
console.log(obj1.prop.name)
//two

var obj1 = { list: ['one'.'one'.'one'] }
obj2 = Object.create(obj1)
obj2.list[0] = 'two'
console.log(obj1.list[0])
//two
Copy the code

• The second problem first calculates the value of obj2.prop, which is found in the prototype chain, and then calculates the presence of the name property in the object obj2.prop corresponds to (without checking the prototype chain).
• The third problem is to evaluate the obj2.list property and then assign it to the property of obj2.list with subscript 0 (property name “0”).

Private variables, functions

Variables and functions defined inside a function are not accessible to the outside world if they do not provide an interface. That is, they become private variables and functions.

function Obj() {
  var a = 0 // Private variables
  var fn = function() {
    // Private function}}var o = new Obj()
console.log(o.a) //undefined
console.log(o.fn) //undefined
Copy the code

Static variables, functions

When a function is defined, pass “. Properties and functions added to them are still accessible from the object itself, but not from the example. Such variables and functions are called static variables and static functions, respectively.

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

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

var o = new Obj()
console.log(o.a) //undefined
console.log(typeof o.fn) //undefined
Copy the code

Instance variables, functions

In object-oriented programming, in addition to library functions, we still want to define properties and methods at the same time as the object is defined, so that when you instantiate it, you can access it, and JavaScript can do that too.

function Obj(){
    this.a=[]; // Instance variables
    this.fn=function(){ // Instance method}}console.log(typeof Obj.a); //undefined
console.log(typeof Obj.fn); //undefined
 
var o=new Obj();
console.log(typeof o.a); //object
console.log(typeof o.fn); //function
Copy the code

A comprehensive interview question

The title as follows

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)}// Write the following output:
Foo.getName()
getName()
Foo().getName()
getName()
new Foo.getName()
new Foo().getName()
new new Foo().getName()
Copy the code

We define a function called Foo, then create a static property called getName to store an anonymous function for Foo, and then create a new anonymous function called getName for Foo’s prototype object. We then create a function called getName using function variable expressions, and finally declare a function called getName.

Let’s reveal the answer first, and then take a look at the specific analysis

/ / the answer:
Foo.getName() / / 2
getName() / / 4
Foo().getName() / / 1
getName() / / 1
new Foo.getName() / / 2
new Foo().getName() / / 3
new new Foo().getName() / / 3
Copy the code

1. First: foo. getName is naturally a static property stored on Foo, naturally 2
2. Second, call the getName function directly. 1, 2, 3: getName = getName = getName = getName = getName = getName = getName = getName = getName But there are two holes here, one is the variable declaration promotion, and the other is the function expression. For function variable hints, omit ten thousand words here… The final execution of the code in this problem is

function Foo() {
  getName = function() {
    alert(1)}return this
}
var getName // Only promote variable declarations
function getName() {
  alert(5)}// Lift the function declaration to override the var declaration

Foo.getName = function() {
  alert(2)
}
Foo.prototype.getName = function() {
  alert(3)
}
getName = function() {
  alert(4)}// The final assignment overrides the function getName declaration again

getName() // Final output 4
Copy the code

3. Foo().getName(); Function Foo is executed, and then the getName property function of the return value object of function Foo is called. Here Foo returns this, which refers to the window object. So the third question is equivalent to window.getName(). Here, however, function Foo assigns the value of this variable tofunction(){alert(1)}.
4. Call getName directly, equivalent to window.getName().
5. The following three questions are to examine the js operator priority questions.

Recommend the article