函数封装与使用

208 阅读5分钟
概念:

function,被设计为执行特定任务的代码块

作用意义:功能封装、代码复用、精简结构、提高效率、鲁棒性
基本使用:

组成:关键字、函数名、形参、函数体:模块语句,返回值

//函数声明
function HANSHUMING(item1,item2,····){
    函数体
}
//旧版函数实例:function()构造函数
var myFunction = new Function("a", "b", "return a * b");
var x = myfunction(4,3)
//等同于以下
var myFunction = function (a, b) {return a * b};
var x = myFunction(4, 3);
//ES6默认参数传递
function myfunction(x,y = 10){return x*y}
myfunction(0,2) 
myfunction(5)

PS: return

1、返回关键字:return

2、函数内部只执行一次return,且后面代码不再执行,函数立即结束

3、函数默认返回值为undefined

4、返回多个值的模式:一、利用数组;二、

PS: 声明定义

1、 在 JavaScript 中,很多时候,你需要避免使用 new 关键字

2、提升Hoisting,JS默认将当前作用域提升到前面的行为

命名规范:

1、和变量命名基本一致
2、一般小驼峰命名
3、动词+名词
4、常用动词:can/has/is/get/set/load

调用: 函数名(参数)

1、定义为对象调用

 let myObject = {
     firstName: "",
     lastName: "",
     fullName: function(){
         return this.firstName + " " + this.lastName;
     }
 }
 myObject.fullName()

2、构造函数调用函数

//构造函数
function myfunction(name,sex){
    console.log(name)
    console.log(sex)
}
//使用new 重新创建函数对象
var fun = new myfunction('John','man')
fun()

PS:

1、构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法

2、构造函数声明时this没有值,直到new时被创建

3、作为函数方法调用函数

//call()和apply() 
//构造函数
function myFunction(a,b){
    return a*b
}
myObject = myFunction.call(myObject,10,2)
myObject = myFunction.apply(myObject,[10,2])

PS:

1、在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法

2、call与apply的第一个参数必须是函数对象本身

3、在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值, 即使该参数不是一个对象。

在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代

4、作为函数调用(最简单普通常用的方式)

PS:

1、函数在JavaScirpt中是属于HTML的全局对象:window.function()

2、使用 window 对象作为一个变量容易造成程序崩溃

参数: 提高函数灵活性

形参:在函数体内声明的null变量,无明确数值;

实参:具体的赋值数据,函数调用时给予

PS:

开发中尽量保持形参域实参个数一致

否则需要重构函数

参数个数:

PS:

1、实参多于形参,后续值被忽略

2、实参少于形参,默认为undefined,使用逻辑或完成默认值设置

3、arguments为传递实参的伪数组,无法使用array的一些方法,只能在函数中用

4、可以将argumens视为从函数调用开始就是常量化,无法写权限

显式参数:函数显式参数在函数定义时列出。

隐式参数:函数隐式参数在函数调用时传递给函数真正的值。

//函数调用的参数是函数的隐式参数
//实参传递的只有值传递,修改不影响其实参值
//隐式参数的改变在函数外不可见

PS://通过对象传递(传递地址)的参数可以被修改,且可见,引用传递

伪数组:arguments

//当函数调用设置了过多的参数,参数无法引用,只能使用arguments对象来调用

**函数分类:**

显式函数

//普通函数
function fun(){
    函数体
}

隐式函数

//变量函数
let fn = function(x,y){
    函数体
};
//此处要加上分号,表明执行语句
fn(x,y)

箭头函数

(item1,item2,···,itemN)=>{
    函数声明
}
//单一返回值
(item)=>表达式

PS:

1、箭头函数会默认帮我们绑定外层 this 的值,所以在箭头函数中 this 的值和外层的 this 是一样的。

2、箭头函数是不能提升的,所以需要在使用之前定义。

3、使用 const 比使用 var 更安全,因为函数表达式始终是一个常量

立即执行函数(自调用):避免全局变量之间的污染

//可以自调用的是:函数表达式;不能自调用声明的函数
//(function)的括号说明她是一个函数表达式
//分号:;必须带上
(function (){console.log()})();
(function (){console.log()}());

作用域* * :可用性的代码范围**

全局作用域:全局变量

局部作用域:函数内部变量

块级作用域:{执行体内部变量}

PS:

1、函数内部或块中,没有声明而直接赋值的变量,视为全局变量(一般不采取),会污染外部变量

2、函数形参视为局部变量

3、不同作用域的变量命名冲突:

4、内部函数可以访问外部变量,利用链式查找决定哪些数据可以被内部函数访问----》就近原则

5、当前作用域里如果先使用再let声明,无论全局变量是否存在,系统都报错

特点:

在 JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" 。

但是JavaScript 函数描述为一个对象更加准确

JavaScript 函数有 属性方法

例如:

//arguments为函数内部接收的伪数组,length可以返回函数调用过程中收到的参数个数
function myfunction(x,y){
    return arguments.length;
}
//将函数作为字符串返回
let txt = myfunction.toString()
逻辑中断:
function fun(a,b){
    //逻辑或中断,鲁棒性——》健壮值
    a = a || 0
    b = b || 0
    //函数体
}
function fun(a,b){
    //当其输入为其他类型时,默认置0
    //利用 boolean(除0数字) = true 的特性
    a = !a ? 0 : a
    b = !b ? 0 : b
    //函数体
}

\