JS//Prototype and prototype chain

JS-prototype and prototype chain

1 knowledge points

1.1.1 Constructor & Constructor-Extension

1）

function Foo(name, age) {
    
    
    this.name = name
    this.age = age
    this.class = 'class-1'
    // return this  //默认有这一行
}
var f = new Foo('zhangsan', 20)

2）

• var a = {}In fact, it is var a = new Object( )syntactic sugar
• var a = []In fact, it is var a = new Array( )syntactic sugar
• function Foo(){...} Actually var Foo = new Function(...)
• Use instanceof to determine whether a function is a variable constructor//variable instanceof Array

1.1.2 The relationship between prototype rules and instances & prototypes, constructors, instances, and prototype chain

1)
5 prototype rules: (prototype rules are the basis for learning the prototype chain)
①All reference types (arrays, objects, functions) have object characteristics and can freely extend properties (except "null");
②All The reference type has a _proto_ property (implicit prototype), and the property value is an ordinary object; ③All
functions have a prototype (display prototype) property, and the property value is also an ordinary object;
④All references Type (array, object, function), the proto__ attribute value points to the "prototype" attribute value of its constructor
; ⑤When trying to get a certain attribute of an object, if the object itself does not have this attribute, it will go to it Look in __proto (that is, the prototype of its constructor);

Reference type (with "object properties", proto )
function (with "object properties", prototype)
reference type __proto__ points to the prototype of the constructor

2）

1.1.3 Prototype chain

When trying to get a property of an object f, if the object itself does not have this property, it will go to its _proto_ (that is, the prototype of its constructor) obj._proto_ to look for;
when there is no obj._proto When, it will look for in obj._proto.proto (that is, the prototype of the constructor of the prototype of the obj constructor);

1.1.4 instanceof principle

The method used to determine which constructor the reference type belongs to/
the __proto__ of the test object and the prototype of the constructor refer to the same prototype/whether the prototype of the
test constructor is anywhere in the prototype chain of the object. /
Use instanceof to verify the object's constructor

1.1.5 new principle & process

1）

The principle of new:
①Create a new object and inherit the prototype object Foo.prototype of the
constructor Foo ; ②The constructor Foo is executed, and the corresponding parameters are passed in during execution, and this is designated as the new instance;
③Judging whether the instance is Object, if yes, return the object, otherwise return the constructor;

2）

The new process:
① Create a new object
② this points to this new object
③ Execute the code, that is, assign a value
to this ④ Return this

function Foo(name, age) {
    
    
    this.name = name
    this.age = age
    this.class = 'class-1'
    // return this  // 默认有这一行
}
var f = new Foo('zhangsan', 20)
// var f1 = new Foo('lisi', 22) // 创建多个对象

2 Q&A

Topic:
*How to accurately judge that a variable is an array type;
*Write an example of prototype chain inheritance;
*Describe the process & principle of a new object; (see the above knowledge points for the answer)
*What are the methods to create an object; (see the answer above Knowledge points)
*What is the prototype chain; (see the above knowledge points for the answer)
*instanceof principle; (see the above knowledge points for the answer)
*What are the ways of inheritance? What are the advantages and disadvantages?

2.1 How to accurately determine whether a variable is an array type

arr instanceof Array

2.2 Write an example of prototype chain inheritance

Example 1:

function Elem (id) {
    
    
    this.elem = document.getElementById (id)
}

Elem.prototype.html = function (val) {
    
    
    var elem = this.elem
    if (val) {
    
    
        elem.innerHTML = val;
        return this
    } else {
    
    
        return elem.innerHTML
    }
}

Elem.prototype.on = function (type, fn) {
    
    
    var elem = this.elem
    elem.addEventListener(type, fn)
}

var div1 = new Elem('detail-page')
// console.log(div1.html())
div1.html('<p>hello imooc</p>')
div1.on('click', function( ) {
    
    
    alert('clicked')
})

Example 2:

Set the prototype of the child as an instance of the
parent-the
first step of inheriting its behavior from the superclass (or parent class) Animal : Create an instance of Animal Object.create(Animal.prototype) The
second step: give The subtype (or subclass) sets the prototype Dog.prototype = …
resets an inherited constructor property-Dog.prototype.constructor = Dog;

function Animal() {
    
     }
Animal.prototype = {
    
    
  constructor: Animal,
  eat: function() {
    
    
            console.log("nom nom nom");
  }
};

function Dog() {
    
     }
Dog.prototype = Object.create(Animal.prototype)
Dog.prototype.constructor = Dog;

let beagle = new Dog();
beagle.eat();  // 应该输出 "nom nom nom"
beagle.constuctor;  //返回 function Dog( ) { }