关于前端:JS函数语法

JS 是前端开发的根底, 也是 ajax 技术要应用必不可少的一环, 本文次要说一下, 对于 JS 中函数的常识.

函数

JS 中的函数相当于 Java 中的办法

函数的定义有两种形式:
1. 函数申明:

function f1(){}
function f2(a,b){return a+b}

2. 函数表达式:

var f3=function(){}
var f4=function(a,b){return a+b}

定义总结:
1)在函数的定义中, 无论用哪种形式定义, 函数名都可看做变量
2) 定义函数的形式参数时, 只须要给名字即可不必 var.

应用函数须要调用, 将实参传给形参如:

f2(1,2);

留神:
调用函数时, 参数的赋值从左往右进行赋值, 若实参的个数小于形参的个数, 那么没被赋值的形参值为 undefined(不是 null)
如果调用函数时, 有 undefined 参加运算, 后果为 NaN(不是一个数)

函数的自调用

函数的自调用指的是, 函数申明完了之后, 马上进行调用, 只能应用一次, 有两种写法:

1.

(function(){console.log("自调用");
})();

2.

(function(){console.log("自调用");
}());

次要区别就是最初的括号的搁置地位.

函数自调用, 能够用于 JS 框架中的申明变量.

回调函数

function f01(callback){callback(100);
};

f01(function(result){console.log(result);
});

当执行上边的代码时, 最初会在控制台显示 ”100″.

上边是定义函数, 下边是调用函数, 下边在调用上边的 f01 函数, 而参数 callback 又回调了实参传入的 function.

总结: 当把一个函数作为实参传递给一个函数时, 这个作为实参传递的函数就被称为回调函数, 上述例子中 callback 形参指向回调函数.

全局变量和局部变量

全局变量

JS 中和 Java 一样, 都有全局变量和局部变量的含意,

全局变量: 所有函数之外的变量

var a=100;
var a=200;
function a(){console.log("a()");
}

在上述代码中后输出的 a =200 会笼罩 a =100; 函数 a()会笼罩 a =200, 这就是因为他们所取的名字都一样, 前面的 a 会笼罩前边的 a — 也就是净化.

所有的全局变量都是 window 对象 (BOM) 所有.

函数名也对一个全局变量同样会笼罩变量或办法.

局部变量

var m=100;
function f(){
    var m=200;
    m--;
    console.log(m);
}

和全局变量绝对, 函数内的变量叫局部变量, 在函数内失效, 上述代码中, 最终控制台会显示 199, 这是因为 — 当全局变量和局部变量重名时,遵循部分优先准则.

函数外不能够间接拜访函数内的变量或函数.

对象

在 JS 中, 除了 5 中根本数据类型 (number/String/boolean/null/undefined) 之外, 其余的都是对象类型.

对象的书写格局有两种:
1. 简写:

var s1={"id":100,"name":"xiaowang"};

这就是一个对象, 其中: 前为属性名,: 后为属性值.

属性名默认能够不实用 ”” 引入, 字符串和日期值必须要用 ”” 引入.

2. 非简写:

var s2=new Object();
s2.id=101;
s2.name="xiaoli";

这种就须要先 new 一个 object 对象, 再往里进行定义赋值操作.

后两步操作是将定义属性与给属性赋值同时进行.

JS 中对象实用于封装属性和办法的一个构造体, 属性办法用 ”,” 分隔!

var s3={"id":102,"name":"xiaohu","play":function(){console.log("play")}};
s3.id;// 通过变量拜访对象属性
s3.play();// 通过对象变量调用对象办法

构造函数

如果要创立大量同样属性名的对象该怎么办?
就须要引入构造函数
JS 中定义构造函数如下:

function student(id,name){
    this.id=id;
    this.name=name;
    this.play=function(){console.log("play")};
}

办法外部要拜访办法外属性要应用 this, 构造方法中 this 指向调用这个办法的对象.
有了构造方法后, 创建对象会基于构造方法去构建对象, 并将理论参数传递给形式参数:

var s4=new student(104,"xiaozhao");

在上述例子中, 在构造函数中尽量不要去再定义函数 — 因为这会导致, 每次构建对象时, 构造函数内的函数还会多额定开启一个空间.

原型对象

引入

如果不能再构造函数中再定义函数, 那么如果构造函数创立的对象须要有函数怎么办呢?

可能会想到间接增加并赋值:

s1.play=function(){console.log("play")};

这样的确再对象创立了函数并赋值了, 然而这个函数是 s1 公有的, 其余构造函数构建的对象是拿不到这个函数的.

那么就有另一种办法, 先看一下这种办法:

student.prototype.play=function(){console.log("play");
}

简略来看, 这段代码就是通过一个函数名 (student) 获取了一个对象 (prototype), 而后在对象中增加了一个函数(play) 并赋值.

当咱们须要由构造函数构建的对象都有共享的一些函数, 咱们能够基于 prototype 形式去定义.

而后当咱们应用变量 (属性或办法) 时, 咱们会当初本人对象外部查找是否有公有的变量, 没有再去 prototype 中查找.

原型对象

prototype 成为原型变量,

prototype:{constructor:f}

JS 中每个构造函数内都内置了一个 prototype 对象, 再这个对象中能够定义基于构造函数构建的所有对象所共享的属性和办法.

基于构造方法构建的对象外部都有一个属性为 ”_ proto _”, 它指向从构造函数中继承的 prototype 对象

JS 中通过继承形式来实现代码的重用性就要借助于 prototype 对象

var point=function(x,y){
    this.x=x;
    this.y=y;
}
var p1=new point(10,20);
console.log(p1._ptoto_==point.ptototype);//true

_proto _和 prototype 指向的是同一个对象(原型对象).

原型对象上增加多个函数

var point=function(x,y){
    this.x=x;
    this.y=y;
}
point.prototype={setx:function(x){this.x=x;},
    getx:function(){return x;}
}

通过上述办法就能够在原型对象上增加多个函数(setx/getx)

不再通过 prototype. 函数名的形式, 而是 prototype={}, 引入一个 json 格局的 JS 对象, 再把函数作为属性增加, 两头以 ”,” 分隔.