javascript --函数

一、函数的理解：

　　　　函数就像当于一个凳子，用的时候就拿来用，不用的时候就放在那个地方即可，

　　　　代码是从上向下进行调用，首先看到凳子（函数）不调用，向下走，看到方法名，就相当于进行调用函数里面的方法体.

二、函数的好处：

　　       2.1.可以重复调用

　　　　2.2、方便

三、函数的创建方式

　　　　3.1、function 方法名称（）{

　　　　　　函数方法体

　　　　　　}

　　　　3.2、var 方法名称 = function（）{

　　　　　　函数方法体

　　　　　　`}

 四、函数的命名规则：

    　　   4.1、首先和js的命名方法一样，主要是有意义，并且是驼峰命名法。yueXiao(一般都是这种)

　　　　4.2、pascal命名法：LiuYuPing

　　　　4.3、Camel(骆驼)命名法: liuYuPing（js变量命名）

　　　　4.4、短横线命名法:liu-yu-ping（html）

 

五、函数的种类：

　　　   5.1、系统函数
　　　　　　alert(); document.write() console.log()
　　       5. 2、事件驱动函数
　　　　　　onclick() 鼠标点击事件，, onMouseover() 鼠标划入事件、onMouseout()鼠标划出事件，onChange () 双击的时候触发事件，onfocus()获取焦点时发生， 　　　　　　onblur()失去焦点时发生， onsubmit() 函数表示在表单中的确认按钮被点击时触发的事件
　　　　5.3、用户自定义函数（今天所学知识）

　　　　　　getBig(a) 就是行驶参数

　　　　　　function getBig(a){

　　　　　　　　console.log(a); //7

　　　　　　}

　　　　　　getBig(7); //这个是实参。

　　　　　　解释： 首先要 创建一个函数。从上到下进行运行代码，运行到函数的时候并不先进行调用函数，

　　　　　　知道下面看到该函数的方法名（）；则说明要进行调用函数， 如果函数的方法名中传一个参数，则这个参数说明是实参，

　　　　　　而函数中的参数，则是一个形参。

 

六、函数都有一个内置方法： 在形参中就可以省略传参

　　　　　　6.1.arguments:

　　　　　　　　function neizhi(){

　　　　　　　　　　console.log(arguments);   //打印这个数组，全部元素

　　　　　　　　　　console.log(arguments[0]); //打印数组中下标为0 的数组元素

　　　　　　　　　　console.log(arguments.length)

 　　　　　　　　};

　　　　　　　　neizhi(2,3,4,5,9);

　　　　　　6.2.return :

　　   　　　　　　6.2.1可以是返回值

　　　　　　　　　　　　function fanhui(a,b){

　　　　　　　　　　　　　　console.log(a+b);//11

　　　　　　　　　　　　　　return a+b;

　　　　　　　　　　　　}

　　　　　　　　　　　var a = fanhui(5,6);

　　　　　　　　　　　console.log(a); // 11

　　　　　　　　　6.2.2可以进行停止操作

　　　　　　　　　　　　function fanhui(){

　　　　　　　　　　　　console.log(11111111);

　　　　　　　　　　　　for(var i = 0 ; i <= 10; i++){

　　　　　　　　　　　　console.log(i);

　　　　　　　　　　　　if(i == 5){

　　　　　　　　　　　　return i;

　　　　　　　　　　　　}

　　　　　　　　　　　　}

　　　　　　　　　　　　}

　　　　　　　　　　　　fanhui();

　　　　　　　　　　　　var zhongzhi = fanhui(); //zhongzhi是葛变量

　　　　　　　　　　　　console.log("返回的终止"+zhongzhi);

3.复用：函数可以进行相互调用

　　　　　　　　　　/* 方法进行调用。 */
　　　　　　　　　　function fuyong(a,b){
　　　　　　　　　　console.log(a+b);
　　　　　　　　　　return a+b;
　　　　　　　　　　};
　　　　　　　　　　// fuyong(5,6);
　　　　　　　　　　var fanhui1 = fuyong(5,6); // 11
　　　　　　　　　　var fanhui2 = fuyong(7,5);
　　　　　　　　　　console.log(fanhui1);
　　　　　　　　　　console.log(fanhui2);
　　　　　　　　　　console.log(fanhui1+fanhui2);

　　　　　　　　　　// 函数之间进行调用
　　　　　　　　　　function fuyong2(){
　　　　　　　　　　var num = fuyong(2,3);   //调用 fuyong() 这个方法 ，最终实现的结果是 5
　　　　　　　　　　return num;
　　　　　　　　　　　　　　};

　　　　　　　　　　var fanhui4 = fuyong2();
　　　　　　　　　　console.log("函数之间的调用"+fanhui4);

七、函数的作用域

　　　　　　　　　　7.1、全局变量

　　　　　　　　　　　　var num = 6;

　　　　　　　　　　　　function fangfa1(num){ //虽然是穿过来的参数。

　　　　　　　　　　　　　　num = 10;   //虽然 传过来一个实参，但是形参在接受之后，在重新给这个num 赋值。

　　　　　　　　　　　　　　console.log(num);

　　　　　　　　　　　　}

　　　　　　　　　　　　console.log(num);    //输出的是6

　　　　　　　　　　　　fangfa1(num);  //输出的是10

　　　　　　　　　　　　console.log(num); //输出的是6

　　　　　　　　　　 7.2、局部变量

　　　　　　　　　　　　function fangfa2(){

　　　　　　　　　　　　　　var num = 11;

　　　　　　　　　　　　　　console.log(num);

　　　　　　　　　　　　}

　　　　　　　　　　　　fangfa2(); // 直接输出 11；

　　　　　　　　　　　　console.log(num); //这个就会报错，因为num 是局部变量。

===================================================================================================

八、闭包：函数套函数，什么时候想用就直接用，并不会影响全局

　　　　　　　　　　  闭包特点： 提到闭包就首先知道是内存泄漏以及立即执行函数。

　　　　　　　　　　1、函数嵌套函数
　　　　　　　　　　2、内部函数可以引用外部函数的参数和变量
　　　　　　　　　　3、被内部函数引用的参数和变量并不会被垃圾回收机制所回收。 
　　　　　　　　　　好处：
　　　　　　　　　　1、希望一个变量常驻内存
　　　　　　　　　　2、避免全局变量的污染
　　　　　　　　　   3、私有成员的存在

　　　　　　　　　　闭包去调用函数的区别：

　　　　　　　　　　函数调用，执行程序，消耗内存。每调用一次函数，系统就分配一段内存给这个函数去运行。
　　　　　　　　　　当这个函数运行结束以后，这段内存要销毁小，还给内存。

　　　　　　　　　　当js的垃圾回收机制检测不到该变量被使用，就会被垃圾回收机制收走。

　　　　　　　　　　而闭包，就会产生一个一直存在，切不释放的变量。
　　　　　　　　　　内存泄漏:占用内存空间，不释放，一直占用
　　　　　　　　　　注:闭包会会引发内存泄漏

　　　　　　　　　　　　含义解释：fu() j函数内部创建一个函数 fn2()  ,且 fu2()函数访问  fn（） 函数中的局部变量，这种现象我们就说fn2()这个函数闭包到了 fn()这个函数

　　　　　　　　　　　　function fn(){
　　　　　　　　　　　　var nu = 1;
　　　　　　　　　　　　　　function fn2(){
　　　　　　　　　　　　　　nu++;
　　　　　　　　　　　　　　console.log(nu);
　　　　　　　　　　　　　　}
　　　　　　　　　　　　return fn2;
　　　　　　　　　　　　}
　　　　　　　　　　　    console.log(fn()); //输出的是fn2这个函数
　　　　　　　　　　　　fn()(); //2 这个就是一值从头fn进行执行。
　　　　　　　　　　　　fn()(); //2
　　　　　　　　　　　　var a = fn(); //这个是fn2这个函数
　　　　　　　　　　　　a(); //函数() 就是调用调用fn2，不用调用 fn();

九、（闭包2）自执行函数（想要解决问题就要把闭包函数  修改成自执行函数即可）

　　　　修改方法  如下：

　　　　　　　　　　　　var a = (function fn() {

          　　　　　　　　      var num = 1;

           　　　　　　　　    return function() {    // fn()函数的返回值为num++函数，赋值给a

                　　　　　　　　num++;

                　　　　　　　　console.log(num);

          　　　　　　　　    }

        　　　　　　　　　})();

                                          a(); // 2  直接调用num++函数

                                          a(); // 3

九、点击事件的案例：

　　　　　　　　　　　第一种：可以直接在div中直接输出

　　　　　　　　　　　　　　<div onclick="console.log('divdddd')"></div>

　　　　　　　　　　　第二种：

　　　　　　　　　　　　　　<div onclick= 'aa()'></div>
　　　　　
　　　　　　　　　　　　　　<script type="text/javascript">
　　　　　　　　　　　　　　function aa (){
　　　　　　　　　　　　　　console.log('这是一个方法');
　　　　　　　　　　　　　　};
　　　　　　　　　　　　　　</script>

 

 ===================================================================================================

使用       原生 js  实现初始化页面

html:

 var {app, map} = uearth.init();
    // var obj = uearth.init();
    // var app = obj.app;
    // var map = obj.map;

js

const uearth = {
  geoData: [
    [118.80117416381836, 32.05944574382282],
    [118.77842903137206, 32.060609597582975],
    [118.79971504211427, 32.04249544572742],
    [118.77842903137206, 32.04351400722718],
    [118.77868652343751, 32.08082919266005]
  ],
  init: () => {
    // app
    const app = new THING.App({ container: 'demo' })
    // map
    const map = app.create({
      type: 'Map',
      atmosphere: true, style: { night: true, fog: false },
      attribution: '高德'
    })
    // 基础瓦片
    const tileLayer = app.create({
      type: 'TileLayer',
      name: 'tileLayer1',
      url: 'https://{a,b,c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      style: { template: CMAP.TileLayerStyle.DARKGREEN }
    })
    map.addLayer(tileLayer)
    // 初始视角 
    app.camera.earthFlyTo({
      lonlat: z.geoData[0],
      height: 2000,
      time: 500
    })

    return { app, map }
  },