Object access mechanism and others

 

Object access mechanism  

         When accessing members of an object

         If the object itself has ,  Directly return the result to you ,  Stop querying

         If the object itself does not ,  Will go automatically.  __proto__  Visit

         Return results if any ,  Stop querying .

utilize  prototype  and  __proto__  and   Object access mechanism

         Solved the unreasonable of constructor

         Properties are written directly in   Constructor body

         Method written in   Constructor's  prototype  On

         Use the constructor to create a   There are properties   There are ways to   reasonable   object

        prototype effect :  Is to write some methods for the instance object of the constructor to use

function Person(name, age) {
 this.name = name;
 this.age = age;
 }

 Person.prototype.sayHi = function () { console.log('hello world') }

 //  Use  Person  Create an object
 let p1 = new Person('Jack', 18);
 console.log(p1);

 //  When I visit  p1.name  When ,  I have
 console.log(p1.name);
 p1.sayHi();


 //  Create an instantiated object again
 let p2 = new Person('Rose', 20);
 p2.sayHi();

        

 

Constructor related  this  Point to

        1.  Inside the constructor  this  Point to

     and  new  Keyword combination , this  Point to the current instance

        2.  In the method on the constructor prototype  this  Point to

     The method relies on the instance object to call

  Object oriented tab

1.  Abstract content

         attribute  btns、 tabs

       Method for switching click events

2.  Implement tabs in methods

         After the loop binding event ,  Find out  this  The point is no longer   The instance

         Can't get  btns  and  tabs

         Solution 1:

           Save in advance  this  Is a variable

         Solution 2:

           Use the arrow function

           Because the arrow function doesn't  this,  Of external scope  this

      

 function Tabs(ele, options = {}) {
 //  Get the scope of the tab that appears
 this.ele = document.querySelector(ele)
 //  find  btns
 this.btns = this.ele.querySelectorAll('ul > li')
 //  find  tabs
 this.tabs = this.ele.querySelectorAll('ol > li')
 //  Initialize it  options
 this.options = options
 this.change()
 }

 Tabs.prototype.change = function () {
 //  It operates on the current instance  btns  and  tabs
 // this  This is the current example ,  We're going to give  this.btns  For each add click event
 this.btns.forEach((item, index) => {
 item.addEventListener(this.options.type || 'click', () => {
 this.btns.forEach((t, i) => {
 t.className = ''
 this.tabs[i].className = ''
 })
 //  Add the class name to the corresponding
 item.className = 'active'
 this.tabs[index].className = 'active'
 })
 })
 }
 new Tabs('.box2', { type: 'mouseover' })
 new Tabs('.box3');

 let t1 = new Tabs('.box', { type: 'click' })
 console.log(t1);

Definition :

        1.  Each function comes with an attribute called  prototype,  It's an object

        2.  Each object is born with a property called  __proto__  Of the constructor to which it belongs  prototype

        3.  Be an object ,  When there is no exact constructor to instantiate ,  We all think of it as a built-in constructor  Object  Example .

1. var arr = [] , Array  Example
2. var obj = {} , Object  Example
3. var p1 = new Person() , Person  Example
4. var time = new Date() , Date  Example
5. var fn = function () {} , Function  Example
6. Person.prototype , Object  Example
7. Array.prototype , Objec  Example

Conclusion :

         Any object starts to set out

         according to  __proto__  Start looking up

         Eventually you can find  Object.prototype

         We use this  __proto__  A chained structure of objects connected in series ,  It's called the prototype chain

         Prototype chain action :  Service for object access mechanism

   Prototype chain

         Starting from any object ,  according to  __proto__  A chained structure of objects connected in series

         Exists for object access mechanisms

   Usage method ： Array   Extend a method

         stay : Array.prototype  On

     If I want to give   function   Extend a method

         stay : Function.prototype  On

  

  Prototype

       Functions come naturally  prototype  Properties of

         Store some methods ,  For all instances of this constructor

 

constructor  attribute ( Constructors )

         Only the one that comes naturally with functions  prototype  There are

         Indicates which constructor comes with me   Prototype object

         effect :  Judge data type

  

Judge data type

        1. typeof

           Accurately judge the basic data type

           shortcoming ：  Not accurate for complex data types

 

2. constructor

       Use the properties of the prototype

           Using object access mechanism

• instanceof

  Usage method :  object  instanceof  Constructors

4. Object.prototype.toString.call()

           Usage method : Object.prototype.toString.call( The type of data you want to detect );

Understanding the object

  A type of data

         Store data in the form of key value pairs

         because  __proto__  and   Prototype chain   You can access properties you don't have

for in  loop

         Specifically traversing objects

         Traverse all attributes on the object

         Traverse all of the objects   enumerable   Properties of ( Including all... On the prototype chain   enumerable   attribute )

           Is a custom attribute

The object's own way

      

  1. hasOwnProperty()

           Check whether it is your own attribute

           Usage method :  object .hasOwnProperty(' The property name you want to detect ')

        2. defineProperty()  The data was hijacked

         A method of adding attributes to an object

           I can set various behavior states for a property I set

           Usage method : Object.defineProperty( Which object to add ,  key, {

             Added settings

          })