javascript--Object-oriented

Source: Internet
Author: User
Tags hasownproperty

1. Create an Object
1) Factory mode
function Createperson (name,age,job) {
var o = new Object ();
O.name = name;
O.age = age;
O.job = job;
O.sayname = function () {
alert (this.name);
}
return o;
}
var P1 = Createperson ("Terry", One, "Boss");
var P2 = Createperson ("Larry", "Daboss");

Problem with Factory mode
var t1 = typeOf P1; Object cannot be recognized, i.e. all objects are of type Object
2) Constructor mode
JS can customize constructors to customize the properties and methods of the object type, the constructor itself is a function, but can be used to create objects

  function person (name,age,job) {
   this.name = name;
   this.age = age;
   this.job = job;
   this.sayname = function () {
    alert (this.name);
   }
  }
  var p1 = new Person ("Terry", one-by-one, "Boss");
  var P2 = new Person ("Larry", "Daboss");
   Creating an object by calling the constructor with the new operator actually goes through the following steps
   1) Create a new object
   2) Assigns the scope of the constructor to the new object (this new object)
   3) executes the code in the constructor
   4) to return the new object.
   This method of creating an object can identify an instance as a specific type, such as a person type.
   var T1 = typeOf P1; //t1 is person

1. constructor function as function
Person ("Larry", "Daboss")
When a function is called in the global scope, this always points to the global object (the Window object).
2. Problems with constructors
Each method needs to be recreated on each instance, but it is not necessary.
You can declare a function in the global scope, and then pass the reference to the function property in the object. But doing so can lead to too many global functions, not the encapsulation of objects
Console.log (P1.sayname = = P2.sayname); False

3) Prototype mode
Each function has a property: Prototype (prototype property), which is a pointer to an object that is intended to contain properties and methods that can be shared by all instances of a particular type.
function person () {

}
Person.prototype.name = "Tom";
Person.prototype.age = 22;
Person.prototype.job= "Boss";
Person.prototype.sayName = function () {
alert (this.name);
}
var p1 = new Person ();
P1.name = "Terry";

var p2 = new Person ();
P2.name = "Larry";
After a custom constructor has been created, its prototype object gets the constructor property by default, and when the constructor is called to create a new instance, the inside of the instance contains a pointer (internal property) that points to the constructor's prototype object. (Point to a prototype object instead of a constructor)

1. Access to Properties
Each time the code reads a property of an object, the search is performed once, and the target is a property with the given name.
1) First find from the object instance itself
2) If it is not in the object instance, continue searching for the prototype object pointed to by the pointer.
2. Delete instance Properties
When you add a property to an object instance, this property masks the property that is saved in the prototype object with the same name. The delete operator allows you to completely delete an instance property.
3. Detect if a property exists in the instance
hasOwnProperty (P); Determines if the property specified by P exists in the instance and returns true if present
Console.log (P1.hasownproperty ("name")); False exists in the prototype and not in the instance object
4. Prototypes and in Operators
1) in for-in, you can access the properties that exist in the instance, as well as the properties in the prototype
2) Use alone
A in B; Returns True when the B object is accessible to the a property, regardless of whether the object is in the instance or in the prototype
Console.log ("name" in P1); True
Determines whether a property is in the prototype
function Hasprototypeproperty (obj,name) {
Properties that are not in the instance but can be accessed belong to the prototype property
return!obj.hasownproperty (name) && (name in obj);
}
5. Prototypes of native objects
Through the prototype of the native object, you can not only get the call of all the default methods, but also define the new method. You can modify the prototype of a native object just as you modify a custom object's prototype, and you can add methods at any time.
String.prototype.startsWith = function (text) {
return This.indexof (text) = = 0;
}
var msg = "Hello World";
Alert (Msg.startswith ("Hello")); True
6. Problems with prototype objects
All instances will get the same property value by default, a share that is appropriate for a function, but a value that contains a reference data type is not very good
Person.prototype = {
Name: "Briup",
Friends: ["Larry", "Terry"]
}
var p1 = new Person ();
var p2 = new Person ();
P1.name = "Terry";
P1.friends.push ("Tom");

P1.friends; ["Larry", "Terry", "Tom"]
P2.friends; ["Larry", "Terry", "Tom"]

7. Simpler prototype syntax
Sets the prototype object to a new object created equal to the form of an object literal. The instance object uses the same effect, but the constructor property in the prototype no longer points to person, because each time an object is created, its prototype object is created, and the object automatically obtains the constructor property. Here we rewrite the prototype object so that the constructor property in the prototype becomes the constructor property of the new object (object)
P1.constructor.prototype.constructor//object
function person () {

}
Person.property = {
Constructor:person, if constructor is more important, you can specify its value, Enumerable, True, default to False
Name: "Tom",
Age:22,
Job: "Boss",
Sayname:function () {
alert (this.name);
}
}
Define the constructor property, not traverse
Object.defineproperty (Person.prototype, "constructor", {
Enumerable:false,
Value:person
});

