Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about the object-oriented and prototype prototype chain in Javascript, which may not be well understood by many people. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Summary of object-oriented theoretical knowledge

* Core answer | basic knowledge should be consolidated

programing language

1. OOP object-oriented:

1) java

2) python

3) C++

4) php

5) C # (ASP.NET)

6) javascript-> Node.js

2. POP is process oriented:

HTML and CSS are markup languages

1) less/sass/stylus:CSS precompiled language, which makes CSS have the characteristics of object-oriented programming.

2) the finished code cannot be directly recognized by the browser and needs to be rendered in the browser after compilation (compiled into normal CSS).

What is object-oriented programming?

1. Object: generally speaking, everything is an object (everything we study and develop in JS is an object "research object")

2. Class: a subdivision of "object", which is divided into our large category and subcategory "category" according to the corresponding functional characteristics.

3. Example: something specific in a category

* about "encapsulation, inheritance, polymorphism" of classes

1) Encapsulation: encapsulate the code that implements a function into a function, which plays the role of "low coupling and high cohesion"

2) inheritance: the subclass and its instances inherit the properties and methods in the parent class.

3) Polymorphism: function overloading (method name is the same, but the number or type of parameters passed is different, identified as two different methods-> background languages have this feature, but there is no strict overloading in JS) and overriding (methods of subclasses overriding parent classes)

JS is a programming language based on the idea of object-oriented.

1. There are many "built-in classes".

1) each data type has a built-in class to which it belongs

2) the acquired collection of elements or nodes also has its own class HTMLCollection / NodeList

3) each element tag has its own class

2. We learn JS: take an instance of a class to study and learn. After the current case study is clear, other instances under the class to which the current instance belongs also have these characteristics.

The creation of custom classes and some detailed knowledge

* Core answer | basic knowledge should be consolidated

Custom class (all classes "built-in class / custom class" are values of "function data type")

When the function is executed, it can be "constructor execution" based on new execution.

? For example: ordinary function and constructor

Function Fn (x, y) {let total = x + y; this.x = x; this.y = y; return total;} / / 1, execute Fn (10,20) as a normal function; / / 2, constructor execution / / description: F1 is an instance object of Fn class let F1 = new Fn (10,20); console.log (f1.x, f1.y, f1.total) / / Note: total is only a private variable in the context and has nothing to do with instance F1 "/ / result: 10 20 undefined

Drawing analysis: (there are pictures and truths)

Constructor VS ordinary function

1. Constructor execution will initially form a private context just like ordinary function execution.

1) AO

2) SCOPE-CHAIN

3) formal parameter assignment

4) variable promotion

5) Code execution

Different places:

1. After creating the context, the browser defaults to help us create an object "instance object".

1) treat the current Fn function as a class "constructor"

2) the object created is an instance of this class

2. During the initial this, let this point to the instance object that is currently created.

3. When the code is executed and the value is returned

1) if the function does not write return, or if it returns a basic data type value, the browser will return the created instance object by default

2) if the function itself returns a reference data type value, it is mainly returned by itself.

? For example two: constructor extension

Function Fn (x, y) {let total = x + y; this.x = x; this.y = y; return {name: 'front-end school'};}

Description:

Because the constructor body returns a reference type value by default, F1 is no longer a created Fn instance, but an object returned by itself.

Let F1 = new Fn (10,20)

Instance instanceof constructor: detects whether the current instance belongs to this class.

Console.log (F1 instanceof Fn); / / false

? For example, function extension

Function Fn (x, y) {let total = x + y; this.x = x; this.y = y; this.say = function say () {console.log (`SAY:$ {total} `);} let F1 = new Fn (10,20); let f2 = new Fn

Drawing analysis: (there are pictures and truths)

Results:

Console.log (F1 = = f2); / / false console.log (f1.say = f2.say); / / false

Fn VS Fn ()

1) Fn represents the function itself (heap Fn-> heap memory (x, y) {...})

2) Fn () executes the function to get its return value

New Fn VS new Fn ()

The Fn is executed, but the first one does not pass arguments, and the second can pass arguments.

1) the priority of new Fn; operation is 18 (no parameter list new)

2) new Fn (); operator precedence is 19 (with argument list new)

* detect whether a property is a member of the current object

1) attribute name in object: whether it is private or public, it is true as long as there is one.

2) object .hasOwnProperty (property name): must be a private property of the object before the result is true

Description: extend a method hasPubProperty (object, attribute name): detect whether the current property belongs to the public property of the object (feature: must have this property, and is not private) (need to be extended)

