1. Object oriented

  • Object orientation is not a technology, but a way of thinking to solve problems
  • The essence of object orientation is the encapsulation of process orientation

1, 2 object

The essence of an object is a bridge between program code and the real world. It has two meanings

  • Object: Is a data type (container for storing data) that stores data as key-value pairs
  • Object: An abstraction of a physical object in the real world.

1.3 Object-oriented Programming Examples 01

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height: 50px; margin-top: 20px; background-color: greenyellow; } p{ height: 50px; margin-top: 20px; background-color: hotpink; } < / style > < / head > < body > < div > < / div > < div > < / div > < div > < / div > < p > < / p > < p > < / p > < p > < / p > < script > / / demand: give three set up border < div and p tags! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height: 50px; margin-top: 20px; background-color: greenyellow; } p{ height: 50px; margin-top: 20px; background-color: hotpink; } </style> </head> <body> <div></div> <div></div> <div></div> <p></p> <p></p> <p></p> <script SRC ="jquery-1.12.4.js"></script> <script> Need: set border $('div,p').css('border','10px solid green') for three div and p tags; </script> </body> </html>Copy the code

2.- Built-in object API

  • Learning portal: www.runoob.com/jsref/jsref…

2.1 Array object API

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> title </title> </head> <body> </body> <script> // Declare an array Let arr = [10,20,30] /*1. Arr.push (element) Adds elements to the front: arr.unshift() Removes the last element: arr.pop() Removes the first element: Arr.shift () Removes the element at the specified position: Arr. Splice (start subscript, delete number) */ //2. Let STR = arr.join()//10,20,30 console.log (STR)// 3. Reverse array var newArr = arr.reverse() console.log (newArr)//[100,20,10] //4 Array sort let arr1 = [10,20,70,40,50,60] Arr1.sort (function (a,b) {return a - b}); Console. log (arr1)// From small to large </script> </ HTML >Copy the code

2.2- String object API

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> <script> let STR = "I love you!" ; Let index1 = str.indexof (" black horse ")// If there is a string, Let index2 = str.indexof (" kun ") let index3 = str.indexof (" black kun ") Log (index1, index2, index3)//0,6,-1 //2 truncate the first argument of the string from which the second argument is truncated: Let str1 = str.substr(2,4)// appearance level as console.log (str1)// 3 modify string first argument: string second argument to modify: Let str2 = str.replace(" dark horse "," telepathic podcast ") console.log (str2)// Telepathic podcast //4 Delimit strings: Delimit strings according to the specified symbols. Get an array let str3 = "I & love & you" // The return value of this function must be an array let arry = str3.split("&")// Split string [I, love, you] console.log (arry)// [I, love, you] //5 case conversion (only English case, Log ("AKlkshflsLKJHDHL".tolowercase ())// convert toLowerCase AKlkshflsLKJHDHL console.log ("AKlkshflsLKJHDHL".tolowercase ()) "AKlkshflsLKJHDHL".toupperCase ())// uppercase AKlkshflsLKJHDHL console. Log (" Chinese does not have case ".tolowerCase ())// lowercase </script> </html>Copy the code

3. Prototype objects

3.1 Factory functions: Functions used to create objects in batches

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge" /> <title>Document</title> </head> <body> <script> Factory functions:  function createPerson (name, age, Sex) {//(1) create empty object let p = {} //(2) assign object value p.name = name p.age = age p.ex = sex //(3) Return p} let p1 = CreatePerson ('ikun', 32, 'male ') let p2 = createPerson(' monitor ', 38,' male ') let p3 = createPerson('ikun', 28, 'male ') console.log(p1, p2, p3) </script> </body> </html>Copy the code

