JavaScript language Pristine Classic example (finishing article) _javascript skills

Data type

JavaScript is a weakly typed language, but it is not without a type, and JavaScript can recognize the following 7 different types of values:

Basic data types

1.Boolean

2.Number

3.String

4.null

5.undefined

6.Symbol

Object

1.Array

2.RegExp

3.Date

4.Math

5...

You can use typeof to determine the data type, the operator returns a string, but not all the results returned are expected

typeof false//"Boolean"
typeof. 2//"number"
typeof NaN//"number"
typeof '//"string"
typeof Undefi Ned//"undefined"
typeof symbol ()//"symbol"
typeof new Date ()//"Object"
typeof []//"Object"
typeof Alert//"function"
typeof null//"Object"
typeof Not_defined_var//"undefined"

Variable

In your application, you use variables to name the values. The name of the variable is called identifiers

Statement

1. Use keyword var: function scope

2. Use keyword let: chunk scope (block scope local variable)

3. Direct use: global scope

var global_var = 1;
function fn () {
var fn_var = 2;
if (Fn_var >) {let
block_var = 3;
GLOBAL_VAR2 = 4;
}
}

Declare only unassigned, and the default value of the variable is undefined

The CONST keyword can declare immutable variables, as well as block scopes. The understanding of immutable understanding on the object of the subject needs attention

Const num = 1;
Const OBJ = {
prop: ' Value '
};
num = 2; Uncaught typeerror:assignment to constant variable.
obj[' prop '] = ' value2 ';
obj = []; Uncaught typeerror:assignment to constant variable.

Variable elevation

In JavaScript, you can reference a variable that you later declare without throwing a different, which is called a variable declaration elevation (hoisting)

Console.log (a); Undefined
var a = 2;

Equal to

var A;
Console.log (a);
A = 2;

Function

A function is a subroutine that can be called by an external code (or recursively called by the function itself)

Defining functions

1. Function declaration

2. Expression of function

3.Function Constructors

4. Arrow function

function fn () {}
var fn = function () {}
var fn = new function (arg1, arg2, ... argn, funcbody)
var fn = (param) = > {}

Arguments

1.arguments: An array-like object that contains parameters passed to the current execution function

2.arguments.length: Number of arguments passed to function

3.arguments.caller: Functions that invoke the currently executing function

4.arguments.callee: currently executing function

function foo () {return
arguments;
}
Foo (1, 2, 3); ARGUMENTS[3] 

Rest

function foo (... args) {return
args
}
Foo (1, 2, 3); ARRAY[3]
//[1, 2, 3]
function fn (A, B, ... args) {return
args;
}
FN (1, 2, 3, 4, 5); ARRAY[3] 

Default

The parameters of a function can contract the default value at the time of definition

function fn (A = 2, b = 3) {return
a + b;
}
FN (2, 3); 5
fn (2);//5
fn ();//5

Object

Objects in JavaScript are variable keying sets (keyed collections)

Defining objects

1. Literal volume

2. Constructor function

var obj = {
prop: ' Value ',
fn:function () {}
};
var date = new Date ();

Constructors

Constructors are not different from ordinary functions, which are called constructors using the New keyword, which enables you to instantiate an object with a constructor function.

The return value of a function can be two possibilities

1. An explicit call return returns the evaluation of an expression

2. No call return returned undefined

function people (name, age) {
this.name = name;
This.age = age;
}
var people = new People (' Byron ', 26);

Constructor return value

1. No return value

2. Simple data type

3. Object type

The first two case constructors return an instance of the constructed object, which is the attribute that the instantiated object uses

The third constructor behaves in the same way as the normal function, returning the result of the expression after return

Prototype

1. Each function has a prototype object attribute with a constructor attribute in the object, and the default points to the function itself

2. Each object has a __proto__ attribute, and the zodiac points to its parent type prototype

function person (name) {
this.name = name;
}
Person.prototype.print = function () {
console.log (this.name);
};
var p1 = new Person (' Byron ');
var p2 = new Person (' Casper ');
P1.print ();
P2.print ();

This and scope

Scope can be popular to understand

1. Who am I?

2. What kind of horses do I have?

The answer to whom I am is this

Marty is my local variable.

This scene

normal function

1. Strict mode: undefined

2. Non-rigorous mode: global object

3.node:global

4. Browser: Window

Constructors: Instances of objects

Object methods: The object itself

Call & Apply

1.fn.call (context, arg1, arg2, ..., argn)

2.fn.apply (context, args)

