Above we realized the class and constructors, but class methods? Java version of the puppies can also "bark Wang" called it, JS version of how to do it? JS solution is added to the analysis method of a prototype property, mounted at the top of this method, in the instantiation to give the object instance. We want myPuppy can speak, you need to add a method to Puppy.prototype speak. = Function Puppy.prototype.say () {
the console.log ( "bark Wang");
}
properties and methods of the examples produced using the new keyword copy the code has class prototype, we added say on Puppy.prototype method, myPuppy can speak, what I have to try: myPuppy.say (); // bark Wang
Copy the code examples of ways to find how it can be invoked method __proto__ say that myPuppy of it, we look to him to print out, and did not say ah this object, which is come from? This is the __proto__ play, when you access an object property is not on, such as myPuppy.say, the object will go __proto__ lookup. __proto__ prototype is equal to the value of the parent class, myPuppy .__ proto__ pointing Puppy.prototype. If you visit the property does not exist in Puppy.prototype, it will continue to go on Puppy.prototype .__ proto__ find, in fact, this time to find the Object, Object and then further on to find it did not, it is null, which in fact, the prototype chain. constructor we are talking generally refers to the class constructor prototype.constructor. prototype.constructor is a reserved attribute on the prototype, the class attribute points to the function itself, for indicating the current class constructor. Since prototype.constructor is a pointer to a constructor, that we can not be modified by the constructor do it? Let's try to know. We first change this function, then create a new instance see results: Puppy function (Age) {
this.puppyAge = Age;
}
Puppy.prototype.constructor = function myConstructor(age) {
this.puppyAge2 = age + 1;
}
Puppy myPuppy2 new new = const (2);
the console.log (myPuppy2.puppyAge); // output 2
illustrates replicate the code, we just modify prototype.constructor modify the pointer only, and not modifying the actual constructor. Some friends would say I have a print myPuppy2.constructor value ah, that constructor is not a property of the object itself is it? Well, not exactly, you can print out the reason why this value is because when you print found myPuppy2 itself does not have this property, and went looking for the prototype chain, found prototype.constructor. We can use hasOwnProperty look to know: The above fact, we have made it clear that prototype, proto relationship between, constructor few who draw a picture below to look more intuitive: the static method we know that many object-oriented static the method of this concept, such as Java is added directly to a keyword can be a static method is defined as static methods. JS define a static method is simpler, it directly as a function of the line attribute class: Puppy.statciFunc = function () {// statciFunc is a static method
conlose.log ( 'I is a static method, the this instance objects get ');
}
Puppy.statciFunc (); // directly through the class name calling
copy the code main difference is that static methods and instance methods instance methods can access instance, can operate for instance, and static methods generally used for instance nothing to do with the operation. Both methods have numerous applications in jQuery, in jQuery
(selector) is an example method of operating the method. such as
.ajax, here with ajax DOM instance it does not matter, this does not need this, it can be directly mounted on the $ as a static method. Object-oriented inheritance, how can not inherit it, according to previously talked about knowledge, in fact, we have been able to write your own inherited. The so-called inheritance is not a subclass can inherit the properties and methods of the parent class do? In other words, a subclass can find the prototype of the parent class, the easiest way is to subclass prototype __proto__ point to the parent class prototype on the line. the Parent function () {}
function Child () {}
Child.prototype.proto = Parent.prototype;
new new Child obj = const ();
console.log (obj instanceof Child); // to true
console.log (obj instanceof Parent); // to true
copy the code above inherited methods just make Child Parent access to the prototype chain, but not executed Parent constructor: the Parent function () {
this.parentAge = 50;
}
function Child () {}
Child.prototype.proto = Parent.prototype;
obj = new Child const ();
console.log (obj.parentAge); // undefined
copy the code in order to solve this problem, we can not simply modify Child.prototype .__ proto__ point, need to use the new constructor to the next Parent : the Parent function () {
this.parentAge = 50;
}
function Child () {}
Child.prototype.proto = new Parent();
Child new new obj = const ();
the console.log (obj.parentAge); 50 //
copy the code __proto__ above-described method will be one more level, can be replaced with modify Child.prototype directed to resolve, attention will Child.prototype. constructor reset back: the Parent function () {
this.parentAge = 50;
}
function Child () {}
Child.prototype = new Parent();
Child.prototype.constructor = Child; // 注意重置constructor
new new Child obj = const ();
console.log (obj.parentAge); 50 //
copy the code inheritance of course there are many other ways, they are similar in principle, but implementation is not the same, so that the core of all subclasses have parent class methods and properties, and interested friends can look yourself. Own realization of a new combination of the above talk, we know that in fact generate a new object that can access the class prototype, know the principles, we can achieve a new own up. myNew function (FUNC, ... args) {
const obj = {}; // Create an empty object
func.call (obj, ... args); // constructor is executed
obj. proto = func.prototype; // set the prototype chain
return obj;
}
function Puppy(age) {
this.puppyAge = age;
}
Puppy.prototype.say = function() {
console.log(“汪汪汪”);
}
const myPuppy3 = myNew(Puppy, 2);
console.log (myPuppy3.puppyAge); // 2
console.log (myPuppy3.say ()); // bark Wang,
copy the code yourself achieve a instanceof know the principle, in fact, we also know that the instanceof is doing. instanceof check is not an object is an instance of a class is not it? In other words examination of an object on the prototype chain has no prototype of this class, know that we can achieve a own a: function myInstanceof (targetObj, targetClass) {
// parameter checks
!! If (targetObj || targetClass !. || targetObj proto ! || targetClass.prototype) {
return to false;
}
let current = targetObj;
while (current) {// The above prototype chain has to find
IF (Current. proto === targetClass.prototype) {
return to true; // return found to true
}
current = current.__proto__;
}
return false; // not found return false
}
// inherited our experiments with the foregoing
function the Parent () {}
function Child () {}
Child.prototype.proto = Parent.prototype;
Child new new obj = const ();
the console.log (myInstanceof (obj, Child)); // to true
the console.log (myInstanceof (obj, the Parent)); // to true
the console.log (myInstanceof ({}, the Parent)) ; // false
copy the code summary finally come to a conclusion, in fact, the title is the core of the previous section, and let us summarize: JS can function as a function of use, it can also be used as classes need to use as a function of the class used to instantiate in order to function with a new class of functions, function has prototype property. Out of order for example to access to the object properties and methods of the prototype, __proto__ instance object points to the class prototype. So prototype is the property function, not an object. Objects have is __proto__, it is used to find the prototype. prototype.constructor points to the constructor, which is a function of the class itself. Change the pointer does not change the constructor. The object itself and not the constructor property, you have access to a prototype.constructor on the prototype chain. Functions themselves are objects, but also has __proto__, he points to the JS built-in object Function prototype Function.prototype. So you can call func.call, func.apply these methods, you call the fact Function.prototype.call and Function.prototype.apply. prototype itself is an object, so he also has __proto__, pointing to his parent's prototype. This prototype __proto__ chain and constitutes the point of JS prototype chain. The final point of the prototype chain is Object. Object The above prototype chain is null, i.e. Object.proto === null。
