current position:Home>[Japanese arch pawn] javascript object-oriented essentials 4

[Japanese arch pawn] javascript object-oriented essentials 4

2021-08-26 00:40:14 ZZHoliday

Preface

This is my participation 8 The fourth of the yuegengwen challenge 22 God , Check out the activity details : 8 Yuegengwen challenge

Chapter four Constructors and prototype objects

Constructors

Here is a brief introduction to the constructor

  • The only way to create an object is through new + Constructors

  • Constructor initials need to be capitalized

  • Use new+ Constructor creates an object , If you do not need to pass in parameters, you can omit parentheses

  • It can be used instanceof The operator , Determine whether an object is an instance of a type

  • new + Constructor creates an object , Object's constructor Property will point to the constructor .( because constructor Properties can be overridden , It is recommended to use instanceof To check the object type )

  • Default return this, That is, the newly created object . You can also display the call return,reutrn If the return value is an object , Then the return value ,return The return value is the original type , Then continue to return the newly created object .

  • When you don't use new When , In the constructor this It points to the global object , Error will be reported in strict mode .

    function Person(name) { this.name = name this.sayName = function(){ console.log(this.name) } } var person1 = new Person('a') var person1 = new Person('b') console.log(person1.name) console.log(person2.name) person1.sayName() person2.sayName()

    console.log(person1 instanceof Person) // true console.log(person1.constructor === Person) // true

Summary : new + Constructor create object , Through... In the constructor this Make the created objects have the same properties and methods . The problem is that the methods so declared are not shared , Instead, each object has its own method , Consumes more space . Intuitively , All objects use the same method , Obviously better .JavaScript Prototype objects in , That's how it's played .

Prototype object

Create the specific execution of the object

  1. A new object is created .
  2. This object will be executed [[Prototype]] link .
  3. The generated new object is bound to the function call this.
  4. adopt new Each object created will eventually be [[Prototype]] Linked to this function prototype On the object .
  5. If the function does not return an object type Object( contain Functoin, Array, Date, RegExg, Error), that new The function call in the expression automatically returns the new object .

[[Prototype]] attribute

  • Object instances are created through internal properties [[Prototype]] Track its prototype object

  • new When you create an object , It's going to take the object [[Prototype]] The internal property is assigned to the prototype object of the constructor , for example Person.prototype

  • Use Object.getPrototypeOf(object) Gets the name of the object instance [[Prototype]] Internal attributes

  • Use Object.prototype.isPrototypeOf(object) Determine whether the object is an instance of the prototype object

  • Reads the properties of the object , Along the object's own properties 、[[Prototype]] Object

    function Foo() {} function Bar() {} function Baz() {}

    Bar.prototype = Object.create(Foo.prototype); Baz.prototype = Object.create(Bar.prototype);

    var baz = new Baz();

    console.log(Baz.prototype.isPrototypeOf(baz)); // true console.log(Bar.prototype.isPrototypeOf(baz)); // true console.log(Foo.prototype.isPrototypeOf(baz)); // true console.log(Object.prototype.isPrototypeOf(baz)); // true

Object instances The difference between prototype objects

Using prototype objects in constructors 、 Change the prototype object

How to use prototype objects 、 The impact of changing the prototype object on subsequent object operations

function Person(name){
    this.name = name
}
Person.prototype = {
    constructor: Person,
    sayName:function(){
        console.log(this.name)
    }
    toString:function(){
        return "[Person "+this.name+"]"
    }
}

var person1 = new Person("Nicholas")
var person2 = new Person("Greg")

console.log("sayHi" in person1)
console.log("sayHi" in person2)

Person.prototype.sayHi = function(){
    console.log("Hi")
}
person1.sayHi()
person2.sayHi()
 Copy code 

Prototype objects of built-in objects

Prototypes of built-in objects can also be modified , And add your own methods

Array.prototype.sum = function(){
    return this.reduce(function(previous,current){
        return previous + current
    })
}
var numbers = [1,2,3,4,5]
var result = numbers.sum()
console.log(result)
 Copy code 

Summary :

Don't get around much anymore . Read this article with great passion , But many of the concepts he said seem to be basic operations . But because it's too basic , I can't see anything , Bright spot . The only doubt is the object instance , Constructors , The concept of object prototypes , This book only gives an introduction , Without making a corresponding mind map , It makes people feel a lot of confusion . I want to summarize myself , But I don't think it's time , I can only wait for the next opportunity with regret .

copyright notice
author[ZZHoliday],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210826004011305n.html

Random recommended