Constructor and inheritance in JavaScript

Overview

This is a summary of the alignment and inheritance that I saw when I looked at JavaScript's object-oriented Programming Guide constructor .

Detailed knowledge of them can be found on the Internet, so I only write those not on the Internet.

Content

• constructorThe understanding
• constructorThe actual use of
• constructorThe trap
• Understanding inheritance from an application perspective
• Inheritance of function constructors
• Inheritance of pure objects

constructorThe understanding

constructorproperty is a pointer to the function that created the object. (Can be changed)

constructorThe actual use of

Look at the following code:

var a,b;(function(){  function A (arg1,arg2) {    this.a = 1;    this.b=2;   }  A.prototype.log = function () {    console.log(this.a);  }  c = new A();})()c.log();// 1

Instance c is built with closures, but because a is inside a closure, we cannot directly access a. But what if you need to add a method to a? method is used constructor .

c.constructor.prototype.log2 = function () {  console.log(2)}c.log2();// 2

constructorThe trap

//继承Child.prototype = new F();Child.prototype.constructor = Child;

We generally in the inheritance, to the constructor property to reset, such as the above code, this is why?

Let's take a look at an example:

function Dog(){this.tail = true;}var benji = new Dog();Dog.prototype.say = function(){return 'woof';};Dog.prototype = {paws:4}var lucy = new Dog();benji.constructor.prototype.paws//4lucy.constructor.prototype.paws//undefined

Where, benji and lucy both are Dog() sub-objects, but the results are not the same. The cause of this result is a Dog.prototype = {paws:4} reset Dog() of the prototype. (The principle is unclear, seemingly and __proto__ related.) ）

If you Dog.prototype = {paws:4} add a statement later, the Dog.prototype.constructor = Dog; result is the same. This is why you want to reset in the inheritance constructor .

Understanding inheritance from an application perspective

Inheritance is the code reuse of the parent element.

//父元素是函数构造器function Parent() {    this.id = 3;   //带this的自身属性    var od = 5;  //不带this的自身属性}Parent.prototype.ud = 7;  //原型属性//父元素是纯对象Parent= {id:9};Parent.prototype.ud = 7;

In general, the parent element is divided into 2 types: the function constructor and the pure object. The code inside the parent element is divided into its own attributes and prototype properties. (Methods and properties are similar, so only attributes are considered.) ）

So let's discuss the code reuse of the function constructor and the pure object separately, that is, property inheritance.

Inheritance of function constructors

• Inherit only prototype properties

It is simple to assign the prototype of the parent object to the child object. ( prototype inheritance method )

Child.prototype = Parent.prototype;

But in this case, modifying the prototype of a child object will affect the prototype of the parent object, so we consider closures. ( temporary constructor method )

var F = function() {};F.prototype = Parent.prototype;Child.prototype = new F();Child.prototype.constructor = Child;

However, if the prototype of a child object has a value, it cannot be assigned directly to the prototype. At this point, we can copy the attributes directly to the past. ( prototype attribute copy method )

var p = Parent.prototype;var c = Child.prototype;for (i in p) {    c[i] = p[i];}

Of course, there is the deep copy method , where the code is not posted.

• Inherits only its own properties.

The first thing that comes to mind is the copy method , where the code above is subsidized. However, the copy method can only inherit its own property without this in the parent object.

If you want to inherit only the own property with this, you can use the constructor to borrow the method .

function Child() {    Parent.apply(this, argument);}

If you want to inherit all, then you can only combine the two.

• Inherit both its own properties and prototype properties

At this time, the first thing we think about is use new . ( prototype chain method )

Child.prototype = new Parent();

It is important to note that the child object inherits only this its own elements that are in the parent object, and does not inherit this its own elements.

Other methods can only be combined with the above methods.

Inheritance of pure objects

• Inherit only prototype properties.

Is the same as the inheritance of the function constructor.

• Inherits only its own properties.

When the parent element is a pure object, it does not contain its this own elements. So just use the copy method.

In addition, you can also put the parent element's own elements inside the child elements prototype . (Prototype inheritance method)

function object() {    function F(){};    F.prototype = Parent;    return new F();}

• Inherit both its own properties and prototype properties

This is the combination of the above methods.

Constructor and inheritance in JavaScript