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:指向创建该对象的构造函数

目录
相关文章
|
2月前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
50 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
2月前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
3月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
3月前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
3月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
62 4
|
3月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
40 2
|
3月前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
38 5
|
3月前
|
JavaScript 前端开发
Node.js 函数
10月更文挑战第5天
30 3
|
3月前
|
前端开发 JavaScript
探索JavaScript函数基础
探索JavaScript函数基础
27 3
|
3月前
|
存储 JavaScript 前端开发
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
77 0

热门文章

最新文章