JavaScript basic knowledge Point Induction (recommended) _ Basics

Source: Internet
Author: User
Tags anonymous array definition inheritance object object javascript array

A variable defined outside a function must be a global variable, a variable defined within a function, and if Var is declared, the variable is a local variable, and if it is not declared Var, then the variable is a global variable.

1, global variables and local variables
Javascript
var global = "global";
Test ();
function test () {
  var local = ' local ';
  Document.writeln (global);
  Document.writeln (local);
Document.writeln (global);
Document.writeln (local); 

2, two kinds of cookies

i) persistent cookies are stored on the client's hard disk.

II) A reply cookie: it is not stored on the client's hard disk, but in the memory of the browser process, and the reply cookie is destroyed when the browser is closed.

3. In JavaScript, functions (function) are objects

4. In JavaScript, there is no concept of method (function) overload

5. Function Object

There is a function object in JavaScript, and all custom functions are function object types. All parameters accepted by a function object are of type string, the last of which is the body of the function to execute, and the preceding argument is the parameter that the function really needs to accept.

6, the Implied object arguments

In JavaScript, each function has an implied object arguments, representing the arguments that are actually passed to the function. Arguments.length represents the number of parameters that are actually passed.

7, function name. length

Each function object has a length property that represents the number of parameters that the function expects to accept. It differs from the arguments of the function. Arguments.length represents the number of parameters that the function actually accepts.

8. There are five kinds of raw data types in JavaScript

Undefined, Null, Boolean, number, and string. (Note: In JavaScript, there is no char data type)

Undefined data type has only one value: undefined;

The value of a null data type is only one: null;

The Boolean data type has two values: true and false;

9, typeof operator

typeof is a unary operator, followed by the name of the variable, that gets the data type of the variable with 5 return values: Undefined, Boolean, number, string, and object.

10, in JavaScript, if the function does not declare return value, then return undefined11, null and undefined relationship

The undefined is actually derived from null. For example:

The relationship between null and undefined

Javascript

 alert (undefined = null);
Browser returns True 

11. Force type Conversion

There are 3 types of coercion cast in javascript: Boolean (value), number (value), String (value).

12, Object objects

In JavaScript, all objects are inherited from object objects.

Object objects

Javascript

