js函数基础

简介: 函数就是包裹在花括号中的代码块,前面使用了关键词function;当调用该函数时会执行函数内的代码;可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由JavaScript在任何位置进行调用(js对大小写敏感,关键词function必须是小写的并且必须以与函数名称相同的大小写来调用函数)

函数就是包裹在花括号中的代码块,前面使用了关键词function;当调用该函数时会执行函数内的代码;可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由JavaScript在任何位置进行调用(js对大小写敏感,关键词function必须是小写的并且必须以与函数名称相同的大小写来调用函数)

js中创建函数的方式及区别:
1.函数声明
eg:
function sum1(n1,n2){

return n1+n2;

};
2.函数表达式,又叫函数字面量
eg:
var sum2=function(n1,n2){

return n1+n2;

};
两者的区别:解析器会先读取函数声明,并使其在执行任何代码前可以访问,而函数表达式则必须等解析器执行到他所在的代码行才会真正被解释执行。

js中函数调用形式:

1.函数调用形式:函数调用形式是最常见的形式,也是最好理解的形式。所谓函数形式就是一般声明函数后直接调用即是
eg:
function func() { alert("Hello World"); }//声明一个函数,并调用
func();

var func = function() { alert("你好,程序员"); };//使用函数的Lambda表达式定义函数,然后调用
func();
这两段代码都会在浏览器中弹出一个对话框,显示字符串中的文字,这个就是函数调用;可以发现函数调用很简单,就是平时学习的一样,这里的关键是,在函数调用模式中,函数里的this关键字指全局对象,如果在浏览器中就是window对象

2.方法调用形式:将函数赋值给一个对象的成员以后,就不一样了。将函数赋值给对象的成员后,这个就不再称为函数,而应该叫做方法
eg:
var func = function() { alert("我是一个函数么?"); };// 定义一个函数
var o = {};// 将其赋值给一个对象
o.fn = func; // 注意这里不要加圆括号
o.fn();// 调用
此时,o.fn 则是方法,不是函数了;实际上 fn 的方法体与 func 是一模一样的,但是这里有个微妙的不同。

函数调用与方法调用的区别:函数调用中this专指全局对象window,而在方法中this专指当前对象,即o.fn中的 this 指的就是对象o

3.构造器模式调用:同样是函数,在单纯的函数模式下this表示window;在对象方法模式下this指的是当前对象;除了这两种情况,JavaScript中函数还可以是构造器;将函数作为构造器来使用的语法就是在函数调用前面加上一个new关键字
eg:
var Person = function() {// 定义一个构造函数

this.name = "程序员";
this.sayHello = function() {
    alert("你好,这里是" + this.name);
};

};
var p = new Person();// 调用构造器,创建对象
p.sayHello();// 使用对象
这个例子首先创建了一个构造函数Person,然后使用构造函数创建对象p,这里使用new语法,然后使用对象调用sayHello()方法;从例子中可以看出:此时this指的是对象本身;除去这个简单的使用外,构造函数还有几个变化:
(1)程序在执行到这一句的时候不会执行函数体,因此JavaScript的解释器并不知道这个函数的内容
(2)接下来执行new关键字,创建对象,解释器开辟内存,得到对象的引用,将新对象的引用交给函数
(3)紧接着执行函数,将传过来的对象引用交给this;也就是说,在构造方法中,this就是刚刚被new创建出来的对象
(4)然后为this添加成员,也就是为对象添加成员
(5)最后函数结束,返回this,将this交给左边的变量
分析过构造函数的执行以后,可以得到,构造函数中的this就是当前对象

在构造函数中return的意义发生了变化,首先在构造函数中如果返回的是一个对象,那么就保留原意;如果返回的是非对象,比如数字、布尔和字符串,那么就返回 this,如果没有return语句,那么也返回this,看下面代码:

