JS prototype chain and inheritance analysis (first experience)

First, define an object obj, and the prototype of the object is obj._proto_. We can use the getPrototypeOf method in ES5 to query the prototype of obj. We prove whether the prototype of obj is equal to Object.prototype to prove whether the prototype of obj exists. The answer returns true, so it exists. Then we define a function foo(), and any function has its prototype object, that is, the function prototype. We can add any attributes to the function prototype, and then share its attributes by new instantiated object (the following two examples will be introduced in detail).

 function foo(){}foo.prototype.z = 3;var obj = new foo();obj.x=1;obj.y=2;obj.x //1obj.y //2obj.z //3typeof obj.toString; //functionobj.valueOf(); // foo {x: 1, y: 2, z: 3}obj.hasOwnProperty('z'); //false

Here, obj's prototype (_proto_) points to the prototype property of the foo function, the prototype of foo.prototype points to Object.prototype, and the end of the prototype chain is null. Through hasOwnProperty, we can check whether the z property is on obj. It shows false. There is no z property on obj, but by looking for its prototype chain, we found that it is on foo.prototype, so obj.z=3, and for the first case obj.valueOf() and toString are both on Object.prototype, so any object has these two properties, because the prototype of any object is Object.prototype. Of course, except for the following special case,

 var obj2 = Object.create(null);obj2.valueOf(); //undefined

Object.create() creates an empty object, and the prototype of this object points to the parameters. The following comprehensive example shows you how to implement a class to inherit another class

 //Declare a constructor Personfunction Person(name,age){ this.name = name; this.age = age;}Person.prototype.hi = function (){ console.log('Hi,my name is ' + this.name +',my age is '+this.age);};Person.prototype.LEGS_NUM=2;Person.prototype.ARMS_NUM=2;Person.prototype.walk = function (){ console.log(this.name+' is walking !');};function Student(name,age,classNum){ Person.call(this,name,age); this.classNum = classNum;}//Create an empty object Student.prototype = Object.create(Person.prototype);//Constructor specifies the function to create an object. Student.prototype.constructor = Student;Student.prototype.hi = function (){ console.log('Hi,my name is ' + this.name +',my age is '+this.age+' and my class is '+this.classNum);};Student.prototype.learns = function (sub){ console.log(this.name+' is learning '+sub);};//Instantiate an object Bosnvar Bosn = new Student('bosn',27,'Class 3');Bosn.hi(); //Hi,my name is bosn,my age is 27 and my class is Class 3Bosn.LEGS_NUM; //2Bosn.walk(); //bosn is walking !Bosn.learns('Math'); //bosn is learning Math

The constructor Person and Student's this point to the instantiated object (Bosn), and the prototype of this object points to the constructor's prototype.

We use the Object.create() method to create an empty object, and the prototype of this object is Person.prototype. The advantage of writing this is that we can create any attribute of Studnet.prototype by ourselves without affecting the Person.prototype attribute, and can inherit the original attributes on Person.prototype, because the subclass Student inherits the base class Person. If you write Person.prototype = Student.prototype directly, then both of them point to an object at the same time. While adding attributes to Student.prototype, the same attributes will also be added to Person's prototype chain.

For the call method in the constructor Student, this inside points to the instantiated object of the newly created Student, and inherits through the call.

Student.prototype.constructor = Student, the meaning of this sentence is to specify that Student is the function that creates the Student.prototype object. If you do not write this sentence, the function of the object is still Person.

There are three ways to implement inheritance.

 function Person(name,age){ this.name = name; this.age = age;}function Student(){}Student.prototype = Person.prototype; //1Student.prototype = Object.create(Person.prototype); //2Student.prototype = new Person(); //3

The above js prototype chain and inheritance analysis (first experience) is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.