JavaScript: Prototype-based object-oriented programming

Source: Internet
Author: User

Douglas Crockford points out that JavaScript is the most misunderstood programming language in the world. Because JavaScript lacks common object-oriented concepts, many program apes believe that JavaScript is not a suitable language. When I was working on my first JavaScript project, I also found that I couldn't put my code in a class. In fact, most program apes do not know that JavaScript can be object-oriented.
In the era of browser wars, Netscape's executives recruited a smart man called Brendan Eich, who invented the LiveScript (now JavaScript) language to run on the browser side. It is not based on classes like C + + and Java, but is designed based on the prototype inheritance model. OOP is ideal for livescript this dynamic language.
The new language needs to look like Java because of the market impact at the time. Java was very popular at the time, and Netscape's executives wanted the new language to be "the little brother of Java". That's why the new language is called JavaScript.

JavaScript and prototype-based OOP

The following is a JavaScript example of OOP, first to make a animal object:

var genericAnimal = Object.create(null);
    • 1

Object.create(null)Creates an empty object. Next, add the new properties and methods to the new object:

‘Animal‘;genericAnimal.gender = ‘femal‘;genericAnmal.description = function () { return ‘Gender: ‘ + this.gender + ‘; Name: ‘ + this.name;};
    • 1
    • 2
    • 3
    • 4
    • 5

Genericanimal is an object that can be used like this:

console.log(genericAnimal.description());
    • 1

We can use Genericanimal as a prototype to create other objects, just like copying objects (cloning the object):

var cat = Object.create(genericAnimal);
    • 1

We created the Cat object, the Cat object is the clone version of Genericanimal. Use the Cat object as a prototype to create additional objects:

var colonel = Object.create(cat);colonel.name = ‘Colonel Meow‘;var puff = Object.create(cat);puff.name = ‘Puffy‘;
    • 1
    • 2
    • 3
    • 4
    • 5

Puff objects can use the properties and methods inherited by the parent object:

console.log(puff.description());//Gender: female; Name: Puffy
    • 1
    • 2
The New keyword and the constructor function

JavaScript has the new keyword and the constructor's gratitude.

function Person(name) {    this.name = name; this.sayName = function() { return "Hi, I‘m " + this.name; };}var adam = new Person(‘Adam‘);
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

Implementing inheritance is a bit complex, and ninja objects inherit the person object:

function Ninja(name, weapon) {  Person.call(this, name); this.weapon = weapon;}Ninja.prototype = Object.create(Person.prototype);Ninja.prototype.constructor = Ninja;
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
Understanding delegation and the implementation of prototypes

Object.createWhen you create a new object, the incoming object becomes a prototype of the new object. Each object has a default __proto__ property to record the prototype. To illustrate:

var genericAnimal = Object.create(null); // genericAnimal.__proto__ points to null
    • 1
    • 2

Create a new empty object using Genericanimal as the prototype:

var rodent = Object.create(genericAnimal); rodent.size = ‘S‘; var capybara = Object.create(rodent);//capybara.__proto__ points to rodent//capybara.__proto__.__proto__ points to genericAnimal//capybara.__proto__.__proto__.__proto__ is null
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

The Capybara object does not have a size property, but it can look up the Size property on the prototype chain: When called, it is first found on the capybara.size property of the Capybara object, and if it is not, it goes to capybara.__proto__ the prototype that it points to. If capybara.__proto__ it is not found, continue capybara.__proto__.__proto__ looking on it.

Creating object.create

If some browsers do not support it Object.create , then you need to implement it yourself:

if (typeof Object.create !== ‘function‘) {    Object.create = function (o) { function F() {} F.prototype = o; return new F(); };}

http://blog.csdn.net/bdss58/article/details/51284944

JavaScript: Prototype-based object-oriented 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.