4.apply调用模式:除了上述三种调用模式以外,函数作为对象还有apply方法与call方法可以使用,这便是第四种调用模式,我称其为apply模式
首先介绍 apply 模式,首先这里 apply 模式既可以像函数一样使用,也可以像方法一样使用,可以说是一个灵活的使用方法。首先看看语法:函数名.apply(对象, 参数数组);
eg:
// js1.js 文件中
var func1 = function() {

this.name = "程序员";

};
func1.apply(null);
alert(name);
// js2.js 文件
var func2 = function() {

this.name = "程序员";

};
var o = {};
func2.apply(o);
alert(o.name);
分别运行着两段代码,可以发现第一个文件中的name属性已经加载到全局对象window中;而第二个文件中的name属性是在传入的对象o中,即第一个相当于函数调用,第二个相当 于方法调用;这里的参数是方法本身所带的参数,但是需要用数组的形式存储在实际上,使用apply模式和call模式可以任意操作控制this的意义,在函数js的设计模式中使用广泛;简单小结一下,js中的函数调用有四种模式,分别是:函数式、方法式、构造器式和apply式. 而这些模式中,this的含义分别为:在函数中this是全局对象window,在方法中this指当前对象,在构造函数中this是被创建的对象,在apply模式中this可以随意的指定,在apply模式中如果使用null,就是函数模式,如果使用对象,就是方法模式。

js函数有哪些方法:
apply():将函数作为对象的方法来调用,将形参以数组形式传递给该方法;
call():将函数作为对象的方法来调用,将指定参数传递给该方法;
toString():返回函数的字符串表示;

js的函数调用会另外奉送两个参数,就是this和arguments;arguments是参数组,他并不是一个真实的数组,但是可以使用.length方法获得长度;arguments对象:存放实参的参数列表,仅能在函数体内使用,带有下标属性但并非数组,函数声明时自动初始化;

arguments对象属性:
1.length-获取函数实参长度,
2.callee-返回当前正在指定的函数,
3.caler:返回调用当前正在执行函数的函数名

函数参数:包括形参和实参:
1.形参是定义函数时使用的参数,接收调用该函数时传递的参数;
2.实参是调用函数时传递给函数的实际参数;
3.参数特性:参数个数没有限制:实参《形参-多余形参=undefined,实参》,形参—多余实参被忽略;参数的数据类型没有限制;通过arguments对象访问参数数组;参数

始终按值传递:基本类型-传值,引用类型-传址;

指针标识:
1.this:指向当前操作对象;
2.callee:指向参数集合所属函数;
3.prototype:指向函数附带的原型对象;
4.constructor:指向创建该对象的构造函数

目录
相关文章
|
12天前
|
JavaScript
变量和函数提升(js的问题)
变量和函数提升(js的问题)
|
12天前
|
JavaScript
常见函数的4种类型(js的问题)
常见函数的4种类型(js的问题)
10 0
|
13天前
|
JavaScript
写一个函数将N组<>(包含开始和结束),进行组合,并输出组合结果 (js)
写一个函数将N组<>(包含开始和结束),进行组合,并输出组合结果 (js)
9 0
|
24天前
|
自然语言处理 JavaScript 网络架构
js开发:请解释什么是ES6的箭头函数,以及它与传统函数的区别。
ES6的箭头函数以`=>`定义,简化了函数写法,具有简洁语法和词法作用域的`this`。它无`arguments`对象,不能用作构造函数,不支持`Generator`,且不改变`this`、`super`、`new.target`绑定。适用于简短表达式,常用于异步编程和高阶函数。
17 5
|
1月前
|
JavaScript 前端开发 网络架构
JavaScript 谈谈对箭头函数的理解及其与普通函数的区别。
JavaScript 谈谈对箭头函数的理解及其与普通函数的区别。
17 1
|
1月前
|
前端开发 JavaScript 数据处理
在JavaScript中,什么是异步函数执行的例子
在JavaScript中,什么是异步函数执行的例子
10 0
|
1月前
|
JavaScript
JS封装节流函数
JS封装节流函数
15 0
|
1月前
|
JavaScript 前端开发
JavaScript函数科里化
JavaScript函数科里化
|
22天前
|
JavaScript
js开发:请解释什么是ES6的Generator函数,以及它的用途。
ES6的Generator函数是暂停恢复的特殊函数,用yield返回多个值,适用于异步编程和流处理,解决了回调地狱问题。
15 6
|
1月前
|
JSON JavaScript 前端开发
JavaScript随手笔记---数组中相同的元素进行分组(数据聚合) groupBy函数
JavaScript随手笔记---数组中相同的元素进行分组(数据聚合) groupBy函数