What do attributes and variables have in common:

No. Properties are members of heap memory, and variables are variables in stack memory or in context.

Console.log ('say' in F1); / / true console.log (' toString' in F1); / / true console.log ('total' in F1); / / false console.log (f1.hasOwnProperty (' say')); / / true console.log (f1.hasOwnProperty ('toString')); / / false console.log (f1.hasOwnProperty (' total')); / / false

? For example four: function extension

Object.prototype.AA = 'Front School'; let obj = {name: 'xxx', age: 11,0: 100, [Symbol (' AA')]: 200,[ Symbol.toPrimitive]: function () {return 0;}}

Traversing objects based on "for...in" loop

1) priority traversal of numeric attributes

2) will not traverse to the Symbol attribute

3) the public property methods that extend themselves to the "class prototype" are also traversed to "enumerable"

For (let key in obj) {

/ / if you traverse to a public attribute during traversal, the traversal is stopped:

/ / because the original intention of for...in traversal is to traverse only private properties

If (! obj.hasOwnProperty (key)) break

Console.log (key)

}

Let keys = [... Object.keys (obj),... Object.getOwnPropertySymbols (obj)]; keys.forEach (key = > {console.log (`attribute name: ${String (key)}, attribute value: ${obj [key]}`);})

Description:

1) Object.keys (obj): gets all the private attributes of the current object that are not Symbol "array" = > Object.getOwnPropertyNames.

2) Object.getOwnPropertySymbols (obj): gets an array of all the Symbol private properties of the object.

Prototypes and prototype chains in object-oriented

* Core answer | basic knowledge should be consolidated

1. Function data type

1) ordinary function

2) Arrow function

3) Generator function

4) Constructor (class)

2. Object data type

1) normal object / array object / regular object / date object.

2) the instance is also of object data type (excluding 7 original value types)

3) the prototype/__proto__ prototype attribute value is also an object (excluding Function.prototype)

3. Most functions (with emphasis on constructors) have built-in properties of prototype (prototype "explicit prototype"). The attribute value is an object, and the properties and methods stored in the object are "public" properties and methods that are called by the instance to which the current class belongs.

1) Arrow function has no prototype attribute

2) there is a built-in property constructor (constructor) on the prototype object, and the property value is the current function itself.

4. Each object has a built-in property of _ _ proto__ (prototype chain "implicit prototype"). The attribute value points to the prototype prototype object of the class to which it belongs.

1) the _ _ proto__ value of the object Object.prototype is null because Object is the "base class" of all objects.

Only draw "heap memory", draw and analyze: (there are pictures and truths)

Parsing instructions:

Each array is an instance of the Array class, so the _ proto_ of each array must point to Array.prototype

Each object is an instance of the Object class, so the _ proto_ property in the Array.prototype object points to Object.prototype

Search mechanism of prototype chain

Arr [1] or arr.push () or arr.hasOwnProperty ()...

1) first find the private properties of the current instance object. If the property is private, the acquisition is private.

2) if not in private, the browser defaults to find the public properties and methods on the class prototype (prototype) based on _ proto_

3) if it cannot be found yet, continue to look up based on the _ proto_ on the prototype object. Until we find Object.prototype. And finally to null.

For example: arr.push arr._proto_.push Array.prototype.push

1) the methods found are all the same

2) the difference is that when the method is executed, the this is different.

(1) arr.push () arr first finds the push method on Array.prototype based on the prototype chain lookup mechanism, and executes the method, this-> arr in the method

(2) arr._proto_.push () directly skips the search for private attributes and finds the public. When the method is executed, the this-> arr._proto_ in the method

Array.prototype.push () this-> Array.prototype

3) _ proto_ is accessed in the IE browser. (so if the code needs to use _ proto_, how can it be used in IE? Result: it can't be used. )

Arr.hasOwnProperty ('push')-> false

Array.prototype.hasOwnProperty ('push')-> true

Whether it is public or private, it has a reference

1) attributes stored in their own heap memory are "private"

2) the properties and methods found based on _ proto_ are "public"

Each array is "both an array and an object" because they can call the properties and methods of Array.prototype and Object.prototype.

* relationship between constructor, prototype and instance

Description of relationship resolution:

Each constructor has a prototype attribute that points to its prototype object, the constructor of the prototype object points to the constructor, the instance is generated through the new constructor, and the _ _ proto__ attribute of the instance points to the prototype object.

? Prototype and prototype chain

