JavaScript Object-oriented, from creating objects to object Inheritance (1/5)

Source: Internet
Author: User
Tags constructor inheritance

JS to create the object of several methods , this article discusses several JS to create the object of the method, first from the best understanding of the factory model start:

The code is as follows Copy Code

function Createperson (name,age,job) {
var o = {};
O.name = name;
O.age = age;
O.job = job;
O.sayname = function () {
alert (this.name);
};
return o;
}

var Tanya = Createperson ("Tanya", "a", "female");
var Ansel = Createperson ("Ansel", "a", "male");

Tanya.sayname ();
Ansel.sayname ();

This defines O as an empty object, and then sets a bunch of properties for O. In fact, you can also directly to the O attribute, so if this is ok to write.

  code is as follows copy code


function Createperson (name,age,job) {
    var o = {
& nbsp;       name:name,
        age:age,
& nbsp;       job:job,
        sayname: function () {
         alert (this.name);
        }
   };
    return o;
}

var Tanya = Createperson ("Tanya", "a", "female");
var ansel = Createperson ("Ansel", "a", "male");

Tanya.sayname ();
Ansel.sayname ();

Another option is to use the invincible this, because this represents the object at the current runtime, the scope of the constructor this to the new object, and the properties and methods of the currently running object to the new object, so that the object pattern is called the constructor pattern

The code is as follows Copy Code

function Person (name,age,job) {
THIS.name = name;
This.age = age;
This.job = job;
This.sayname = function () {
alert (this.name);
};
}

var Tanya = new Person ("Tanya", "a", "female");
var ansel = new Person ("Ansel", "a", "male");

Tanya.sayname ();
Ansel.sayname ();

In this example, both Tanya and Ansel have a constructor attribute that points to the person.

Consider the following:

The code is as follows Copy Code

function Person (name,age,job) {
THIS.name = name;
This.age = age;
This.job = job;
This.sayname = function () {
alert (this.name);
};
}

Person ("Tanya", "a", "female");
Person ("Ansel", "a", "male");

Window.sayname ();
Window.sayname ();

It is found that two times the pop-up is Ansel, because without new, it is not an instance of person, but only in the execution function. This always points to the global object when a function is called in the global scope. The global object is the Window object in the browser.

We can also invoke the Sayname method in another object using the construction pattern, remember apply and call, come to think of another case,

The code is as follows Copy Code


function Person (name,age,job) {
THIS.name = name;
This.age = age;
This.job = job;
This.sayname = function () {
alert (this.name);
};
}

var Olivia = {};
Person.call (Olivia, "Tanya", "a", "female");
Olivia.sayname ();

var Philip = {}
Person.apply (philip,["Ansel", "the", "male");
Philip.sayname ();

Prototype model to consider the prototype chain, analysis, the Sayname method in the example is repeatedly defined two times, but in fact there is no need to create two copies. Using a prototype method, you can make a sayname method of sharing a Tanya and Ansel.

So the prototype pattern is written as follows:

The code is as follows Copy Code


function Person (name,age,job) {
THIS.name = name;
This.age = age;
This.job = job;
}

Person.prototype.sayname= function () {
alert (this.name);
};

var Tanya = new Person ("Tanya", "a", "female");
var ansel = new Person ("Ansel", "a", "male");

Tanya.sayname ();
Ansel.sayname ();

When applied, it is not rigid to apply a pattern, ingenious. When you need to share a method, you use a prototype pattern, you use a build pattern when you need a copy, you can combine all the information in a constructor, and by initializing the prototype in the constructor, the object retains the advantage of using both the constructor and the prototype.

The code is as follows Copy Code


function Person (name,age,job) {
THIS.name = name;
This.age = age;
This.job = job;
if (typeof sayname!= "function") {
Person.prototype.sayname= function () {
alert (this.name);
};
}
}

var Tanya = new Person ("Tanya", "a", "female");
var ansel = new Person ("Ansel", "a", "male");
Ansel.sayname = function () {
Alert ("Hi Ansel, how to Hansome you are!");
}

Tanya.sayname ();
Ansel.sayname ();

home 1 2 3 4 5 last
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.