4) Combining the constructor pattern with the prototype mode
Constructors are used to define instance properties, and prototype patterns are used to define methods and shared properties. This model is one of the most widely used and most recognized methods of creating custom types in ECMAScript.
function Person (name,age) {
THIS.name = name,
This.age = age,
This.friends = []
}
Person.prototype = {
Constructor:person,
Sayname:function () {
alert (this.name);
}
}
var p1 = new Person ("Terry", 11);
var p2 = new Person ("Larry", 12);
P1.friends.push ("Tom");
P2.friends.push ("Jacky");
Console.log (p1);
Console.log (p2);

2. Inheritance
1) prototype chain
Each constructor has a prototype object, and the prototype object contains a pointer to the constructor, and the instance contains an internal pointer to the prototype object. Inheritance occurs when a prototype object equals an instance of another type. Steps to invoke a method or property
A. Search instance
B. Searching for prototypes
C. Searching for a parent class prototype
Defining the Parent class type
function Animal () {
THIS.name = "Animal"
}
Animal.prototype = {
Sayname:function () {
alert (this.name);
}
}

Defining subclass Types
function Dog () {
This.color = "Gray"
}
Complete inheritance by pointing the child object's prototype object to an instance of the parent object
Dog.prototype = new Animal ();
The method of the child object is actually defined on the instance of the parent class object.
Dog.prototype.sayColor = function () {
alert (This.color);
}
var dog = new Dog ();
Console.log (dog);
Dog.saycolor ();
Dog.sayname ();
1. Default prototypes
All function default prototypes are instances of object, and the default prototype contains an internal pointer to Object.prototype.
2. Determining the relationship between prototypes and instances
1) by using instanceof
Instance instanceof Object//true
Instance instanceof supertype//true
Instance instanceof Subtype//true
2) by using isprototypeof ()
As long as the prototype in the prototype chain, it can be said that the prototype chain derived from the prototype of the instance
Object.prototype.isPrototypeOf (instance)//true
SuperType.prototype.isPrototypeOf (instance)//true
SubType.prototype.isPrototypeOf (instance)//true
3. Carefully define the method
Subtypes override a method in a superclass, or need to add a method that does not exist in the superclass, you need to place the code that adds the method to the prototype after the inheritance (that is, after the statement that replaced the prototype)
4. Prototype chain issues
1) When inheriting through a prototype, the prototype actually becomes an instance of another type, and the original instance property becomes the current prototype attribute
2) When you create an instance of a subtype, you cannot pass parameters to a super-type constructor.
Therefore, in practice, the prototype chain is seldom used alone

2) Borrowing constructors
Also known as "forged object" or "Classic inheritance," the superclass constructor is called inside the subtype constructor. A function is simply an object that executes code in a particular environment, so through apply (), the call () method can execute a constructor on a new object (in the future), that is, the code that initializes all the objects defined in the parent type function on the subtype object. Results each child class instance has properties in the parent type and methods
function Animal (name) {
THIS.name = name;
This.colors = ["Red", "Gray"];
}
function Dog (name) {
inherited the animal.
Animal.call (This,name);
This.color = "Gray";
}
Animal.prototype.sayName = function () {
alert (this.name);
}

  var dog = new Dog ();
  dog.colors.push ("HHH");
  console.log (dog);
  var animal = new animal ();
  console.log (animal);
    //If the function is defined in a constructor, the function reuse does not talk about
  dog.sayname ();  
     //methods that are defined in a super-type prototype are not visible to subtypes

3) Combined functions
Also known as pseudo-classical inheritance, combines the prototype chain with the techniques borrowed from the constructor. The principle is: using the prototype chain to implement the inheritance of the prototype properties and methods, and by borrowing the constructor to implement the inheritance of the instance attributes.
function Animal (name) {
THIS.name = name;
This.colors = ["Red", "Gray"];
}
function Dog (name) {
inherited the animal (attribute)
Animal.call (This,name);
This.color = "Gray";
}
Animal.prototype.sayName = function () {
alert (this.name);
}
Inheritance method
Dog.prototype = new Animal ();
Dog.prototype.constructor = Animal;

var dog = new Dog ();
Dog.colors.push ("HHH");
Console.log (dog);
var animal = new animal ();
Console.log (animal);
Dog.sayname (); Can call

javascript--Object-oriented

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.