Prototype object supplement

Archetypal model

Definition ： Each function is created , Will create a prototype attribute , This property is an object , That is, the constructor creates the prototype of the object , The value assigned to the object instance in the constructor , Can be directly assigned to their prototype

<script> function Person(){
    
        Person.prototype.name='jack' Person.prototype.age=20 Person.prototype.say=function(){
    
            console.log(this.name,' speak ');
        }
    }
    let person1=new Person()
    person1.say()
// result jack speak              
</script>

Share instance object

<script> function Person(name,age){
    
        this.name=name,
        this.age=age

    }
    // Person.prototype.say=function(){
    
    //     console.log(this.name,' speak ');
    // }
    // let p1=new Person('jack',20) // p1.say() // The comments can also be replaced by the following code  Person.prototype={
    
       say:function(){
    
            console.log(this.name,' speak ');
        }
    }
    let p1=new Person('jack',20)
    p1.say()
</script>

Understand the prototype

Just create a function , There is one prototype Attribute points to prototype object , Prototype objects also have a constructor Pointing function , That is to say Person.prototype.constructor===Person

<script> function Person(){
    
        Person.prototype.name='jack' Person.prototype.age=20 Person.prototype.say=function(){
    
            console.log(this.name,' speak ');
        }
    }
    console.log(typeof Person.prototype);
// result Object
// That is to say Person A prototype is an object 

    console.log(Person.prototype);
// result {
    constructor:f}
// The prototype object has a method pointing to the constructor , This function contains Person The properties and methods in 

    console.log(Person.prototype.__proto__===Object.prototype);
// result true
// That is, the prototype of any function and the prototype of the object Object The prototype is pointing to the same 

    console.log(Person.prototype.__proto__.__proto__); 
// result null
// That is to say Object The prototype of the prototype is empty , That is to say Object The prototype ends 

    let person1=new Person()
    let person2=new Person()
    console.log(person1.__proto__);  
// result {
    name: 'jack', age: 20, say: ƒ, constructor: ƒ}    
// That is, the instance object passes through  __proto__ Reach the prototype of the constructor 

    console.log(person1.__proto__===person2.__proto__);
// result true    
// That is, the prototype of the instance object points to the same 
</script>

Set and get prototype objects

1. getPrototypeOf() Get prototype object

<script> function Person(){
    
        Person.prototype.name='jack' Person.prototype.age=20 Person.prototype.say=function(){
    
            console.log(this.name,' speak ');
        }
    }
    let person1=new Person()
    let person2=new Person()
    console.log(Object.getPrototypeOf(person1));
// result {
    name: 'jack', age: 20, say: ƒ, constructor: ƒ}
    console.log(Object.getPrototypeOf(person1.name));
 result jack    
</script>

2. setPrototypeOf() Set prototype object

<script> let person={
    
        name:'jack'
    }
    let age={
    
        age:20
    }
    Object.setPrototypeOf(person,age)
    console.log(person.age);
// result 20   
    
</script>

3. adopt setPrototypeOf() Setting the prototype object and modifying the inheritance relationship will cause performance degradation , So it's commonly used Object.create() Set prototype object

<script> let age={
    
        age:20
    }
    let person=Object.create(age)
    person.name='jack'
   console.log(person.age);
// result 20
</script>

Prototype chain

Definition ：2 Or 2 More than one prototype , By hiding the prototype __proto__ Properties are connected , Form a chain of deconstructions connected
Prototype chain action ： Property method inheritance
Properties and methods in multiple prototype objects , Instance objects are accessed through the prototype chain, or instance objects find properties and methods along the prototype chain

In a real object-oriented language , Before defining an object , First create the object type

class Person{
    
	constructor(name,age){
    
		this.name=name
		this.age=age
	}
	say(){
    
		console.log(this.name,' speak ')
	}
}
let P1=new Person('jack',18)
// result jack speak 

notes ： It's just constructor syntax sugar , stay JS The compiler is still a constructor

tab （ First create the object type , Redefine the type ）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{
    
            padding: 0;
            margin: 0;
        }
        .tab{
    
            width: 600px;
            height: 600px;
            margin: 0 auto;
        }
        ul{
    
            width: 600px;
            height: 50px;
        }
        ul li{
    
            width: 198px;
            height: 50px;
            background-color: pink;
            float: left;
            list-style: none;
            border: 1px solid orange;
            text-align: center;
            line-height: 50px;
        }
        .active{
    
            background-color: orange;
        }
        .box{
    
            width: 600px;
            height: 550px;
            background-color: skyblue;
            text-align: center;
            line-height: 550px;
        }
    </style> </head> <body> <div class="tab" id="tab1"> <ul> <li> Options 1</li> <li> Options 2</li> <li> Options 3</li> </ul> <div class="box"> Options 1</div> </div> <script> class Tab{
    
            constructor(id){
    
                this.root=document.querySelector(id)
                this.uls=this.root.querySelectorAll('ul>li')
                this.box=this.root.querySelector('.box')
            }
            onClear(){
    
                this.uls.forEach(item => {
    
                    item.classList.remove('active')
                });
                    
                
            }
            onTab(){
    
                let _this=this
                for(let i=0;i<this.uls.length;i++){
    
                    this.uls[i].οnclick=function(){
    
                        _this.onClear()
                        _this.uls[i].classList.add('active')
                        let content=this.innerHTML
                        _this.box.innerHTML=content
                    }
                }
            }
        }
        let t1=new Tab('#tab1')
        t1.onTab()
    </script>
</body>
</html>