JavaScript Object-oriented and prototype

Source: Internet
Author: User
Tags hasownproperty

The simplest of two ways to create objects


(1) var person=new Object ();

Person.name= "JXJ";

Person.age= "24";

Person.sayhi=function () {

Console.log ("My name is" + THIS.name + ", this year" + This.age + "years old");

}.......

(2) var person={

Name: "Jxj",

Age: "24",

Sayhi:function () {

Console.log ("My name is" + THIS.name + ", this year" + This.age + "years old");

}

}



Factory mode

function Createperson (name, age) {

var o = new Object ();

O.name = name;

O.age = age;

O.sayhi = function () {

Console.log ("My name is" + THIS.name + ", this year" + This.age + "years old");

};

}

var p1 = new Createperson ("Jxj", "24");

var p1 = new Createperson ("Jxj", "25");


Objects built on the accepted parameters


Problem, object recognition----objects that are returned are of type object (if Createcar (),, Car1, Car2, p1, p2 are ojbect types)

typeof P1; Returns "Object";

P1 instanceof Object//returns True

Object.prototype.toString.call (p1); Returns "[Object Object]"


constructor function


function person (name, age) {

THIS.name = name;

This.age = age;

This.sayhi = function () {

Console.log ("My name is" + THIS.name + ", this year" + This.age + "years old")

};

This.saybye = function () {

Console.log ("Saybye")

};

}

var jxj = new Person ("JXJ", "24");

var jxj2 = new Person ("jxj2", "25");


Successfully solve object recognition problems

JXJ instanceof person//return True

JXJ instanceof Object//Returns True, all objects are inherited from Object

Problem:

/each formation is unique to a property and method, but actually in the application of the method, a method to complete the same function, there is no need to have a single copy of the instance (each method is an object);


function person (name, age) {

THIS.name = name;

This.age = age;

This.sayhi = Sayhi;

This.saybye = Saybye;

}

function Sayhi () {

Console.log ("My name is" + THIS.name + ", this year" + This.age + "years old")

};

function Saybye () {

Console.log ("Saybye")

};

Problem:

Mount global scope, define multiple methods to define multiple global functions

No encapsulation

Expansion: The difference between constructors and functions: Invocation mode

Use as a normal function

Person ("Jxj", "" "),//this points to the global window, attributes are added to the Window object

Window.name;

Window.sayhi ();


JS prototype mode


JS prototype object Knowledge (person Prototype prototype object, Prototype attribute, [Prototype],constructor)

JS creates a function (including normal functions, and constructors, function expressions), creates a prototype property, and points to the prototype object of the function;

Each object (the pointer to the prototype object points to an object Prototype prototype object) uses a [Prototype] pointer to the prototype object

Person.prototype.isPrototypeOf (JXJ);//Returns True

Object.getprototypeof (JXJ) ==person.prototype;//returns True

function hehe () {}

Object.getprototypeof (Hehe.prototype);//object {}

var a=new hehe ();

Hehe.prototype.isPrototypeOf (a);//true

Object.prototype.isPrototypeOf (hehe.prototype);//true

After the constructor is created, its prototype object gets the constructor property by default, pointing to the constructor (person), (the object calls constructor are derived from its prototype object)

function person (name) {

THIS.name = name;

}

var p1 = new Person ("JXJ");

P1.constructor

P1.hasownproperty ("constructor") false

Person.prototype.hasOwnProperty ("constructor") True

P1.constructor = = = Person.prototype.constructor true


Person.prototype.isPrototypeOf (p1); true

Object.getprototypeof (person)

function Empty () {}

Function.prototype.isPrototypeOf (person) True

Object.getprototypeof (p1)

person {} object.getprototypeof (person)

function Empty () {}


(1) Person.prototype, Mount Properties and methods


function person () {}

Person.prototype.name = "JXJ";

Person.prototype.age = "24";

Person.prototype.sayHi = function () {

Console.log ("My name is" + THIS.name + ", this year" + This.age + "years old")

};


var jxj = new Person ();

var jxj2 = new Person ();

(2) object literal, overriding the entire prototype object


function person () {} Person.prototype = {

//constructor:person

Name: "Jxj",

Age: "24",

Friend: {"AAA", "BBB", "CCC"},

Sayhi:function () {

Console.log ("My name is" + THIS.name + ", this year" + This.age + "years old")

};

}

var jxj = new Person ();

var jxj2 = new Person ();

JXJ instanceof Person;//true;

Jxj.constructor==person;//false; In fact, constructor already points to the object constructor

All instances share a copy of the attribute

Jxj.friend.push ("ddd");

jxj.friend===jxj2.friend;//returns true,{"AAA", "BBB", "CCC", "ddd"};

Combining the constructor pattern with the prototype pattern (most commonly used mode)


function person (name, age) {

THIS.name = name;

This.age = age;

Friend: {"AAA", "BBB", "CCC"};

This.sayhi = function () {

Console.log ("My name is" + THIS.name + ", this year" + This.age + "years old")

};

person.prototype={

Constructor:person,

Sayhi:function () {

Console.log ("My name is" + THIS.name + ", this year" + This.age + "years old")

},

This.saybye = function () {

Console.log ("Saybye")

    }

}

A constructor pattern that defines the properties of an instance;

Prototype patterns are used for definitions, methods, and properties that you want to share

Inherit---(The principle uses the prototype chain to make the prototype object equal to another instance of the type)


Father

function Father () {

this.fatherheight= "1.75";

}

Father.prototype.getfatherheight=function () {

Console.log (This.fatherheight);

}

Child

function Child () {

This.childheight= "1.20";

}

Subclass Inherits Parent Class

Child.prototype=new Father ();

Child.prototype.getheight=function () {

Console.log (This.childheight);

}

var c=new child ();

C.getfatherheight ();


This article is from the "7439523" blog, please be sure to keep this source http://7449523.blog.51cto.com/7439523/1564964

JavaScript Object-oriented and prototype

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.