Function and Optimization 1. Function construction Method: The constructor of all functions in JS is function, including function itself, (function is its own instance and its own Constructor)
证明:
Function.prototype = = = function.__proto__
1.1 Function Declarations: functions name () {}1.2 function expression: var function name = function () {};1.3 constructor: var function name = new function (parameter 1, parameter 2, function body);
1. 不传参数创建出来的是空函数. 2. 一个参数:函数体(字符串). 3. 传多个参数的情况:(字符串). 例:简单的求两个数和:
var New Function (' a ', ' b ', ' return a + B '); SUM (in);
注:传参数时候可以使用:拼接字符串或反引号(ES6方法)或者创建模板引擎
2. Method of accessing the Function: 2.1. Function call pattern: function name ();
this:指向window
2.2. method Invocation pattern: object. function name ();
this:谁调用就指向谁
2.3. constructor Call pattern: new function name ();
this:指向new出来的对象
2.4. context invocation pattern: resolves an issue where an lvalue cannot be assigned a value
左值(LValue):能正常的在等号左边被赋值的值 右值(RValue):能正常的在等号右边赋值的值* 语法:1 函数名.call(this指向,实参,实参) 注意: 1当传入的第一个参数为undefined或Null时,指向的是window 2当传入的第一个参数为简单数据类型时,this指向该数据的基本包装类型* 语法:2 函数名.apply(this指向,数组或伪数组) 注意:第一个参数与call语法相同,后面的数组参数中的元素拆解后传给函数
3. Eval (string that conforms to the JS syntax Specification) function:
* 功能:将字符串转化为代码并执行;* 1.eval与Function()的共同点:将字符串转化为代码; 2.不同点:Function()转化成代码之后是函数,需要手动调用才能执行,eval()会直接执行* Function与eval的问题 1.需要预解析,执行效率问题 2.安全性问题(如果别人输入的内容符合规范,可以进行跨站脚本攻击xss) 3.eval会将json字符串中的{}当做代码段处理,所以会报错 处理:在json字符串外面拼接小括号易形成一段完整的语句; 把变量声明也写在eval参数中:
var jsonstr = {"key": "value"}; Eval ("var obj =" + jsonstr);
4. Json2.js: introduced to resolve IE7 and the following version of JSON does not define the Problem.
json2.js提供了json的序列化和反序列化方法,可以将一个json对象转换成json字符串,也可以将一个json字符串转换成一个json对象。源码地址:https://github.com/douglascrockford/JSON-js
4.1. json2.js Use the basic model:
//在页面中添加json2.js的引用。
<--introducing Json2.js file--
<script type= "text/javascript" src= "js/json2.min.js" ></script>
// Serialization Methods
var = {id: ' jsonobj ', name: ' Tom ' };
json.stringify (jsonobj); // Deserialization Method var jsonstring = ' {' id ': ' n ', ' name ': ' Tom '} '; Json.parse (jsonstring);
5. Members of Function objects
* arguments * caller 函数在哪个环境中调用的,就指向谁,如果函数是在全局环境下调用的,指向Null* length 形参个数* name 函数函数声明与函数表达式创建出的name为函数名,new Function()创建的函数name为‘anonymity‘
5.1. arguments Object: is an object inside a function (the execution environment is inside the Function) and is a pseudo-array.
1 伪数组:有length属性(但是不会动态改变),可以被遍历,但没有数组的方法. 2 arguments对象: * 作用:当函数调用的时候会将所有实参一次存入伪数组中(无论形参与实参个数是否对应). * 应用场景:当时参数个数不确定的时候,就可以不用写形参直接用arguments 获取实参. * 属性: 1.length 判断用户调用函数时输入的实参个数 2.callee 指向 arguments对象 所在的这个 函数!
6. Reload: Overload
重载:根据参数个数的不同,调用相同函数名函数不同的功能;JavaScript没有重载!不过可以根据arguments属性的长度判断来模拟重载.
7. Static members and instance members 7.1. Static Members: members accessed through constructors
一般将工具方法,比如($.ajax)设置为静态成员
7.2. Instance members: members accessed through the object
一般将于对象相关的成员,比如(.css) 设置为实例成员
8. Scope: 8.1. Lexical scope (static scope): when the code is written, determine the scope of the variable 8.2 according to the writing structure of the Code. Dynamic scope: determines the scope of a variable according to the calling environment of the Code. JavaScript does not have a dynamic scope!!
作用域的意义:保护变量.
8.3. JavaScript code Execution order:
1 预解析阶段:会对变量的声明(变量只提升声明以及函数的声明提升到其当前作用域的顶部! 变量提升(hoisting) * 函数形参赋值的过程是在 函数与变量提升之前 * 当两个函数同名的时候两个函数都会提升 * 当函数与变量同名的时候,会忽略变量声明,只提升函数声明 * 就算有多个script标签,全局作用域也只有一个,但声明提升是分段的 * 条件式函数声明在变量提升的时候会将条件是函数声明当做函数表达式处理只会提升函数名) 注:条件式函数声明:在条件语句中的函数声明2 自上而下执行
9. Sandbox Mode: The sandbox mode in JS is implemented by functions
沙箱模式的基本模型:
(function(window) { // Declare all required variables // write main function code // exposing the interface to the outside world through the window object, if needed }) (window)
9.1. sandbox mode Why did you pass the window as a parameter?
1. 有利于代码压缩,因为原生的内置对象无法被压缩,使用形参接收后,形参是可以被压缩的 2. 实现隔离的思想,外界不直接去使用内部的东西,内部也不直接去访问外部的任何东西! 3. 沙箱的参数不都是window,而是如果要在沙箱内部使用沙箱外部的东西就需要把该东西当做参数,传递进沙箱内部!
9.2. where is sandbox mode applied?
1. 框架 2. 组件 3. 插件
10. Recursion
1 定义:在一个函数 通过名字直接或间接地调用自身2 用递归解决问题的关键点:化归思想. 例: 斐波那契数列第n项
function fib (n) { if(num <= 2) { return 1; Else { return fib (n-1) + fib (n-2); } } Console.log (fib (6));
3 * 递归的问题:时间复杂度多,产生多次重复计算发生效率问题 , * 解决方案:可以使用缓存容器解决; 例: 斐波那契数列第n项
functionrecursive () {vararr = [];//records the items that have been found, as caches, from recursive recurrence calculations return function(n) {if(!arr[n]) {//determine if there is an item in the array, and some words return directly if(n <= 2) {arr[n]= 1; } Else{arr[n]= Outer (n-1) + outer (n-2); } } returnarr[n]; }}varFIB =recursive (); console.log (fib (1000));
11. Closure 11.1. Definition: a package structure, or space, that has a closed external disclosure. (a function that has permission to access a variable in another function Scope) 11.2. Concept: a function that can access independent data 11.3. Role:
* 1.保护数据 如果直接将数据定义全局中,那么将对数据失去控制权 使用闭包可以将数据保护起来,外界想要访问数据,必须通过指定的渠道,而制定渠道的方法,就是建立一个函数,在函数中建立校验机制以保证数据的合理性与安全性. * 2.可以给函数提供私有的变量闭包的基本模型:
functionouter () {varA = 10; varInner = {//encapsulates two methods as an objectGeta:function(){//Get Data returna; }, setA:function(formal Parameters) {//set the data by passing in Parameters //the validation mechanism can be established to ensure the rationality and security of the Data.A =Formal parameters; returnA//can also not be returned, just set } } returninner; } varGetfun = Outer ();//call first, then assign value, return the inner objectConsole.log (getfun.geta ());//get aConsole.log (getfun.seta (real parameter));//set aConsole.log (getfun.geta ());//again gets the modified a
实例:用延时定时器,逐个打印数字
for (var i = 0; i < ten; i++) { function outer () { var j = i; function inner () { console.log (j); } return inner; } SetTimeout (outer (),1000*i); };
11.4. closure problem: unreasonable use will cause memory leaks, because the memory space of the closed packet will be resident memory, resulting in a loss of resources 12. JS is a single-threaded language: the task in Js: a secondary task is not performed until the primary task is completed
*主要任务(主逻辑代码) *次要任务(例如setTimeout()与setInterval())
13. Caching: temporary storage of data to avoid repeated calculations to improve user access efficiency 13.1. Browser cache:
将网站资源在浏览器端进行保存,用户在请求服务器的时候,这些被保运的资源直接从本地读取而不必去服务区读取,从而提高用户访问速度;
13.2. CDN:
* CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度。CDN的关键技术主要有内容存储和分发技术。* 实现原理:CDN广泛采用各种缓存服务器,在用户访问网站时,利用全局负载技术将用户的访问指向距离最近的缓存服务器上,由缓存服务器直接响应用户请求。
13.3. Database Cache:
静态的网站的内容都是些简单的静态网页直接存储在服务器上,可以非常容易地达到非常惊人的访问量。但是动态网站因为是动态的,也就是说每次用户访问一个页面,服务器要执行数据库查询,启动模板,执行业务逻辑到最终生成一个你所看到的网页,这一切都是动态即时生成的。从处理器资源的角度来看,这是比较昂贵的。对于大多数网络应用来说,过载并不是大问题。但是对于中等至大规模流量的站点来说,尽可能地解决过载问题是非常必要的。
13.4. Hardware Cache:
这是另一个领域的问题,这里暂时不做具体研究,有机会深入接触后再作补充
What are the features of the functions in javascript? How should it be optimized?