Function Fn () {this.x = 100; this.y = 200; this.getX = function () {console.log (this.x);}} Fn.prototype.getX = function () {console.log (this.x);}; Fn.prototype.getY = function () {console.log (this.y);}; let F1 = new Fn; let f2 = new Fn; console.log (f1.getX = = f2.getX) / / false "are private methods" console.log (f1.getY = f2.getY); / / true "are all public methods" console.log (f1.__proto__.getY = Fn.prototype.getY); / / true console.log (f1.__proto__.getX = f2.getX); / / false console.log (f1.getX = Fn.prototype.getX); / / false console.log (f1.constructor) / / fn console.log (Fn.prototype.__proto__.constructor); / / Object f1.getX (); f1.__proto__.getX (); f2.getY (); Fn.prototype.getY ()

Drawing analysis: (there are pictures and truths)

Parsing instructions:

1) first determine which method to execute "private | public"

2) then determine the this in the execution method

3) the last method is executed, and the results needed by the computer can be obtained.

F1.getX ()

Private method executed, this-> F1

Console.log (f1.x) = > 100

F1._proto_.getX ()

The public method for execution, this-> f1.protoplast _

Console.log (f1._proto_.x) = > undefined

F2.getY ()

Executed public method, this-> f2

Console.log (f2.y) = > 200

Fn.prototype.getY ()

Executed public method, this-> Fn.prototype

Console.log (Fn.prototype.y) = > undefined

Rewrite built-in new and extension methods based on built-in class prototypes

* Core answer | basic knowledge should be consolidated

? * 1. The principle of new execution-interview questions (frequently asked in interviews)

Function Dog (name) {this.name = name;} Dog.prototype.bark = function () {console.log ('wangwang');} Dog.prototype.sayName = function () {console.log (' my name is'+ this.name);} / * let sanmao = new Dog ('Sanmao'); sanmao.sayName (); sanmao.bark () * / function _ new () {/ / = > finish your code} let sanmao = _ new (Dog, 'Sanmao'); sanmao.bark (); / / = > "wangwang" sanmao.sayName (); / / = > "my name is Sanmao" console.log (sanmao instanceof Dog); / / = > true

Solution 1 (_ _ proto__ is poorly compatible in IE browsers and is not recommended)

Function _ new (Ctor,... params) {/ / Ctor- > Dog params- > ['Sanmao'] let obj = {}; obj.__proto__ = Ctor.prototype; / / this- > the instance object created can be changed based on the call method let result = Ctor.call (obj,.. params); if (/ ^ (object | function) $/ .test (typeof result) return result; return obj;}

Parsing instructions:

1. Create an instance object. _ _ proto__=== belongs to the class. Prototype

2. The constructor is treated as an ordinary function to execute "private context, scope chain, initial THIS, parameter assignment."

3. Observe the return value executed by the function. If there is no return value or the basic data type value is returned, the instance object is returned by default, otherwise it is mainly based on the value returned by yourself.

Object.create ([pro]): create an empty object with [pro] as the point to the _ _ proto__ of the current empty object (use [pro] as the prototype for the current empty object).

1. [pro] can pass null or an object

2. If null is passed, the current empty object does not have the attribute of _ _ proto__, that is, an instance that does not belong to any class.

? For example:

Let pro = {A: 10, B: 20}; / / Uncaught TypeError: Object prototype may only be an Object or null: undefined console.log (Object.create ()); console.log (Object.create (null))

Solution 2 (incompatible with IE6,7,8 browsers)

Function _ new (Ctor,... params) {let obj = Object.create (Ctor.prototype); let result = Ctor.call (obj,.. params); if (/ ^ (object | function) $/ .test (typeof result)) return result; return obj;}

Solution 3 (better compatibility)

/ / the rewriting method only considers that pro passes an object Object.create = function (pro) {function Proxy () {} Proxy.prototype = pro; return new Proxy;}; function _ new (Ctor) {/ / gets the parameter information passed except the first argument, and stores it in params as an array var params = [] .slice.call (arguments, 1) / / Object.create is compatible with IE low-version browsers and needs to be rewritten var obj = Object.create (Ctor.prototype); / / based on apply, you can either change this or pass each item in the array to the function var result = Ctor.apply (obj, params); if (/ ^ (object | function) $/ .test (typeof result)) return result; return obj;}

* 2. Extend the methods on the built-in class prototype

1. It is more convenient to call

2. Better implementation of chain calls.

* Note: the method written by yourself will override the built-in method, so you should pay attention to it when naming it yourself, usually by setting a prefix, such as myUnique.

? Common array deduplication methods

Function unique (arr) {/ / first deduplicates based on the Set structure, and finally converts to the array let result = new Set (arr); result = Array.from (result); return result;} let arr = [1, 2, 3, 2, 3, 4, 2, 3, 4, 4, 5, 3, 4]; let result = unique (arr); console.log (result)

? First go to repeat, then sort-interview questions (frequently asked in interviews)

Array.prototype.unique = function unique () {/ / this- > arr is generally an instance of the current operation class let result = new Set (this); result = Array.from (result); if the result returned by return result; / / is still an array, you can continue to call other methods of the array-> "chained calls"} / / deduplicating first, and then sorting / / + sort is a method on Array.prototype, so arrays can directly call let arr = [1, 2, 3, 2, 3, 4, 1, 2, 3, 4, 2, 1, 2, 3, 4, 5, 3, 4]; let result = arr.unique (). Sort ((a, b) = > a-b); console.log (arr, result)

Summary of THIS situation and Application of CALL, APPLY and BIND

* Core answer | basic knowledge should be consolidated

1. Several situations of THIS

1) event binding