3.2 Key constructors

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge" /> <title>Document</title> </head> <body> <script> /* Constructors create objects in the same way as factory functions. But the constructor code is much cleaner. Call a function */ function Person (name, age, Sex) {//(1) create an empty object {} //(2) refer to this object this = {} //(3) assign the object this.name = name this.age = age this.sex = sex //(4) return this object Return this} let person1 = new Person('ikun', 32, 'male ') let person2 = new Person(' monitor ', 38, Let person3 = new Person(' person1 ', 28, 'male ') console.log(person1, person2, Person3) /* Declare an empty function */ / function fn() {} // let res1 = fn() // let res2 = new fn() // constructor // console.log(res1,  res2) </script> </body> </html>Copy the code

4. Prototype objects

Prototype: When any constructor is created, the system automatically creates a corresponding object, called the prototype object

Solve both memory waste and global variable pollution problems

Who has access to members (properties and methods) in the prototype object

Constructor itself: constructor name. Prototype

Constructor for each object instantiated: point syntax for direct access

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge"> <title>Document</title> </head> <body> */ function Person(name,age){this.name = name; this.age = age; }; Each function has a prototype attribute that points to the prototype object */ console.log(person.prototype); Prototype. SayHi = function(){console.log(' I love you '); }; /* 4.4 Who can access the members of the prototype (attributes + methods) Let p1 = new Person(' monitor ',18); let p1 = new Person(' monitor ',18); p1.sayHi(); Let p2 = new Person(' class ',20); p2.sayHi(); console.log(p1.sayHi === p2.sayHi); //true </script> </body> </html>Copy the code

4.1 __ proto __Attribute is introduced

  • 1. Belongs to an object, pointing to the stereotype corresponding to the constructor that instantiates this object

  • 2. The proto attribute is not a W3C standard attribute, so it is generally not used to access prototypes in real development

    • Developer.mozilla.org/zh-CN/docs/…

    • To add a property method to a prototype, use a constructor to access the constructor name. Prototype

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge" /> <title>Document</title> </head> <body> <script> /* 1. Prototype attribute: prototype_object () : prototype_object (); You can give instance objects access to the member */ //1 in the prototype. Function Person (name, age) {this.name = name this.age = age} //2 Prototype object person.prototype. eat = function () {console.log(' I really ate my lunch ')} person.prototype. country = 'Chinese' //3 Let p1 = new Person(' monitor ', 28) console.log(p1) /* __proto__ : */ console.log(person.prototype === p1.__proto__)//true // Although the principle that instance objects have direct access to prototypes is __proto__, the use of 2 is not recommended in development. Reason: __proto__ is not ECMA standard syntax and some browsers do not support it. 3. Conclusion: the learning phase, a prototype of the study can use __proto__. The actual development, suggest to omit __proto__ * / p1) eat () / / p1 __proto__. Eat () < / script > < / body > < / HTML >Copy the code

Introduction to the constructor property

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge" /> <title>Document</title> </head> <body> <script> /* 1. Prototype: belongs to the constructor, points to the prototype object * Constructor: Lets the instance know which constructor it was created by */ //1. Function Person (name, age) {this.name = name this.age = age} //2 Prototype object person.prototype. eat = function () {console.log(' eat ')} //3 Let p1 = new Person(' pudding ', 3) p1.eat() console.log(p1.type) /* constructor: Belongs to a prototype object that points to a constructor: Can tell instance objects created by the constructor * / console log (Person) prototype) constructor) / / Person console. The log (Person. The prototype. The constructor = = = Person )//true console.log( p1.constructor )//Person p1.__proto__.constructor </script> </body> </html>Copy the code

Static and instance members

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge"> <title>Document</title> </head> <body> <script> /* Constructors can also have properties of their own: prototype Static members: instance members that belong to function objects: Function Person(name,age){this.name = name; this.age = age; }; Person. Aaa = 'aargh '; console.log(Person.aaa); Let p1 = new Person(' zhang3 ',20); console.log(p1.name); // Instance member console.log(p1.age); // Instance member </script> </body> </ HTML >Copy the code