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

This article mainly introduces the relevant knowledge of "how to use JavaScript prototype objects". The editor shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "how to use JavaScript prototype objects" can help you solve the problem.

The class you understand? What are the characteristics of the class? (encapsulation, inheritance, polymorphism)

A class is actually a "special function", just like function expressions and function declarations that you can define, class syntax consists of two components: class declaration and class expression. The body of the class is executed in strict mode.

The body of a class is made up of a pair of curly braces {}, which is where the members of the class are defined. [members are mainly methods or constructors]

All methods of the class are equivalent and are defined on the prototype property of the class. Calling a method on the actual column of a class is equivalent to a method on the calling prototype.

Class A () {constructor () {} a () {} b () {}} / / is equivalent to A.prototype = {constructor () {}, a () {}, b () {}}

Composition:

Constructor:

The constructor method is a special method used to create and initialize an object created by class. A class can only have one constructor, if more than one will report an error, if not, an empty constructor will be added by default. Where constructor returns the actual column object [that is, this] by default. A constructor can call the constructor of a parent class using the super keyword.

Attribute

Prototype method: this method does not need to add the function keyword, just put the definition of the function into it. Methods and methods cannot be separated by commas, and an error will be reported.

Static methods: use static to define static methods, call static methods, can not be called by the real column of the class, can only be called using the class.

Value function getter and store value function setter: use the get and set keywords in the class to set the store value and value function on an attribute to intercept the access behavior of the attribute.

Class syntax:

Class declaration: using the class keyword

Class Rectangle {constructor (height,width) {this.height=height; this.width=width;}}

Note: the difference between function declaration and class declaration: class declaration will not be promoted, function declaration will be promoted.

Class expressions: class expressions can be named or anonymous. The name given to a named class expression is the local name of the principal of the class.

Let Rectangle=class {/ / anonymous class constructor (height,width) {this.height=height; this.width=width;}} let Rectangle=class Rectangle {/ / named class constructor (height,width) {this.height=height; this.width=width;}}

Use extends to create subclasses:

The extends keyword is used in a class declaration or class expression to create a class as a subclass of another class.

Use super to call the superclass:

The super keyword is used to call a function on the parent of an object

Properties of the class:

-Encapsulation: mainly through functions, private properties and methods are set mainly through block-level scope

-Polymorphism: can be called through functions, because parameters can be changeable

-inheritance: mainly through the prototype chain

What happens when we have a normal function in new?

Create a new object based on the prototype property of the constructor (note the distinction from the private field [[prototype]])

Pass the this and call parameters to the constructor, and execute

If the constructor returns an object, it returns, otherwise the object created in the first step is returned.

Behavior like new tries to make the syntax of a function object similar to a class, but it objectively provides two ways: one is to add attributes to the constructor, and the other is to add attributes to the constructor's prototype attribute.

Does the function name after new have to be capitalized?

No, mainly for the convenience of district classification. General constraint is uppercase

How to understand ProtoType? The process of finding a property of an object?

Prototype:

Each function has a special property called prototype object [prototype]

Js is a prototype-based language, and each object has a prototype object, which takes its prototype as a template and inherits methods and properties from it. These properties and methods are defined on the prototype property above the object's constructor, not on the object's instance itself.

Prototype objects can then have prototype objects and inherit methods and properties from them, layer by layer, up until the prototype object of an object is null, which is the prototype chain.

When an object instance is created, a link [_ _ proto__ property] is established between the object instance and its constructor, which is derived from the constructor's prototype property. That is, _ _ proto__ and the constructor's prototype point to the same object] Object.getPrototypeof (new Foobar ()) and Foobar.prototype are equal.

Object.create (). Creates a new object from the specified prototype object. Var newObj=Object.create (obj). Then the _ _ proto__=obj of newObj

Each enumerated object inherits a constructor property from the prototype. This property points to the constructor that constructed this instance.

Properties are generally defined in the constructor and methods are defined in the prototype.

