JavaScript inheritance based on prototype chain and usage analysis of call and apply functions _javascript skills

Source: Internet
Author: User
Tags function prototype

The examples in this article describe JavaScript inheritance based on prototype chains and the use of call and apply functions. Share to everyone for your reference, specific as follows:

1. Inheritance is an important feature of object-oriented programming languages, such as Java, through the extend can achieve multiple inheritance, but in JavaScript in the way of inheritance and Java is a big difference, JS through the prototype chain of the way to achieve inheritance.

(1) The prototype of the object : Because in JS, the function is also the object, so we start with the object. What is the prototype of the object, the definition of the prototype is:

All objects created by direct volume of objects have the same function prototype, and can obtain a reference to the prototype object through Object.prototype, and the prototype of the object created by the keyword new and the constructor call is the value of the constructor's prototype property.

Note: There are not many objects without a prototype, and the Object.prototype object is not a prototype.

(2) Create the prototype of the object

For example, there is a Student object and a Person object, where student.prototype points to Person.prototype

Two methods that are completely different for creating objects:

i)Student.prototype=person.prototype

This method creates a student prototype object, and if the value of Student.prototype is changed, Person.prototype also changes at the same time, in order to avoid this situation, we should adopt other methods;

II)student.prototype=object.create (person.prototype)

This method, created by the student prototype object, changes the properties or methods of the student.prototype and does not change the properties of the Person.prototype at the same time.

(3) Assignment operations based on inheritance

Example 1:

var o={
  x:1
}
o.x=2;
alert (o.x);//Output o.x=2

Example 2:

var o={
  x:1
}
var osp=object.create (o);
alert (osp.x);//output 1
osp.x=2;
alert (osp.x);//Output 2

i) from the above two examples, we can probably see that if there is an X attribute on the object OSP, then either the value or the assignment is based on the direct attribute x on the OSP object, and if there is no X attribute on the OSP object, it is searched along the prototype prototype chain, Until you find an object on the prototype property chain that contains the X attribute, if the OSP object does not contain the X attribute on all prototype prototype chains, then return underfined.

(ii) O the assignment of object properties is considered to proceed directly on the OSP object without affecting the attributes on the prototype chain. For example, the osp.x=2 in the previous example is assigned to a OSP object and does not affect the OSP's prototype object o.

2. Examples of inheritance in some objects

(1) We have learned that we can use instanceof to judge the type, the Instanceof method is based on the prototype chain.

For example 3:

[1,2] instanceof Array//return True
[1,2] instanceof Object//return True

This example shows that Array.prototype is also inherited from the object.

(2) Combinatorial inheritance problem in a function

function Student (name,age) {
  this.name=name;
  this.age=age;
}
Student.prototype.age=function () {return
  this.age;
}
function Beststudent (name,age) {
  student.call (this,age);
  return this.name;
}
Beststudent.prototype=new student ();
  Alert (beststudent ("Yu", 2))//Output 2
}

3. Call function and apply function

The call function and the Apply function are used to change the point of this in the function, the method that object a calls object B, the difference between the calling function and the Apply function is that the type of the argument is different, apply (X,y), and X represents the object that executes the function. And y means that the arguments that are required to execute the function are an array and can be referred to as argument arrays, whereas the variables after Y in call (x,y) are real variables;

For more on JavaScript related content to view the site topics: "JavaScript object-oriented Tutorial", "javascript json operation tips Summary", "JavaScript switching effects and techniques summary", " JavaScript Search Algorithm Skills summary, javascript error and debugging skills Summary, JavaScript data structure and algorithm skills summary, JavaScript traversal algorithm and skills summary and JavaScript mathematical Operational Usage Summary

I hope this article will help you with JavaScript programming.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.