2) function execution: 1) self-execution function 2) callback function

3) Constructor execution

4) change the this in the function based on call / apply / bind

5) the arrow function does not have its own this, and the this used is in its context

Description: Function.prototype-> call/apply/bind all functions can call these three methods.

Function.prototype.call = function call (context) {/ / this- > fn / / context- > obj / /...}

? Change the this in the function based on call / apply / bind

Window.name = 'WINDOW'; let obj = {name:' front-end Academy', age: 2}; functionfn (x, y) {console.log (this, x + y);} fn (); / / this- > window obj.fn (); / / Uncaught TypeError: obj.fn is not a functionfn.call (obj); / / this- > obj fn.call (obj, 10,20); / / this- > obj x-> 10y-> 20 fn.call () / / this- > window strict mode undefined fn.call (null); / / this- > window strict mode null "passes undefiend the same as" fn.call (10,20); / / this- > 10 "object" x-> 20 y-> undefined

Parsing instructions:

Fn.call (obj)

Underlying processing: fn first finds the Function.prototype.call based on _ _ proto__, and when the call method is executed, the call method implements some functions: it executes the fn and makes the this in the fn become the first actual parameter value.

* the function and details of apply are the same as those of call, except that it is passed to function arguments in a different way.

Fn.call (obj, 10,20); fn.apply (obj, [10,20])

The final result is the same as call, except that when the apply method is executed, it requires that the argument information passed to the function should be placed in an array, but the apply will also pass the argument information item by item to the function just like the call method.

? Requirements: get the maximum value in the array

Let arr = [10, 30, 15, 36, 23]

* method 1: sort first

Arr.sort (function (a, b) {return b-a;}); let max = arr [0]; console.log ('the maximum in the array is:' + max)

* method 2: hypothetical approach

The first method:

Let max = arr [0]; for (let I = 1; I

< arr.length; i++) { let item = arr[i]; if (item >

Max) {max = item;}} console.log ('the maximum value in the array is:' + max)

The second method:

Let max = arr.reduce ((result, item) = > {return item > result? Item: result;}); console.log ('the maximum value in the array is:' + max)

* method 3: borrow Math.max

The first method:

It is not possible for Math.max (10, 30, 15, 36, 23)-> 36 to get the maximum value in a heap Math.max ([10, 30, 15, 36, 23])-> NaN to pass an array

The second method: ES6 expansion operator

Let max = Math.max (.. arr); console.log ('the maximum value in the array is:' + max)

The third method: based on the characteristics of apply

Let max = Math.max.apply (null, arr); console.log ('the maximum value in the array is:' + max)

The fourth method: string concatenation into the final desired expression

Let str = `Math.max (${arr}) `; let max = eval (str); console.log (the maximum value in the 'array is:' + max)

? Requirements: convert a class array collection to an array collection

Rewrite the built-in slice to achieve shallow cloning

Array.prototype.slice = function slice () {/ / rewrite the built-in slice to achieve shallow cloning / / this- > ary let arr = []; for (let I = 0; I

< this.length; i++) { let item = this[i]; arr.push(item); } return arr; }; let ary = [10, 20, 30]; let newAry = ary.slice(); //不传递或者传递0 ->

Shallow clone console.log of the array (newAry, newAry = ary)

Drawing analysis: (there are pictures and truths)

The difference is:

