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

转载地址: http://www.3q2008.com/soft/search.asp?keyword=

概要： 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 对象

转载地址: http://www.3q2008.com/soft/search.asp?keyword=