20150207--JS Consolidation and strengthening 5

Source: Internet
Author: User
Tags map class

JavaScript consolidates and strengthens 41, object 1) in JavaScript, the object class is the base class for all classes (PHP StdClass)

Prototype Object = new Object ();

Example code:

Run Result: true

The above code proves that when we access a property that does not exist for an object, the system first looks in the prototype object of the current object constructor, and because all the prototype objects are instances of the object class, our objects automatically inherit the properties and methods in the object class. We call this inheritance a prototype inheritance, and our object class is the base class for all our systems or custom classes. 2) Object action

We consider using the object class to create an object when we only need to get an object to hold the data without worrying about which class instance it is.

static properties and static methods 1, static properties

Static properties can be defined in PHP using static keywords, but there is no keyword for static properties defined in JavaScript, but we can do this in a simulated way.

Basic syntax: Class. Properties

Example code:

Example 1: Writing class real-time counters

Example 2: Improve the problem, to achieve the automatic counting function

2. Static method

In JavaScript, you can also implement static methods of a class in a simulated way

Basic syntax:

Class. property = First address of function

Instance. property or object. Properties

Prototypes. Properties

Class. Attribute three, closure of function 1, what is function closure

A: The so-called "closure" refers to an expression (usually a function) that has many variables and environments that bind them, and therefore these variables are also part of the expression.

Closure story:

Big Peach, small peach

Small peach across to the Qing Dynasty, saw four elder brother, and the palace of many Fujin have sisters commensurate.

Four elder brother: your elder sister is?

If it's big luck, this is "sell sister Qiurong."

If it is big pink, then you understand the closure.

2. The garbage collection mechanism in javascript:

Variables in the function (local variables) are automatically reclaimed by GC after the function has finished running.

Variables (global variables) in the global scope are destroyed when the page closes or the Web program finishes executing.

In the JavaScript garbage collection mechanism, there is a reference counter, the default is 0, when there are external factors to its reference, the system automatically +1 operation, when the GC is running, the first time to check the current memory counter, such as 0, it means that the object has no reference, memory can be recycled, otherwise, The memory area will not be reclaimed by the system.

Example 1: Local variables cannot be accessed directly in the global scope

Cause: 1) different scopes

2) JavaScript garbage collection mechanism

Example 2: I definitely want to access the I variable?

Example 3: A function closure can also be used to solve

3. What are the functions of closures:

1) references to local variables can be implemented at the global scope

2) can keep our variables or functions in memory and not be recycled by GC

The closures in my eyes:

is the function in the function, and the function is bundled with some local variables, and because of the global variable reference, will cause the function and the variable will not be recycled, this is my eyes of the closure. 4, Closure principle diagram:

While a function closure can implement calls to local variables and save local variables that are not recycled by GC garbage collection, it is not a special case and is not recommended and may lead to memory leaks. Iv. Private Properties

There is no definition language for private properties in JavaScript, but we can do this in a simulated way

Public property

Protected protected

Private property

Only public and private properties exist in JavaScript

The constructor can declare public properties by using the this. property

The constructor can impersonate a private property by using the Var property

Example 1: Defining a private property

In the global we cannot complete the call to the Love attribute, and the undefined will pop up.

Example 2: How do I access private properties?

For the properties of the Var declaration, we call it a private property, if you want to make it readable or writable, you can set the common method to set and read, if only set, then our property is a writable property, if only read-only method, then it is read-only property, and have both, Then the property is a readable writable property. V. Call and Apply method

Example 1: Adding a speak speaking method to an object

Note: Since the this pointer in the Speak method points to the Window object, which is our reference by P1, there is no way to directly reference, can we change the internal this point?

A: Yes, through call and apply Method 1, basic syntax

Call (Obj,[arg1,arg2,arg3 ...])

Apply (Obj,[array]);

Function:

1) Change the this point inside the function to point to the Obj object

2) Implement a call to a function

Example 2: improved Example 1

Call and apply mainly do two things:

Change the internal this point of the Speak function

Implementing a call to the Speak function

Example 3: Parameter passing

Example 4: Case

The effect is as follows:

Vi. inheritance in object-oriented

In some programming languages, you can implement class inheritance through the extends keyword, which is done in JavaScript in a simulated way.

First approach: Implementing class inheritance through object prototype objects

Basic syntax:

Object.prototype.ext=function (Parobject) {

for (var i in Parobject) {

This[i]=parobject[i];

}

};

Example code:

Second way: Implement class inheritance by call and apply mode

The third way: Inherit the interview simulation class through the prototype

Summary of three ways:

In the first way, the ext attribute is added for all classes in JavaScript, but we do not need this functionality for other objects, and the second is to implement the class inheritance by call and apply, which increases the volume of the object that is currently inheriting the subclass, and only the third Way is Simulation inheritance of a class is implemented through prototype inheritance, so it is the best solution .

Seven, Snake game

1. Object Oriented thinking

What is the snake's business?

Snakes, food, maps

2. The process of creating a transaction

1) Map

2) Food

3) Snake

3. Properties and methods of transactions

Map class:

Property:

Length

Width

Background

Position

Method:

Show

Food Category:

Property:

Length

Width

Background

Position

Method:

Display (algorithm)

Randomly displayed (random of the math method)

Snake Type:

Property:

Length

Width

Background

Position

Snake Body (array two-dimensional)

Method:

Show

Move (EAT)

4. Write code:

Cell: 20*20

Map: 800*400

Food takes one.

Effects such as

Code please refer to snake.html

Homework One: Snake

Homework Two: Do Enterprise website (single article, article, product show)

20150207--JS Consolidation and strengthening 5

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.