1. This is used in the built-in code, and argument is used in the code written by yourself.

2. If we can make the built-in slice execute and change the this in the method to arguments->, this is actually cloning (transforming) the collection of class arrays into arrays.

3. Let the built-in slice execute: find the slice and add parentheses to execute it.

1) Array.prototype.slice () 2) [] .slice ()

Change the this in the method

1) call 2) apply

4. [] .slice.call (arguments) converts an array of classes into an array

Important: most of the methods in arrays can be borrowed from class arrays based on this principle (changing this). Reason: except that the class array is not an instance of Array, the result of the array is consistent with that of the array, so some code for manipulating the array (similar to loops and other operations) must also be applicable to the class array, so it is possible to borrow methods.

The first method of summation:

Function sum () {/ / arguments: argument collection, which is an array of classes, not an instance of Array, so methods on Array.prototype cannot be called directly, but the structure is very similar to the array, with index + length / / the first method let arr = []; for (let I = 0; I)

< arguments.length; i++) { let item = arguments[i]; arr.push(item); } // 第二种方法 // let arr = [].slice.call(arguments); return arr.reduce((result, item) =>

Item + result);} let total = sum (10,20,30,40)

The second method of summation is implemented by ES6:

Function sum (... arr) {/ / the first method: The argument set obtained by arr based on the residual operator is itself an array / / the second method: Array.from: you can convert a class array (or Set) into an array / / let arr = Array.from (arguments); / / the third method: take out each item in the class array based on the expansion operator and assign values to the array / / let arr = [. Arguments] Return arr.reduce ((result, item) = > item + result);} let total = sum (10,20,30,40); console.log (total); / / result: 100

? Example of this pointing

Let obj = {name: 'front-end Academy', age: 11}; function fn (x, y) {console.log (this, x, y);}

1. Operation 1:

Document.body.onclick = fn

Analysis:

1) when the event is bound, the method is not executed, only the event is triggered, and the browser will help us execute the method.

2) this- > body

3) x-> MouseEvent event object "the browser not only helps us to execute the method, but also passes the event object that stores the information of the current operation to the function"

4) y-> undefined

2. Operation 2:

SetTimeout (fn, 1000)

Analysis:

1) set a timer (the bound function is not executed, only bind a method at this time). After 1000MS, the browser will help us execute fn.

2) this- > window

3) x-> undefined

4) y-> undefined

We expect that the this in the method can be changed and the argument information can be passed to the method when the corresponding method is executed, whether it is an event trigger or a timer.

1. "the idea of dealing with it immediately"

Direct subordinates are not allowed to do this: call/apply executes the function immediately when it is processed, that is, when the event is bound or the timer is set, the fn executes, rather than waiting for the event to trigger or the timer to time before executing the "immediate processing idea."

The code is as follows:

Document.body.onclick = fn.call (obj, 10,20); setTimeout (fn.call (obj, 10,20), 1000)

2. "the idea of pre-processing", "Kohli function".

When we bind a method (whether it is an event binding or setting a timer), we first bind an anonymous function, the event triggers or the arrival time, executes the anonymous function first, and then executes the fn that we need to execute when executing the anonymous function. At this time, we can change the this and parameter information based on call/apply.

The code is as follows:

Document.body.onclick = function (ev) {/ / this- > body fn.call (obj, 10,20, ev);}; setTimeout (function () {/ / this- > window fn.call (obj, 10,20);}, 1000)

Bind is equivalent to call/apply, it does not execute the function immediately, but the implementation handles the this and parameters to be changed, and all execution is carried out according to the original time or trigger node.

The code is as follows:

Document.body.onclick = fn.bind (obj, 10,20); setTimeout (fn.bind (obj, 10,20), 1000)

* Arrow function does not have its own this

? Example 1:

Let obj = {name: 'front-end school', age: 11, fn: function () {/ / this- > obj let that = this; return function () {/ / this- > window / / if you need to change obj.name, you can replace this that.name = 'FE2020'; console.log (this) with that;} }}; let f = obj.fn (); f ()

? Example 2:

Let obj = {name:' Front School', age: 11, fn: function () {/ / this- > obj return () = > {this.name = 'FE2020'; console.log (this); / / {name:'FE2020', age: 11, fn:f}};}}; let f = obj.fn (); f.call

Description:

The arrow function does not have a this (there is no initial this when the method is executed), so it is useless based on call/apply operations, without this.

After reading the above, do you have any further understanding of the object-oriented and prototype prototype chains in Javascript? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.