function Isnumber (obj) {return
Object.prototype.toString.call (obj) = = ' [Object number] ';

Function.prototype.bind

Bind returns a new function that is scoped to the bind parameter

function fn () {
this.i = 0;
SetInterval (function () {
console.log (this.i++);
}. Bind (this), +)
}
fn (); 
() => {}

The arrow function is a new feature provided by ES6, a shorthand function expression with lexical scopes and this value

function fn () {
this.i = 0;
SetInterval (() => {
console.log (this.i++);
})
fn ();

Inherited

In the JavaScript scene, inheritance has two goals, and subclasses need to get the parent class:

1. Properties of objects

2. Method of the object

 function inherits (child, parent) {var _proptotype = object.create (parent.prototype); _pro
Ptotype.constructor = Child.prototype.constructor;
Child.prototype = _proptotype;
function people (name, age) {this.name = name; this.age = age;} People.prototype.getName = function () {return this.name} function 中文版 (name, age, language) {People.call (this, NAM
E, age);
This.language = language;
Inherits (中文版, people); English.prototype.introduce = function () {Console.log (' Hi, I am ' + this.getname ()); Console.log (' I speak ' + This.langu
Age); Function Chinese (name, age, language) {People.call (this, name, age); this.language = language;} inherits (Chinese, peop
Le); Chinese.prototype.introduce = function () {console.log (' Hello, I am ' + this.getname ()); Console.log (' I say ' + this.language);} VA
R en = new 中文版 (' Byron ', num, ' 中文版 ');
var cn = new Chinese (' Salad oil ', 27, ' Chinese ');
En.introduce (); 
Cn.introduce (); 

ES6 class and inheritance

"Use strict";
Class people{
Constructor (name, age) {
this.name = name;
This.age = age;
}
GetName () {return
this.name;
}
}
Class 中文版 extends people{
Constructor (name, age, language) {
super (name, age);
This.language = language;
}
Introduce () {
console.log (' Hi, I am ' + this.getname ());
Console.log (' I speak ' + this.language);
}
Let en = new 中文版 (' Byron ', num, ' 中文版 ');
En.introduce ();

Grammar

Label statement

Loop

for (var i = 0; i < i++) {for
(var j = 0; J < 5; J +) {
console.log (j);
if (j = = 1) {break
loop
;
}
}} Console.log (i);

Statements and expressions

var x = {a:1};
{a:1}
{a:1, b:2}

Execute function now

(function () {} ());
(function () {}) ();
[function () {} ()];
~ function () {} ();
! function () {} ();
+ function () {} ();
-function () {} ();
Delete function () {} ();
typeof function () {} ();
void function () {} ();
The new function () {} ();
The new function () {};
var f = function () {} ();
1, function () {} ();
1 ^ function () {} ();
1 > function () {} ();

Higher order functions

Higher-order functions are functions that take functions as arguments or return values as functions.

callback function

[1, 2, 3, 4].foreach (function (item) {
Console.log (item);
});

Closed Bag

The closure is made up of two parts

1. function

2. Environment: Local variables within the scope when a function is created

function Makecounter (init) {
var init = init | | 0;
return function () {return
++init
}
}
var counter = Makecounter (a);
Console.log (counter ());
Console.log (counter ());

Typical error

for (var i = 0; i < doms.length i++) {
doms.eq (i). On (' click ', function (EV) {
console.log (i);
});
} 
for (var i = 0; i < doms.length i++) {
(function (i) {
doms.eq (i). On (' click ', function (EV) {
CONSOLE.L OG (i);
});
} (i);
}

Lazy functions

function Eventbindergenerator () {
if (window.addeventlistener) {return
function (element, type, handler) {
Element.addeventlistener (Type, Hanlder, false);
}
else {return
function (element, type, handler) {
element.attachevent (' on ' + type, handler.bind (element, window.event));
}} var addevent = Eventbindergenerator ();

Corrie

A way to allow functions to be generated using partial parameters

function Istype (type) {return
function (obj) {return
Object.prototype.toString.call (obj) = = ' [Object ' + type + ']';
}
}
var isnumber = Istype (' number ');
Console.log (Isnumber (1));
Console.log (Isnumber (' s '));
var IsArray = istype (' Array ');
Console.log (IsArray (1));
Console.log (IsArray ([1, 2, 3])); 
function f (n) {return
n * n;
}
function g (n) {return
n * 2;
}
Console.log (f (g (5)));
function pipe (f, g) {return
function () {return
f.call (null, g.apply (NULL, arguments));
}
var fn = pipe (f, g);
Console.log (FN (5));

Tail recursion

1. Tail call refers to the last step of a function is to call another function

2. Function call itself, called recursion

3. If the tail calls itself, it is called tail recursion

Recursion can easily occur "Stack Overflow" error (Stack Overflow)

function factorial (n) {
if (n = = 1) return 1;
return n * factorial (n-1);
}
Factorial (5)//120

But for the tail-handed return, "stack Overflow" error never occurs because there is only one call record

function factorial (n, total) {
if (n = = 1) return total;
return factorial (n-1, n * total);
}
Factorial (5, 1)//120

Reduce the parameters of the curry

Function currying (FN, n) {return
function (m) {return
Fn.call (this, M, n);}
;
}
function tailfactorial (n, total) {
if (n = = 1) return total;
Return tailfactorial (n-1, n * total);
}
const factorial = currying (tailfactorial, 1);
Factorial (5)//120

Anti-Corrie

Function.prototype.uncurry = function () {return
this.call.bind (this);
};

Push generalization

var push = Array.prototype.push.uncurry ();
var arr = [];
Push (arr, 1);
Push (arr, 2);
Push (arr, 3);
Console.log (arr);

The above content is small series to introduce the JavaScript language pristine classic example (finishing article) of all the narration, hope to help everyone!