var object = new Object ();
For (Var v. in object) {
  alert (v);

In the code above, the browser does not print anything, and it does not explain that object objects do not have any attributes. The following code tests whether a property in an object object can be enumerated, or false, to indicate that a property in the object object cannot be enumerated.

The properties in object objects are not enumerated

Javascript

 
 

The browser pop-up false dialog box indicates that properties in object objects cannot be enumerated.

Next we'll see if the properties in the Window object can be enumerated

The properties in the Window object can be enumerated

Javascript

For (Var v. in window) {
  console.log (v);

In the Chrome browser, we'll see that the browser debug console prints out a bunch of properties that indicate that the properties in the Window object can be enumerated.

13. In JavaScript, you can dynamically add properties of objects, or you can delete objects dynamically

Dynamically Add/Remove properties of an object

Javascript

var object = new Object ();
alert (object.username);//undefined
 
object.username = "Zhangsan";
alert (object.username);//zhangsan
 
object["password"] = "123";
alert (Object.password);//123
 
Delete object.username;//at this point, the username attribute has been deleted

14, the most common way to define objects in JavaScript

The most common way to define objects

Javascript

 var object = {
  username: "Zhangsan",
  password:12345
};
alert (object.username);
alert (Object.password);

15, array

Array definition

Javascript

Method one
var array = new Array ();
Array.push (1);
Array.push (2);
Array.push (3);
alert (array.length);
 
Method Two (recommended)
var array = [1,25,4];
Array.Sort ();

Call the array's sort () method, and the browser prints 1,25,4, which is not the result we expect.

For the sort method of a JavaScript array, it first converts the content to be sorted into a string (the call ToString () method), sorted in order of the strings.

The following ways can get the results we expect (sorted by array size):

Array sorting

Javascript

function Compare (num1,num2) {
  var temp1 = parseint (NUM1);
  var temp2 = parseint (num2);
  if (Temp1 < Temp2) {
    return-1
  } else if (Temp1 = = Temp2) {return
    0;
  } else {return
    1;
  }
}
 
var array = [1,25,3];
Array.Sort (Compare);

We're going to do this in the same way as anonymous functions:

anonymous function ordering

Javascript

var array = [1,25,3];
 
Array.Sort (function (num1,num2) {
  var temp1 = parseint (NUM1);
  var temp2 = parseint (num2);
  if (Temp1 < Temp2) {
    return-1
  } else if (Temp1 = = Temp2) {return
    0;
  } else {return
    1;
  }
});
 

16, 5 ways to define objects in JavaScript (no concept of class in JavaScript, only objects) I extend its properties and methods based on existing objects

Expand its properties and methods based on existing objects

Javascript

 var object = new Object ();
Add the Name property
object.name = "Zhangsan";
Add Sayname method
Object.sayname = function (name) {
  this.name = name;
  alert (this.name);
};

The simplest way to use it is not convenient, and is suitable for temporary needs of an object.

II Factory way to create objects

Factory method with no parameters:

Javascript

Factory Method
function CreateObject () {
  var object = new Object ();//Create an object
  object.name = "Zhangsan";/ Add a Name property
  Object.password = "123" for the object, or add a password property to the object
  Object.get = function () {//Add a Get method
    to the object Alert (this.name+ "," +this.password);
  };
  Return object;//returns this object
}
 
var object1 = CreateObject ();//Call CreateObject factory method Create Object Object1
var object2 = CreateObject ()//Call CreateObject factory method to create object Object2
object1.get ()//Call Object Get method

Factory method with Parameters:

Javascript

function CreateObject (Name,password) {
  var object = new Object ();
  Object.name = name;
  Object.password = password;
  Object.get = function () {
    alert (this.name+ "," +this.password);
  };
  return object;
}
 
var Object1 = CreateObject ("Zhangsan", "123");
var object2 = CreateObject ("Lisi", "456");
Object1.get ();

Disadvantages of the above two factory methods with no parameters or parameters:

Every time you create an object, you create a Get method in memory, which wastes memory and affects performance. And our expectation is to create two different objects whose properties are not the same, but the method is shared. So next we need to improve the CreateObject factory approach.

Improved factory approach:

Javascript

function Get () {
  alert (this.name+ "," +this.password);
}
 
function CreateObject (Name,password) {
  var object = new Object ();
  Object.name = name;
  Object.password = password;
  Object.get = get;
  return object;
}
 
var Object1 = CreateObject ("Zhangsan", "123");
var object2 = CreateObject ("Lisi", "456");
Object1.get ();

The Get method is defined outside the CreateObject function so that the Get method is shared for each object created. Let a function object be shared by multiple objects, rather than having a function object for each object.

iii) Constructor method to create object

Constructors with no parameters:

Javascript

 function person () {
  //before executing the first line of code, the JS engine generates an object for us
  this.name = "Zhangsan";
  This.password = "123";
  This.getinfo = function () {
    alert (this.name+ "," +this.password);
  };
 
  Here is an implied return statement that returns the previously generated object (and is not the same as the Factory Way)
}
 
var p1 = new Person ();

Constructors with parameters

Javascript

function Person (name,password) {
  this.name = name;
  This.password = password;
  This.getinfo = function () {
    alert (this.name+ "," +this.password);
  }
 
var p1 = new Person ("Zhangsan", "123");
var p2 = new Person ("Lisi", "456");
P1.getinfo ();

IV) prototyping (prototype) way to create objects

Prototype is an attribute in object objects

Prototype

Javascript

function person () {
 
}
Person.prototype.name = "Zhangsan";
Person.prototype.password = "123";
Person.prototype.getInfo = function () {
  alert (this.name+ "," +this.password);
};
 
var p1 = new Person ();
var p2 = new Person ();
P1.name = "Kyle";//object is generated to change the attribute
p1.getinfo ();

There are two problems with simply using a prototype: First, you cannot assign an initial value to a property in a constructor, and then change the property value only after the object is generated.

Prototype

Javascript

function person () {
 
}
Person.prototype.name = new Array ();
Person.prototype.password = "123";
Person.prototype.getInfo = function () {
  alert (this.name+ "," +this.password);
};
 
var p1 = new Person ();
var p2 = new Person ();
P1.name.push ("Zhangsan");
P1.name.push ("Lisi");
P1.password = "456";
P1.getinfo ();

The browser will print: zhangsan,lisi,456 and zhangsan,lisi,123.

If you create an object by using a prototype, all of the generated objects share the attributes in the prototype, so that an object that changes the property also reacts to other objects. So simply using the prototype is not going to work, and it needs to be combined in other ways. Next we will continue to introduce.

To define an object using the Prototype + constructor method

Javascript

function person () {
  this.name = new Array ();
  This.password = "123";
}
Person.prototype.getInfo = function () {
  alert (this.name+ "," +this.password);
};
 
var p1 = new Person ();
var p2 = new Person ();
P1.name.push ("Zhangsan");
P2.name.push ("Lisi");
P1.getinfo ();

It is a good way to define objects using the Prototype + constructor method, and to share the same method between objects.

V) Dynamic Prototyping mode