Generally, a new object is instantiated by the constructor, and the prototype object of the new object is composed of a constructor and an Object prototype object. The prototype object of the function constructor is also composed of another constructor and a Function prototype object.

Var F=function () {}; Object.prototype.a=function () {}; Function.prototype.b=function () {}; var f=new F (); / / the result above is that f can get a, not b. Details: 1.f.__proto__===F.prototype 2.F.prototype.__proto__===Object.prototype (so f can access a) 3.f.constructor===F 4.F.__proto__===Function.prototype (so f.constructor.b can access)

The process of finding attributes:

1. First find out whether your body attribute is included by the attribute.

two。 If not, the prototype chain will be searched up layer by layer until the attribute of the name is found.

3. If you find the end of the final prototype chain, that is, the final prototype is null, then the attribute is not found. Undefined will be returned

Different methods to create objects and prototype chains

1. Create objects using syntactic structures

Var o = {a: 1}; / / this object inherits all the properties above Object.prototype / / there is no property named hasOwnProperty / / hasOwnProperty is a property of Object.prototype / / so the prototype of hasOwnProperty// Object.prototype that inherits Object.prototype is null// prototype chain as follows: / / o-- > Object.prototype-- > nullvar a = ["yo", "whadup", "?"] / / arrays are inherited from Array.prototype / (Array.prototype includes indexOf, forEach, etc.) / / prototype chains are as follows: / / a-- > Array.prototype-- > Object.prototype-- > nullfunction f () {return 2;} / / functions are inherited from Function.prototype// (Function.prototype includes call, bind, etc.) / / prototype chains are as follows: / / f-- > Function.prototype-- > Object.prototype-- > null

two。 Create an object using a constructor

Function A () {this.a = 1x this.b = 2;} A.prototype = {write: function () {console.log (this.a);}}; var a = new A (); / an is the generated object, and its own attributes are'a 'and' b'.

3. Use Object.create () to create an object (ES5)

Var a = {a: 1}; / / a-- > Object.prototype-- > nullvar b = Object.create (a); / b-- > a-- > Object.prototype-- > nullconsole.log (b.a); / / 1 (inherited) var c = Object.create (b); / / c-- > b-- > a-- > Object.prototype-- > nullvar d = Object.create (null); / / d-- > nullconsole.log (d.hasOwnProperty) / / undefined, because d does not inherit Object.prototype use

4. Create an object using class (ES6)

Class A {constructor (a this.b; b) {this.a = a; this.b = b;} class B extends A {constructor (a meme b) {super (a meme b); this.c=c;} get ab () {return this.a + this.b;} set d (d) {this.a = d; this.b = d; this.c= d;}} var a = new A / / the prototype object of / an is A.prototypevar b = new B, and the prototype object of / b is B.prototype.

What happens when an object sets properties?

If the object contains normal data access properties, direct assignment will only modify the property value

Var a = {bread1} / / because b is a common property of an and the data type is Number

A. b = "a"; / / directly change the type of b to String and assign it to'a'.

If the attribute is not found by the object, and the prototype chain is not found, an attribute is added to the object by default.

Var a = {} / / b is not a common attribute of a, and it is not on the prototype chain.

A. b = "a"; / / add the type of b directly to a, which is String, and assign the value to'a'.

If attribute b exists on the prototype chain

/ / if there is a normal data access attribute named b at the top of the prototype chain and is not marked as writable:false, a new attribute named b is directly added to a with a value of'a'. And the b on the prototype chain will be blocked:

Function A () {}; A. prototype.bachel1; var a=new A (); a.baccala'

/ / there is b at the top of the prototype chain, but it is marked as read-only, so you cannot modify existing properties or create masking properties in a. If you run in strict mode, the code will throw an error, otherwise, the assignment statement will be ignored, in short, no blocking will occur.

Function A () {}; A.prototype.b=1 Object.defineProperty (A. prototype paramagrams, {configurable:true, writable:false}) var a=new A (); a. Baked prototypes. Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.