JavaScript Advanced Part Concept usage

first, the execution context

也称为可执行代码和执行上下文执行代码:1.全局代码 2.函数代码 3.eval代码eval("var a = 200;console.log(a)")执行上下文 - Context 所处的一个环境，环境不同含义也随着改变了当可执行代码执行的过程中，都会产生一个可执行环境在执行完之后，执行上下文的环境也随着销毁执行上下文中变量存在于：变量对象：VO - var 声明的一个属性值 - 全局 活动对象：AO - 相对于函数创建的对象中的一个声明 - 局部 - 随执行完后销毁不管变量在什么地方声明，都会在函数一运行就声明一个函数中的变量变量提升：指一个函数上下文创建时，函数中的所有变量都会随函数的创建提升    var x = 100;    var outFunc = function(){        x++;        console.log(x);//NaN        var x = 200;    }    outFunc();    console.log(x);//100函数中 x 声明提前，但是赋值并没有提前，所有此时的x为undefined，undefined进行运算结果就为NaNvar  outFunc = function(){    var a = 100;    var innerHtml = function(){        var b = 200;        a = b;//a替换了outFunc()中a var a = 100的值 此时a = 200；//      c = a;    }    innerHtml();    console.log(["inner:",a]);//200}outFunc();//该函数在运行完后函数中的变量随之销毁console.log("outer:",a);//not defined

Ii. Scope Chain

Scope: That is, the scope chain of the code: if the variable of a function does not use VAR declaration, declaring the variable will look up the value of the variable until the global variable has not yet created a global variable scope object-holds the object reference in the previous layer-the property that belongs to a function. When a function is created, a scope object that already has the function references each function that contains its own VO, scope object, scope chain object var food = "Bun"; var eat = function () {console.log (food);//Bun} (    function () {var food = "fried fritters"; Eat ()}) var foo = 1;function Bar () {if (!foo) {var foo = 10;//foo variable is promoted to the bar function, but the value does not increase at this time the promoted Foo is undefined! Foo just satisfies the condition} console.log (foo);}    Bar (); var a = 1;function B () {a = ten;//a = A () return; function A () {}//variable is promoted to the front of the function}b (), Console.log (a), var f = true;if (f = = = True) {var a = 10;}    function fn () {var b = 20; c = 30;} fn (); Console.log (a);//10console.log (b);//not Definndconsole.log (c);//30if (' A ' in window) {var a = 10;//variable promoted to if judgment, However, the value does not increase; no VAR will first determine whether to enter Judgment}console.log (a),//10var a = b =3; (function () {var a = b = 5;//var a = 3; b = 5}) (); Consol   E.log (a);//3console.log (b);//5var foo = ' a '; Console.log (foo); Avar foo = function () {console.log (' B ');}   Console.log (foo); function () {Console.log ('B ');}              Foo (); Bfunction foo () {///function was present at the very beginning, but was overwritten after the Var foo declaration and has been promoted; it will affect the upper and lower order of the Code console.log (' C ');}   Console.log (foo);              function () {console.log (' B ');}-foo ();    Bvar a = 1;function B () {Console.log (a);//undefined a = 2;    Console.log (a);//2 var a = 3;  Console.log (a);//3}console.log (a);//1b (); Console.log (a);//1//closure-related function value var x = 100;var y = 200;function Funca (x) {var y =    201; function FUNCB () {console.log (x);//101 console.log (y);//201} return FUNCB;}   var f = Funca (101); F ();

third, this keyword

This is also referred to as the current object, which is used in the first person, the environment is not the same as the meaning of the reference is also different if in the method of the object, as long as in the nested function of this will not point to the current object of this, such as: var name = "Zhang San"; var func = function () {console.log (this.name);//This point is the global variable}func (); fnnc.apply (); Func.call () var obj = {name: "Harry", Func:f Unction () {console.log (this.name);//This point refers to the name (function () {Console.log (this.name) in the object);//At this time The this point is not the name of the object, but the global variable}) ()}}obj.func (); Change the method that this point points to: 1.call2.apply The role of the two is the same, can help to complete the invocation of the method, the default this point to the global, to access the nested object, Assign it to a variable call () Or apply () to change the object of this, the first parameter is not the difference: var sum = function (A, b) {Console.log (a+b)}sum.call (null,100,200)- Using the parameter list sum.apply (null,[100,200])-Using an array * * * Practice ***var MyObject = {foo: "Bar", Func:function () {var self = thi        S Console.log (This.foo);//bar Console.log (Self.foo);//bar (function () {console.log (this.foo);//unde Fined Console.log (Self.foo);//bar}) ()}}myobject.func (); var user = {count:1, getcount:functio N () {return This.count }}console.log (User.getcount ());//1var func = User.getcount;//func represents the User.getcount function Console.log (func ());// Undefined-func () has become global, there is no count in the global variable, so the value is undefined

four, closure-closure

闭包：是指能够访问函数内部变量的函数，定义在函数内部的函数。一个函数引用了外部的自由变量，那么这个函数就叫闭包，被引用的函数和引用的函数是一同存在的。自由变量 - 跨作用域的变量或父级的变量函数必须引用外部变量，函数还必须被引用才能成为闭包优点：可以把一个局部变量存在的时间延长，进行持续保存缺点：如果大量的使用闭包，持续保存的变量会一直占有内存，造成内存的浪费常用：事件处理常常会使用到闭包var lis = document.getElementsByTagName("li");for(var i = 0;i<lis.length;i++){    //方法实现一    (function(index){//阻止闭包        lis[index].onclick = function(){            console.log("这是选中的地"+(index+1)+"项");        }    })(i)    //方法实现二    var func = function(index){    lis[index].onclick = function(){            console.log("这是选中的地"+(index+1)+"项");        }    }    func(i);}//闭包练习function Foo(){    var i = 0;    return function(){        console.log(i++);//i++先赋值再运算    }}var f1 = Foo();var f2 = Foo();f1();//0f2();//0f2();//1

v. Object-oriented-oo-object oriented

Language classification is broadly divided into two main classes-paradigm 1. Command-tells the computer how to do things in the language: Java, C (contributing to the development of the programming language) two ideas of imperative: 1.1. Process-oriented process-decomposition of the procedure into one step execution-computer thinking mode as the main body Disadvantage: People's thinking is limited, if the process of implementation is very complex, people will not be able to fully consider 1.2. Object-oriented-itself is the way of thinking, human thinking as the main body, from their own point of view-characteristics, behavior-all objects, objects due to concern and produce 2. Declarative-Tell the computer what I want and then count The computer carries out the related action, and then the machine does its own operation to get the results I want. For example: three categories of CSS declarative: 2.1. Domain-specific language-DSL-language in a specific range-HTML, CSS, SQL, regular expressions 2.2. Functional programming-Similar formulas, the computer will press  The formula is calculated and the results are returned. Functional programming is leaner compared to imperative programming, which can improve some of the drawbacks of imperative programing-Lisp, Haskell 2.3. Logic Programming-Prolog-logging a good way to build objects is two ways: 1. Class-based object-oriented- A class that has the same attributes is an abstraction of an object, and an object is an instance of the Class 2. Prototype-based object-JavaScript prototypes have an Object object that clones one of the objects through a prototype benefits: flexible enough: the randomness is too strong, For beginners error-prone three main features: 1. Encapsulation-the key to understanding-the process of hiding the implementation details is the encapsulation benefits:-but also the problem of the parameter 1.1. Hide the implementation details 1.2. Reuse-unchanging integration together, changing the parameters of Jav Ascript properties should be private, methods can be public-controlled by ourselves pulic-public, other methods can access private-private, can only access set/get-accessor/modifier var Student = Fu        Nction (name,age,gender) {this.name = name;        var _age = age;//Add _ variable can be changed to private variable, external cannot freely access var _gender = gender; if (! Student._init) {StudenT.prototype.getage = function () {return _age;                    } Student.prototype.setAge = function (age) {if (Age > && Age < 30) {                    _age = age;                Console.log (_age);                }else{console.log ("Age modification cannot be beyond 20-30");            }} Student.prototype.getGender = function () {return _gender;                } Student.prototype.setGender = function (gender) {_gender = gender;            Console.log (_gender);    }} Student._init = true;    } var stu = new Student ("Zhang Fei", 20, "male");    Stu.name = "Guan Yu";    Stu.setage (31);    Console.log (Stu.getage ());    Console.log (Stu.getgender ()); Stu.setgender ("none"); 2. Inheritance-exists in a relationship with a parent and child-higher incidence-refers to the ability to take an object and the ability to add new features advantages: 2.1. Multiplexing 2.2. Extension disadvantage: If the inheritance design is not perfect, it will cause the change Complex, difficult to manipulate 3 methods of inheritance: 1. Object Impersonation-instanceof-to determine if it is inherited 2. Prototype chain-Change your prototype to a parent object 3. Blending mode-//  1. Object Impersonation Method/*var people = function (name) {this.name = name;    } People.prototype.intro = function () {Console.log ("HI, I Am" +this.name);        } var chinesepeople = function (name) {This.inhert = people;    This.inhert (name) delete This.inhert;    } var info = new Chinesepeople ("Zhang San");    Console.log (Info.name);    Console.log (Info instanceof chinesepeople); *///2. Prototype Chain/* var people = function (name) {this.name = name;    } People.prototype.intro = function () {Console.log ("HI, I Am" +this.name);    } var chinesepeople = function (name) {} Chinesepeople.prototype = new People ("Zhang San");    ChinesePeople.prototype.area = function () {Console.log ("I am Chinese");    } var info = new Chinesepeople ("Zhang San");    Console.log (Info.name);    Console.log (Info instanceof chinesepeople);    Info.intro ();    Info.area (); *///3. Mixed/*var people = function (name) {this.name = name; } People.prototype.intro = function () {CONSOLE.LOG ("HI, I Am" +this.name);    } var chinesepeople = function (name) {People.call (this.name);    } Chinesepeople.prototype = new People ("Zhang San");    ChinesePeople.prototype.area = function () {Console.log ("I am Chinese");    } var info = new Chinesepeople ("Zhang San");    Console.log (Info.name);    Console.log (Info instanceof chinesepeople);    Info.intro (); Info.area (); */3. polymorphic-JavaScript itself is a polymorphic behavior var Student = {"Name": "Zhang Fei", "age": +, "learn": function () {Conso Le.log (this.name+ "Learning JavaScript")}}student.gander;//accesses a property that does not exist with a value of Undefinedstudent.learn (); Student.name; student["Name"];    student["Lea" + "RN"];//dynamic attribute values using brackets or string concatenation//constructor var Student = function (name,age) {this.name = name;    This.age = age;        This.learn = function () {Console.log (this.name+ "-" +this.age);        var = this;        (function () {console.log (that); } ())}}var stu1 = new Student ("Zhang Fei"),//stu1 as an object var stu2 = new Student ("Liu Bei", 21); Student.prototype.gander = "male";//Add a gender attribute to the prototype Student.prototype.play = function () {//Create a Play method in the prototype Console.log (this.name+ "-" +this.age+ "-" + "likes to play the game" );} Stu1.learn (); Console.log (Stu1.gander); Stu1.play (); Stu2.learn (); studetn.prototype;//can change a real prototype of an object, but cannot call stu1.__proto__ multiple times; Just changing the STU1 reference prototype, instead of the prototype itself, is just an attribute of the object, which can be accessed through a layer of properties to the object's prototype object → custom object prototype →object Object →object prototype →nullif (!    Student._int) {//first to determine whether the Student._int is false, student._int beforehand does not exist that is false, into the judgment, student._int to true, not into the judgment, this judgment can only be judged once    Student.prototype.learn = function () {Console.log (this.name+ "-" +this.age);    } Student.prototype.play = function () {//Create a Play method in the prototype Console.log (this.name+ "-" +this.age+ "-" + "likes to play the Game"); } Student._int = true;} Two operators: New-Create an object; Delete-delete Property-the name attribute in DELETE.STU1.NAME;//STU1 is deleted, only the prototype created without deleting the property created by the prototype two statements: with-performance has a certain problem, try not to use; For: In-do not take the loop array; var stu1 = new Student ("Zhang Fei"),//STU1 is an object var stu2 = new Student ("Liu Bei"); for (var key in stu1) {Console. Log ([Key,stu1[key]]);}

Advanced parts of JavaScript conceptual usage