Javascript

function person () {
  this.name = "Zhangsan";
  This.password = "123";
  if (typeof Person.flag = = "undefined") {
    alert ("invoked");
    Person.prototype.getInfo = function () {
      alert (this.name + "," + This.password);
    }
    Person.flag = true;
  }    
}
 
var p1 = new Person ();
var p2 = new Person ();
P1.getinfo ();

In dynamic prototyping, all objects share a method in a constructor by the amount of flags, and each object has its own properties. The above code first creates an object by using a judgment statement to see if the Flag property has been defined, if there is no definition, by adding the GetInfo method in a prototype manner, and then setting the flag to true, then when the object is created the second time, the IF statement is judged false, and the execution is skipped. This achieves the result we expect, the object properties created are not interfering with each other, and the object's methods are shared.

17. Inheritance of objects in JavaScript (5 ways)

The first way: objects posing as

Impersonate Object Inheritance

Javascript

Parent
function Parent (username) {
  this.username = Username;
  This.sayhello = function () {
    alert (this.username);}
  ;
} Subclass
Function Child (Username,password) {
  //The following three lines of code are the most critical
  This.method = Parent;
  This.method (username);
  Delete This.method;
 
  This.password = password;
  This.sayworld = function () {
    alert (this.password);}
  ;
 
} var p = new Parent ("Zhangsan");
var C = new Child ("Lisi", "123");
 
P.sayhello ();
C.sayhello ();

The second way: Call ()

The second implementation of inheritance, the call method, is the method defined in the function object, so each function we define has the method. The first parameter of the call method is passed to this in the function, starting with the 2nd argument and assigning one to the arguments in the function.

Call inherits the parent class

Javascript

function Test (str) {
  alert (this.name+ ", +str);
}
var object = new Object ();
Object.name = "Zhangsan";
Test.call is equivalent to calling the test function

Next we use the call method to implement the object's inheritance

Javascript

Parent
function Parent (username) {
  this.username = Username;
  This.sayhello = function () {
    alert (this.username);}
  ;
} Sub Class
function child (Username,password) {
  parent.call (this,username);
  This.password = password;
  This.sayworld = function () {
    alert (this.password);}
  ;
 
} var p = new Parent ("Zhangsan");
var C = new Child ("Lisi", "123");
P.sayhello ();
C.sayhello ();

The Third Way: Apply ()

Apply Inherit parent class

Javascript

Parent
function Parent (username) {
  this.username = Username;
  This.sayhello = function () {
    alert (this.username);}
  ;
} Subclass
Function Child (Username,password) {
  parent.apply (this,new Array (username));
  This.password = password;
  This.sayworld = function () {
    alert (this.password);}
  ;
 
} var p = new Parent ("Zhangsan");
var C = new Child ("Lisi", "123");
P.sayhello ();
C.sayhello ();

The Apply method is very similar to the call method, and the Apply method is also defined in a function object, so each function that we define has the method.

There is a difference between the Apply method and the Call method: Parent.apply (this,new Array (username)); The second parameter passed is an array, and the call method passes some discrete data parameters. These two methods can not say who good who bad, to see the specific use of the scene.

The fourth way: Prototype chain mode (unable to pass parameters to the constructor)

Prototype chain inheritance

Javascript

function Parent () {
 
}
Parent.prototype.hello = "Hello";
Parent.prototype.sayHello = function () {
  alert (This.hello);
};
 
function Child () {
 
}
Child.prototype = new Parent ();
 
Child.prototype.world = "World";
Child.prototype.sayWorld = function () {
  alert (this.world);
};
 
var C = new Child ();
 
C.sayhello ();

The simple use of the prototype chain of the shortcomings: there is no way to pass parameters, only after the creation of objects to modify. We're going to solve this problem in other ways.

Fifth way: Mixing mode (recommended)

Implementing an object's inheritance using a blending method

Javascript

function Parent (hello) {
  This.hello = hello;
}
Parent.prototype.sayHello = function () {
  alert (This.hello);
}
 
function Child (Hello,world) {
  parent.call (This,hello);
  This.world = world;
}
Child.prototype = new Parent ();
Child.prototype.sayWorld = function () {
  alert (this.world);
}
 
var C = new Child ("Hello", "World");
C.sayhello ();
C.sayworld (); 

Above this JavaScript basic knowledge point induction (recommended) is small to share all the content of everyone, hope to give you a reference, but also hope that we support the cloud habitat community.

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.