Prototype/constructor that I have known

Source: Internet
Author: User

In my opinion, there are two big things in Javascript's world-closure and prototype.

Question 1.
What does prototype do in JavaScript?

In a single word, it's a feature that aimed at startup cing code duplication.
We all know in computer world there is a famous philosophy-Don't repeat yourself.
In classic object-oriented versions ages such as C ++/C #/Java, We have inheritance to encapsulate some common methods into a super class to reduce code lines.
But in Javascript, there is no concept of class, we use function and prototype concept to imitate the similar behavior.

Question 2.
Who owns the prototype?

Function owns the prototype property, not object itself.
In JavaScript, all things are object (include function), so function can have it's own property.
In fact, every function has a prototype property, which is an object.

Object created from function has a hidden link to the function's prototype object.
Functions created in this propose are called constructor function, which shoshould start with a capital letter.
For example:


function User(name) {

  this.name = name;

}

User.prototype.getName = function() {

  return this.name;

};

var user = new User('Zhang San');

alert(user.getName());

In this example, user is a constructor function.
User is a instance of user which has privileges to access Prototype Method getname.

Questions 3.
Who create me?

Every object has a constructor property, which indicate the constructor function.
See this exmple:


function User(name) {

  this.name = name;

}

var user = new User('Zhang San');

alert(user.constructor === User); // true

alert(user.constructor.prototype === User.prototype); // true

alert({}.constructor === Object); // true

alert([].constructor === Array); // true

alert(''.constructor === String); // true

Because user. prototype is an object, it has constructor property:


alert(user.constructor.prototype.constructor); // User

We can redefine the constructor function's prototype like this:


function Person(sex) {

  this.sex = sex;

}

function User(name) {

  this.name = name;

}

User.prototype = new Person('man');


var user = new User('Zhang San');

alert(user.sex); // 'man'

alert(user.constructor); // 'Person'

Note that user. constructor isPersonNow, notUser.
We can fix it using a trick:


function Person(sex) {

  this.sex = sex;

}

function User(name) {

  this.name = name;

}

User.prototype = new Person('man');

User.prototype.constructor = User;var user = new User('Zhang San');

alert(user.sex); // 'man'

alert(user.constructor); // 'User'

Question 4.
Object/array are types?

You 'd better think them as constructor functions, just likeUserHas done.
Maybe there are definition in Javascript core like this:


function Object() {

}

function Array() {

}

The pre-defined constructor functions have read-only prototypes.
For examples:


Array.prototype.max = function() {

  var maxValue = this[0];

  for (var i = 1; i < this.length; i++) {

  maxValue = this[i];

  }

  }

  return maxValue;

};

alert([2,33,25].max()); // 33

Array.prototype = {

  'max': function() {

  var maxValue = this[0];

  for (var i = 1; i < this.length; i++) {

  maxValue = this[i];

  }

  }

  return maxValue;

  }

};

alert([2, 33, 25].max()); // [2, 33, 25].max is not a function

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.