This is the 23rd day of my participation in the August More Text Challenge.

preface

Finally inheritance, very exciting, as a front end, you say you don’t know anything about JavaScript inheritance that’s impossible. Inheriting, inheriting properties, methods of other objects. JavaScript implements inheritance through archetypal patterns. But when it comes to practical details, you may still be overwhelmed. Mainly lack of practical experience to support the theory, let’s see what this book can bring for yourself.

Chapter V Succession

In traditional object-oriented languages, classes inherit properties from other classes.

In JavaScript, inheritance can occur between inheritance relationships that have no classes. Like the prototype object we saw earlier.

Prototype Object chain and Object.prototype

The properties of the prototype object can be accessed by the object instance, that is, the object instance inherits the properties of the prototype object.

A stereotype object is also an object that has its own stereotype object and inherits its properties. This is the prototype object chain.

Method inherited from Object.prototype

  • hasOwnProperty()
  • propertyIsEnumerable()
  • isPrototypeOf()
  • valueOf()
  • toString()

Modify the Object. The prototype

  • Modifying Object.prototype to add methods to all objects is not recommended, as this may introduce unknown errors

  • Add a method to Object.prototype that can be iterated through by for-in. Because the method is enumerable.

    Object.prototype.add = function(value){ return this + value } var empty = {} for(var property in empty){ Console. log(property) if(empty.hasownProperty (property)){// Filter properties on Object.prototype if the prototype chain is long, Console. log(property)}}

Object inheritance

Object inheritance refers to specifying [[Protoype]] of an object as a prototype and creating a new object.

Object.create(param1, param2)

  • The first argument is [[prototype]] as a new object

  • The second optional argument is an attribute description object

    var person1 = { name: ‘Nicholas’, sayName: function(){ console.log(this.name) } }

    var person2 = Object.create(person1, { name: { configurable: true, enumberalbe: true, value: “Greg”, writable: true } })

    person1.sayName() // Nicholas person2.sayName() // Greg

    console.log(person1.hasOwnProperty(“sayName”)) // true console.log(person1.isPrototypeOf(person2)) // true console.log(person2.hasOwnProperty(“sayName”)) // false

Constructor inheritance

function Rectangle (length, width){ this.length = length this.width = width } Rectangle.prototype.getArea = function(){ return this.length*this.width } Rectangle.prototype.toString = function(){ return "[Rectangle " + this.length + "X" + this.width + "]" } function Square(size){ this.length = size this.width = size } Square.prototype = new Rectangle() Square.prototype.constructor = Square Square.prototype.toString = function(){ return "[Square " + this.length + "X" + Rectangle = new Rectangle(5); Rectangle = new Rectangle(7); Rectangle = new Rectangle(7); Rectangle = new Rectangle(7);Copy the code

Constructor steal

Call (or bind, apply) the parent class’s constructor

function Rectangle (length, width){
    this.length = length
    this.width = width
}
Rectangle.prototype.getArea = function(){
    return this.length*this.width
}
Rectangle.prototype.toString = function(){
    return "[Rectangle " + this.length + "X" + this.width + "]"
}

function Square(size){
    Rectangle.call(this,size, size)
}
Square.prototype = Object.create(Rectangle.prototype,{
    constructor: {
        configurable: true,
        enumberable: true,
        value: Square,
        writable: true
    }
})
Square.prototype.toString = function(){
    return "[Square " + this.length + "X" + this.width + "]"
}

var square = new Square(6)
Copy the code

Access the parent method

  • Traditional language implementations access super.method methods

  • JavaScript by Parent. The prototype. The method call (child) to call the Parent class method

    Square.prototype.toString = function(){ vartext = Rectangle.prototype.toString.call(this) return vartext.replace(“Rectangle”, “Square”) }

Call, Bind, and Apply provide developer-oriented access to all functions

summary

It feels like all of these things, boo-hoo, but after reading this chapter, it feels like the problems in Chapter 4 can be sorted out. After all, the blind men touch the elephant, and now the pieces of the elephant are out and it’s time to complete their own jigsaw puzzle. Tease out some confusing points.

  1. A property of an object instance accesses its own properties first, and then the properties of its prototype object. This process is hidden within the JavaScript implementation. Is there a way to directly access the prototype object of an object instance? There is only one and that is Object.getProtoTypeof (). This is the __proto__ pseudo-attribute that was removed from ES3, and many browsers are starting to dissupport it. Many tutorials use this to explain prototype chains, and we can make sense of this by replacing all __proto__ with object.getprototypeof ().

  2. Constructor, new + constructor creates a new object that points the object’s [[prototype]] to the constructor’s prototype.

  3. A constructor is a function that, when declared, initializes its Prototype property, which is an object. The prototype object’s constructor property points to the function itself

  4. Through the Object. The create (prototype, obj2). Create an object from Prototype’s constructor property and perform further operations on the object’s own properties according to obj2.

  5. I’ve been wondering about function objects. Declare a constructor. Shouldn’t the prototype of this constructor be JavaScript’s built-in object Fuction? Person. Prototype doesn’t point to Function. Person. Prototype and Object.getProtoTypeof (Person). The former is because Person is a function that has a prototype property, which is not the prototype object of the function itself, but the prototype object of the objects constructed from that function. Object.getPrototypeOf(Person) === Function.prototype // true

  6. About apply,bind,call, borrow constructors.

    Function Square(size){Rectangle. Call (this,size, Rectangle); size) } Square.prototype = Object.create(Rectangle.prototype,{ constructor: { configurable: true, enumberable: true, value: Square, writable: true } }) var square = new Square(6)

It’s hard to think all at once.

Rectangle. Call (this,size, size) This line of code is essentially just the object that manipulates this pointer through this pointer. It has nothing to do with the object prototype, just a clean function call.

The constructor function (Square) has a constructor that points to Square.

Rectangle. Prototype = Square; Rectangle. Prototype = Rectangle. This wave operation just feels like it’s killing me. He borrowed all the methods of the Rectangele archetype.

So by borrowing constructors, you achieve two goals: the constructor code’s operations on its own properties, and the constructor property of the constructor object pointing to itself. As long as you accomplish these two goals, you are a qualified constructor. Other methods on the Prototype object are up to you to add as needed.

PS:

Today I saw a handwritten Promise article that was quite good. I was almost ready to write a handwritten Promise, easy to understand. I’ve learned a lot, but I’ll finish this object-oriented book first. Read a book every day, every day to knock on the code, feel that look at these handwritten source code things are not that unfamiliar, may also be the big guy explained thoroughly. Keep going and let nature take its course.

The article links

I may feel very fruitful, but the explanation is not very friendly. A lot of confused points, are troubled for a long time. Now I can only understand by myself and see when I can improve my ability. I can let others understand by the simplest example. I’m so lazy for today.