js javascript函数匿名具名回调函数 jquery Vue 调用结构理解

概要：
1 函数声明
function 函数名(){}

2 匿名函数表达式
var x=function(){}
x()

3 对象中的属性和函数方法
var x={ msg:function(){ 函数内容 }}
x.msg()
x['msg']()

4 函数不指定参数接受参数
关键字 arguments

5 回调函数
匿名函数表达式回调
var $=function(callback){}
$(function(){})
jquery 框架结构已经出来

6 jquery框架调用函数结构分析

7 Vue调用结构分析

1：函数声明
function msg(v) {
//执行的代码
alert(v)
}
调用:
msg(123)

2：函数表达式匿名函数表达式
JavaScript 函数可以通过一个表达式定义。
函数表达式可以存储在变量中：

var x=function(v){
alert(v)
}

调用:
x(123)

以上函数实际上是一个匿名函数 (函数没有名称)。
函数存储在变量中，不需要函数名称，通常通过变量名来调用。

x(123) 可以理解为

重点：
(function (v){alert(v)})(123) 这样是有效运行

错误示例：

function (v){alert(v)}(123)
被解析为两条语句：

function (v){alert(v)};
(123) ;

详见 :https://segmentfault.com/q/1010000003028413

在 ECMAScript 中，函数声明（Function declaration, FD）与具名函数表达式（Named function expresson, NFE）具有相同的语法：

FunctionDeclaration :
function Identifier ( FormalParameterListopt ) { FunctionBody }
FunctionExpression :
function Identifieropt ( FormalParameterListopt ) { FunctionBody }

function a(b) {alert(b)} 到底是一个 FD 还是一个 NFE 取决于它所处的位置，例如在 IIFE 结构(function a(b) {alert(b)})() 中，函数被包裹在分组运算符 ()中，此时该函数就是一个 NFE，因为分组运算符只接受表达式。把函数放在 !, +, !, void 等运算符后面也是同理，明确地表示该函数是一个 NFE。

相反，当 function a(b) {alert(b)} 出现在语句开头的时候，它就被解析为一个 FD，而不是 NFE。因此，function a(b){alert(b)}(1) 被解析为两条语句：

function a(b) {alert(b)}  // FD
(1)      // 表达式语句

console 显示的 1 是 (1) 求值的结果。（你可以把 function a(b){alert(b)}(1) 复制到JavaScript AST visualizer 查看生成的抽象语法树）

alert(a)会对 a 进行隐式的类型转换，以 String 为 hint 调用 a 的 [[toPrimitive]] 内部方法，实际就是调用 a.toString，然后再 alert，所以在模态对话框中显示 a 函数的字符串表示。

备注:

(function (v){alert(v)})(445566)
(function (v){alert(v)}(445566))

均可以运行

其他写法
(function () { /* code */ } ());
!function () { /* code */ } ();
~function () { /* code */ } ();
-function () { /* code */ } ();
+function () { /* code */ } ();

3：将方法作为对象中的一个属性值! 对象中的{属性:属性值} 此处的属性值为函数

var x={
msg:function(v){
alert(v)
},
msg1:function(v){
alert(v+"对象")
}

}
x.msg(123) //调用 1
x.msg1(123) //调用 msg1

var M = {
    a : {
        b : function() {}
    }
};
调用方法
M.a.b();

4 函数不指定参数接受参数

利用arguments，可以获得调用者传入的所有参数，也就是函数定义时可以不指定任何参数
f(arguments.length === 0) {
return 0;
}
var x = arguments[0];
return x >= 0 ? x : -x;

5 回调函数

将函数以参数的方式传递到其他函数内部

<script>

//回调函数 将函数 以参数的方式传递到其他函数内部

var x=function (callback){

alert(1)

var r=callback();

alert(r);

}

x(function(){

//回调函数重新传入函数的过程

alert(2)

return 100;

})

//提示 顺序 依次 1  2  100 

</script>

匿名函数变量 x 调用时候传递的是一个函数匿名函数变量的参数是callback

但匿名函数变量x 为 $ 时就完全呈现出 jquery 框架的结构

时间函数的回调
setTimeout(function(){
alert ("setTimeout函数的回调")
},100)

6 jquery调用结构分析

//方法1
$(function(){
// jquery框架作用域
$("#button1").click(function(){ //ID为button1 单击响应
} );   
});
//方法2
$(document).ready(function(){
// jquery框架作用域
})
//网上很多资料 说 两种写法是一样的,
$(function(){});// 应该理解 是匿名函数的 回调 jquery的匿名函数 对应的默认回调函数 是否是 jquery(document)ready 当前未知
$(document).ready() //是 jquery(document)ready函数的 回到操作
 




7 Vue调用 结构分析 及比对
jquery 
$(function(){......})
jquery  为匿名函数$ 回调函数方式 传入代码
调用方式 也是回调
$("#button1").click(function(){ //ID为button1 单击响应
} )
//-----------------------此处 在回调 $("#button1").click(方法)
jquery hide方法的回调   
                    $("p").hide("slow",function(){                          alert("使用回调函数，先隐藏再弹出对话框!");  
                    })         
                




重点：
Vue 
var app=new Vue({....}) 
Vue 为 对象实例化时候  传入 代码   传入的是一组对象 
分析 Vue结构  重点：

var app=new Vue({
  el: ’#app’,
  data: {
    message: ’Hello ’
  }
,
  methods: {//3
     
       selectall:function(){
       
       this.books.forEach(function(itme){
        itme.select=!itme.select
       })
           
     },
           
    },
computed: {//4
     hj: function() { //  合计计算找到   项 合计
      var hh = 0;
      this.books.forEach(function(item) {
 
       hh += item.price * item.count;
      });
      return hh;
     },

 
},

            template:’#demo2’//5
,
         components:{//6
                "panda":{
                    template:`<div style="color:red;">  {{ test}}</div>`,
                    props:[’test’]
                }
            }

})
定义一个  对象 app  实例化  对象 vue 传入  对象参数
这个对象 参数 是JSON 结构 ,
第一个键值   el   值是 #app
第二个键值  data   值 是 json 对象 
第三个键值 methods 值是 json 对象     json对象中 包含  一个 属性 为 selectall  值为函数的 json集合
第四个键值 computed 值是 json 对象   json对象中 包含 一个 属性 为 hj  值为 有返回值函数的    json集合
第五个键值 template 值是 字符串
第六个键值 components  值是  json对象     json对象中 又包含了 键值  json 对象 