javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript的函数简介

详解JavaScript的函数简介

作者:1900''''''''''''''''s 88 keys

这篇文章主要为大家介绍了JavaScript的函数简介,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

函数简介

函数function

优点:

创建函数

构造函数创建函数

语法

var fun =new Function(代码块);

这种形式构建函数的比较少。

函数声明创建函数

语法:

function 函数名(形参1,形参2......形参N){
    语句...
}

函数表达式创建函数

var 函数名 = function 函数名(形参1,形参2......形参N){
    语句...
}

函数的参数

形参(形式参数):

实参(实际参数):

function sum(a, b) {
    console.log(a + b);
}
sum(1, 2);//调用函数,传入实参

在这里插入图片描述

参数的数量:

问题: 在JavaScript中调用函数时传递变量参数时,是值传递还是引用传递?

var a = 3;
function fn(a) {
    a = a + 1;
}
fn(a);
console.log("a为:", a);// 3

在这里插入图片描述

在这里就可以理解为是值(基本)传递

var obj = { name: "心猿" };//声明一个对象
function fn(obj) {
    console.log(obj.name);
}
fn(obj);//“心猿”
//这里可以理解为地址值传递,也可以理解为引用传递(地址值)

在这里插入图片描述

函数的调用

直接调用:

函数名()

function fn(obj) {
    console.log("我是直接被调用的!");
}
fn()//直接调用

在这里插入图片描述

通过对象调用

obj.函数名()

Obj = {
    fun(){
        console.log("我是通过对象调用的!");
    }
}
Obj.fun();//通过对象调用函数

在这里插入图片描述

new调用

new fun()

function fun() {
    console.log("我是通过new调用的!");
    return 1 + 2;//返回一个值
}
var result = new fun();
console.log("result:", result);//fun {}
console.log("result的数据类型:",typeof result);//"object"

在这里插入图片描述

注意:

1、用new调用的函数,得到的永远是一个对象,不管函数有没有返回值

2、使用new调用函数,这个函数就是一个用来创建对象的函数(构造函数)

fun.call/apply(obj)调用

这个是临时让fun成为obj的方法进行调用

var obj = { name: "心猿" };//声明一个对象
function fun() {
    this.age = 5000;
    console.log("通过fun.call(obj)调用函数!");
}
//不能直接通过obj.fun()调用,但是可以通过fun.call(obj)进行调用
fun.call(obj)//相当于obj.fun
//打印通过fun.call(obj)调用函数!
console.log("还可以当做obj的方法调用age的信息  "+"age:",obj.age);//5000

在这里插入图片描述

函数的返回值

函数可以有返回值,也可以没有返回值。

立即执行函数

函数定义完,立即被调用,这种函数叫做立即执行函数

立即执行函数往往只会执行一次。

语法:

(function(){
	代码块;
})();

例如:

(function (a, b) {
    console.log("num:", a + b);
})(1,3);//4

在这里插入图片描述

方法

var obj = new Object()
{
    obj.name = "心猿";
    obj.age = 3000;
    obj.sayName = function(){
        console.log("name:",obj.name);
    }
}
obj.sayName();

在这里插入图片描述

另一种写法:

var obj = {
    name: "意马",
    age: 3000,
    sayName: function () {
        console.log("name:", obj.name);
    }
}
obj.sayName();

在这里插入图片描述

枚举对象中的属性:

可以看我这篇的不同方法遍历的区别:比较JavaScript中for、forEach、for…in、for…of的区别

使用for...in语句

语法

for(var index in arr)
{
    console.log(index);//代码块
}

for ...in语句 对象有几个属性,循环体就会执行几次,每次执行时,会将对象中的一个属性的名字赋值给变量

在这里插入图片描述

var person = {
    name:"孙悟空",
    age:5777,
    gender:"男"
};
for(var index in person)
{
    console.log(person[index]);
}

作用域

作用域指一个变量的作用范围

在JavaScript中一共两种作用域:

1.全局作用域(全局变量)

2.函数作用域(局部变量)

3.块级作用域ES6语法

全局作用域

变量作为window对象的属性保存

var  a = 10;
console.log("a:",a);
console.log("window.a:",window.a);

因为环境的原因在node.js下会报错

在这里插入图片描述

在浏览器中会正常显示

在这里插入图片描述

函数都会作为window对象的方法

function fun(){
   console.log("我是window.fun函数!")
}
window.fun();

在这里插入图片描述

函数作用域

块级作用域

ES6(ECMAScript 2016)使用let声明的变量,作用范围在语句块中

for(let i=0;i<100;i++){
			}

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:
阅读全文