# JS Senior Day
## JS basic introduction
+ JS uses: Javascript can be achieved browser, server-side (nodejs). . .
+ JS browser consists of three parts:
- the ECMAScript: basic syntax (data types, operators, functions, ...)
- the BOM (Browser Object Model): window, location, history, navigator. . .
- DOM (Document Object Model): div, p, span. . .
+ ECMAScript, also known as es, has the following major version:
- Old age:
- ES 1.0. . . ES3.1
- New Age:
- ES5
- ES6 (ES2015)
- ES7 (es2016), es8 (es2017)
## data types
+ basic data types - the value type :( numbers, strings, Boolean values, null, undefined)
- undefined type?
1, a variable declaration, but there is no assignment, the default value is undefined
2, a variable declared and assigned a value of undefined
3, an object, get a nonexistent property, the value is undefined
+ Complex data types - :( reference type object)
- Array
- Function
- regular expression
- a Date
## using basic object
### creates an object
`` `JS
var Student = {
name:" Bai ", // student has a name attribute value of" Bai "
Grade:" started ",
// A, say a student attribute value of a function
// b, student say there is a method
say: function () {
the console.log ( "Hello");
},
RUN: function (Speed) {
the console.log ( "is in "+ speed +" speed m / sec run ");
}
}
`
### Object is a collection of key-value pairs: Object properties and methods are constructed
(there are saying is: there are properties of the object that the method is also a property)
+ Name attribute is a property is grade
+ say a run method is a method of
### operating object properties
#### acquired properties:
#### The first embodiment: Syntax
+ student.name acquired value of the name attribute, as: "Bai"
+ student.say acquired a function
#### The second way: [] syntax
+ student [ "name"] is equivalent to student.name
+ Student [ "say"] is equivalent to student.say
The extraordinary ####: The difference between the two ways:
+ Syntax is more convenient, but more pit (limitations), such as:
- the back can not be used js keywords, reserved words (class, the this, function ...)
- behind the numbers can not be used.
`` ` JS
var obj = {};
obj.this =. 5; // syntax error
obj.0 = 10; // syntax error
`
+ [] Is more widely used
- o1 [variable name]
- [ "class"], [ "this"] are free to use the obj `[" the this "] = 10`
- [0], [. 1], [2] may be used
-` obj [3] = 50 = obj [ "3"] = 50 '
- thinking: Why obj [3] = obj [ " 3"]
- You can even use this: [ "[Object Array]"]
- jQuery which will have such an implementation
- this may be used: [ "{abc}"]
- added to the object properties {abc}
#### set properties
+ `Student [" gender "] =" M " '
is equivalent to:` student.gender = "M" `
- Meaning: if the object is not gender student attributes, add a gender attribute value of" M "
- if student object has gender attributes to modify gender attribute is "male"
+ Case 1: `student.isFemale = true`
+ Case 2: `student [" children "] = [1,2,5]`
+ Case 3:
= function student.toShanghai () {
the console.log ( "Shanghai is destined way")
}
#### Delete property
The Delete Student + [ "Gender"]
+ the Delete student.gender
(the Delete only delete object attributes can not be deleted variables)
## shortcomings by creating an object literal way:
1, there is a lot of redundant code.
2, all instances of objects that have the same properties and methods, will lead to a waste of memory (memory leaks). )
The constructor to create the object ##
Examples ### to create an object constructor:
+ = var Xiaoming new new Object () -> var Xiaoming = {};
+ = new new var now a Date ()
+ var Rooms the Array = new new (. 1 , 3,5) -> = var Rooms [l, 3,5]
+ = `var IsMale / 123 /; ==`> `var = IsMale new new RegExp (" 123 ")`
- IsMale by the constructor RegExp created out of objects
- isMale is an instance of RegExp constructor
+ The above example, Object, Date, Array constructor are built in
## custom a constructor to create objects
+ constructor
`` `JS
function the Person (name, Age) {
this.name = name;
this.age = Age;
}
var new new P1 = the Person (" Zhao ", 18)
`` `
+ Description:` p1 is based on [Person] constructor to create objects out of `
Concept constructor ###
+ Any function can be used as a constructor
`CreateFunc function () {}`
+ as long as a new function called by the way, we put this time the function is called is called: structure calling functions
- new CreateFunc (); this time CreateFunc is a constructor (must be new new)
- CreateFunc (); at this time is not the constructor CreateFunc
About ### Object new new ()
+ new new Object () is equivalent to the object literal {}
Execution constructor ###
`var = P1 new new Person ();`
+. 1, creating an object (we call instance of the Person object constructor) - `` _p1
+ 2, create an internal object, `this`, this refers to the instance (_p1)
+. 3, performing an internal function code which is part of this operation of the operation example (_p1)
+. 4, return values:
- a, if the function does not return a value ( no return statement), it will return an instance constructor (P1)
- B, if the function returns the value of a basic data type, then the return value of this example is that the constructor (_p1)
fn function () {
}
var new new F1 = fn (); // F1 is fn Examples
fn2 function () {
return "ABC";
}
var new new fn2 = F2 (); // F2 is an instance constructor fn2
- c, the function returns a value if a complex data type, then the return value of this function is the value
Fn3 function () {
return [l, 3,5];
// array object type is a value,
// so the array is a complex data type value of
// -> This constructor is the true value of the return array
// -> is no longer fn3 instance constructor
}
var new new fn3 = F3 (); // example F3 fn3 is it? Error
// f3 is [1,3,5]
## inherited
### JS in the concept of inheritance:
+ by [a certain way] so that an object can have access to the properties and methods of another object,
we call this approach 'is not inherited so-called xxx extends yyy`.
Why ### To use inheritance?
+ Some objects will have the same method (action, behavior), but these methods are functions,
if these methods and functions are placed in the constructor declaration will lead to a waste of memory.
例子：
function Person(){
this.say=function(){
console.log("你好")
}
}
var p1=new Person();
var p2=new Person();
console.log(p1.say === p2.say); //false
Analysis: As the method may say similar function,
but not the same method (not point to the same piece of memory, will be a memory waste).
Solution: the say way to write in their common (parent) in.
In fact, their common parent object can be obtained by Person.prototype.
Conclusion: just add a property, a method of the prototype object to the constructor,
then such a property, a method can be shared by all instances of the constructor.
==> [prototype object constructor is called herein] prototype object.
// Person.prototype is the prototype of the object p1 p2 p3
// Person.prototype is Person constructor prototype object [instance]
guess?
Person who's prototype object is it?
-> First Person constructor should know: -> Function
-> So the Person prototype object is: Function.prototype
The first embodiment ### inheritance: the prototype inheritance chain. 1
`JS
Person.prototype.say = function () {
the console.log (" Hello ")
}
`
+ disadvantages: a method of adding 1,2 it does not matter, but if too many ways lead to code redundancy
The second embodiment ### inheritance: Inheritance prototype chain 2
`` `JS
Person.prototype = {
constructor: the Person,
say: function () {
the console.log (" Hello ");
},
RUN: function () {
the console.log ( "sprint progress");
}
}
`
+ Note point:
+ A, under normal circumstances, it should first change the prototype object, and then create an object
+ B, generally, the new prototypes, We will add a constructor property, so as not to destroy the original prototype object structure
### inheritance third way: copy inherited (mixed inheritance)
+ Scene: sometimes want to use an object in the property, but can not modify it directly, so you can create a copy of the object
+ to achieve 1:
JS `` `
var {name = Source:" Bai ", Age: 15}
var target = {};
target.name = source.name
target.age = source.age;
` ``
+ The above manner obviously can not be reused, the preparation of the actual code process, very often using the Copy inheritance way, so in order to reuse, can write a function to them encapsulate:
`` `JS
function Extend (target, Source) {
for (in Key Source) {
target [Key] = Source [Key];
}
return target;
}
Extend (target, Source)
`` `
+ Since the copy inherited usage scenario very much in the actual development, so a lot of libraries have this realization
- jquery: $ extend.
+ Es6 the operator with the object if the extension is specifically designed to copy the succession of Health:
`` `JS
var {name = Source:" Bai ", Age: 15}
var target = {} ... Source
` ``
### inheritance fourth way: prototypal inheritance
+ scenario:
- create a pure object
- to create a class that inherits from a parent object's children
+ usage:
- empty object: Object.create (null)
-
` JS ``
var = {O1 say: function () {}}
var = the Object.create O2 (O1);
`` `
A fifth embodiment ### of the Inheritance: Constructors borrow inheritance
+ scenario: the logic applies to the constructor between two kinds of similar situations
function Animal(name){
this.name=name;
}
function Person(name,age){
this.name=name;
this.age=age;
}
+ Borrowed code with the above constructor implemented
`` `JS
function Animal (name, Age) {
this.name = name;
this.age = Age;
}
function the Person (name, Age, address) {
Animal.call (the this, name );
//this.name=name;
//this.age=age;
this.address = address;
}
`` `
## prototype chain
## the closure
### variable scope
+ variable scope of the concept: the range is a variable that can be used
+ the JS in a first outermost scope: called global scope
+ can also function in the JS create a separate scope, where the functions can be nested, so can also be nested scopes
### scope chain
+ due to the scoped variable relative terms, and if there is multi-level scope, that variable and from where? The question we need to explore a good look, and we look for this process variable called variable scope chain
+ In simple terms, the scope chain can use the following words to sum it :( Or: determine a variable from in which a scope)
- View the current scope, if you declare a variable current scope, to determine the result
- to find the current scope of the superior scope, which is the current function of the superior function, look at a higher level function has not declared
- then find the superior function of the higher functions until the global scope
- if there is no global scope, we believe that this undeclared variables (xxx is not defined)
+ Example. 1:
`` `JS
var name =" John Doe ";
function F1 () {
var name =" ABC ";
the console.log (name);
}
F1 ();
` ``
+ Example 2:
`` `JS
var name =" John Doe ";
function F1 () {
the console.log (name);
var name =" ABC ";
}
F1 ();
` ``
+ Example. 3:
`` `JS
var name =" John Doe ";
function F1 () {
the console.log (name);
var name =" ABC ";
}
F1 ();
` ``
+ 举例4：
```js
var name="张三";
function f1(){
return function(){
console.log(name);
}
var name="abc";
}
var fn=f1();
fn();
```
+ 举例5：
```js
var name="张三";
function f1(){
return {
say:function(){
console.log(name);
var name="abc";
}
}
}
var fn=f1();
```
Closure ### issues
`` `JS
function Fn () {
var A =. 5;
return function () {
A ++;
the console.log (A);
}
}
var Fn = F1 ();
F1 ();
F1 ( );
F1 ();
`` `
Closure ### causes problems
+ after the function is finished, retaining the scope of a variable value of the latest
Closure application scenario ###
+ modular
+ variable prevent destruction
### es6 content
+ 1, deconstruction assignment
+ 2, function rest parameters
+ 3, arrow functions
- arrow function and a normal function What's the difference? (4:00)
+ 4, object Object.assign
+. 5, Promise
+. 6, Generator
+. 7, the async
+. 8, class
+. 9, Module1
### prototype
+ prototype development with a lot of people can not?
- Many people with es6 / 7/8 development, does use less
- developed version of the previous code if you use es5 (IE8, IE7 ...), may have to write every day, prototype
- prototype understand, is to understand object-oriented core JS, without understanding the prototype, you do not understand object-oriented core