js函数新手笔记

最新推荐文章于 2022-11-22 16:47:47 发布
最新推荐文章于 2022-11-22 16:47:47 发布
阅读量225 收藏
点赞数
分类专栏： 【javascript】
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chehec2010/article/details/85241868
版权

1、函数声明 

1、函数可以通过声明定义
function functionName(parameters) {
  执行的代码
}

函数声明后不会立即执行，必须调用了之后才可以执行

例如：
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>day(runoob.com)</title> 
</head>
<body>

<p>本例调用的函数会执行一个计算，然后返回结果：</p>
<p id="demo"></p>
<script>
function myFunction(a,b){
	return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>

</body>
</html>

 2、匿名函数

2、函数表达式可以存储在变量中（匿名函数）：

var x = function (a, b) {return a * b}; 

例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>day(runoob.com)</title>
</head>
<body>

<p>函数存储在变量后，变量可作为函数使用：</p>
<p id="demo"></p>
<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
</script>

</body>
</html>

3、Function() 构造函数

var myFunction = new Function("a", "b", "return a * b");

var x = myFunction(4, 3);


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>day</title>
</head>
<body>

<p>JavaScrip 内置构造函数。</p>
<p id="demo"></p>
<script>
var myFunction = new Function("a", "b", "return a * b");
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>

</body>
</html>

 4、自调用函数

(function () {
    var x = "Hello!!";      // 我将调用自己
})(); 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>day</title>
</head>
<body>

<p>函数可以自动调用：</p>
<p id="demo"></p>
<script>
(function () {
    document.getElementById("demo").innerHTML = "Hello! 我是自己调用的";
})();
</script>

</body>
</html>

5、函数可以作为值使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>day</title>
</head>
<body>

<p>函数可作为一个值：</p>
<p>x = myFunction(4,3) 或 x = 12</p>
<p>两种情况下，x 的值都为 12。</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
    return a * b;
}
var x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

6、函数可以作为表达式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>day</title>
</head>
<body>

<p>函数可作为一个表达式使用。</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
    return a * b;
}
var x = myFunction(4, 3) * 2;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

7、函数是对象

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

JavaScript 函数有 属性 和 方法。

arguments.length 属性返回函数调用过程接收到的参数个数：

其实arguments就是一个数组一样。

function myFunction(a, b) {
    return arguments.length;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>day</title>
</head>
<body>

<p> arguments.length 属性返回函数接收到参数的个数：</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
    return arguments.length;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>

</body>
</html>

8、函数的toString()方法，（toString() 将函数作为一个字符串返回）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>day</title>
</head>
<body>

<p> arguments.length 属性返回函数接收到参数的个数：</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
    return arguments.length;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>

</body>
</html>

注意：函数定义作为对象的属性，称之为对象方法。
           函数如果用于创建新的对象，称之为对象的构造函数。

9、箭头函数

这个表达式和scala函数表达式差不多

() => {函数声明}

// ES5
var x = function(x, y) {
     return x * y;
}
 
// ES6
const x = (x, y) => x * y;

函数的参数：

 

参数规则

JavaScript 函数定义显式参数时没有指定数据类型。

JavaScript 函数对隐式参数没有进行类型检测。

JavaScript 函数对隐式参数的个数没有进行检测。

 

1、函数可以自带参数

function myFunction(x, y = 10) {
    // y is 10 if not passed or undefined
    return x + y;
}
 
myFunction(0, 2) // 输出 2
myFunction(5); // 输出 15, y 参数的默认值


例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>day</title>
</head>
<body>

<p>设置参数的默认值。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
function myFunction(x, y = 10) {
    // 如果不传入参数 y ，则其默认值为 10
    return x + y;
}
// 输出 2
document.getElementById("demo1").innerHTML = myFunction(0, 2) ;
// 输出 15, y 参数的默认值
document.getElementById("demo2").innerHTML = myFunction(5);
</script>

</body>
</html>

2、Arguments 对象

JavaScript 函数有个内置的对象 arguments 对象。
argument 对象包含了函数调用的参数数组。

x = findMax(1, 123, 500, 115, 44, 88);
 
function findMax() {
    var i, max = arguments[0];
    
    if(arguments.length < 2) return max;
 
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}

或者创建一个函数用来统计所有数值的和：

x = sumAll(1, 123, 500, 115, 44, 88);
 
function sumAll() {
    var i, sum = 0;
    for (i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}

arguments相当于是参数的数组。

函数的调用：

function myFunction(a, b) {
    return a * b;
}
myFunction(10, 2);           // myFunction(10, 2) 返回 20

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>day</title>
</head>
<body>

<p>
全局函数 (myFunction) 返回参数参数相乘的结果：
</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
	return a * b;
}
document.getElementById("demo").innerHTML = myFunction(10, 2); 
</script>

</body>
</html>

2、全局对象

当函数没有被自身的对象调用时 this 的值就会变成全局对象。
在 web 浏览器中全局对象是浏览器窗口（window 对象）。
该实例返回 this 的值是 window 对象:

function myFunction() {
    return this;
}
myFunction();                // 返回 window 对象





<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>day</title>
</head>
<body>

<p>在 HTML 中 <b>this</b> 的值, 在全局函数是一个 window 对象。</p>
<p id="demo"></p>
<script>
function myFunction() {
	return this;
}
document.getElementById("demo").innerHTML = myFunction(); 
</script>

</body>
</html>

3、函数作为对象的方法被调用

创建了一个对象 (myObject), 对象有两个属性 (firstName 和 lastName), 及一个方法 (fullName):

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // 返回 "John Doe"



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>day</title>
</head>
<body>

<p>myObject.fullName() 返回 John Doe:</p>
<p id="demo"></p>
<script>
var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function() {
		return this.firstName + " " + this.lastName;
    }
}
document.getElementById("demo").innerHTML = myObject.fullName(); 
</script>

</body>
</html>

或者：this指的对象本身

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this;
    }
}
myObject.fullName();          // 返回 [object Object] (所有者对象)


这里的this就是指的这个myObject对象，似乎和Java里面是一样的

4、使用构造函数调用函数

// 构造函数:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}
 
// This    creates a new object
var x = new myFunction("John","Doe");
x.firstName;                             // 返回 "John"



这个和Java里面调用成员变量是一样的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>day</title>
</head>
<body>

<p>该实例中， myFunction 是函数构造函数:</p>
<p id="demo"></p>
<script>
function myFunction(arg1, arg2) {
	this.firstName = arg1;
    this.lastName  = arg2;
}
var x = new myFunction("John","Doe")
document.getElementById("demo").innerHTML = x.firstName; 
</script>

</body>
</html>

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

JavaScript 函数有它的属性和方法。

call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。

function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);     // 返回 20

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var myObject;
function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);    // 返回 20
document.getElementById("demo").innerHTML = myObject; 
</script>

</body>
</html>

apply():

function myFunction(a, b) {
    return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);  // 返回 20


<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var myObject, myArray;
function myFunction(a, b) {
    return a * b;
}
myArray = [10, 2]
myObject = myFunction.apply(myObject, myArray);      // 返回 20
document.getElementById("demo").innerHTML = myObject; 
</script>

</body>
</html>

注意:两者的区别在于第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。  

通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。

6、this 是 JavaScript 语言的一个关键字。

它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用，例如：

function test() {
    this.x = 1;
}

随着函数使用场合的不同，this 的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

作为函数方法调用函数时，此函数执行了相当于 java 中静态函数的功能。

var myObject, myArray;
myObject={
    name: "hahaha ",
    hsk: "en"
};
function myFunction(a, b) {
    //alert(this);
    return this.name +this.hsk;
}
myArray = [10, 2]
myObject = myFunction.apply(myObject, myArray);       
document.getElementById("demo").innerHTML = myObject;

7、javascript的闭包：

变量声明时如果不使用 var 关键字，那么它就是一个全局变量，即便它在函数内定义。

函数内嵌：（函数内部就调用了）

function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();    
    return counter; 
}

 自调用函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>day</title>
</head>
<body>

<p>局部变量计数。</p>
<button type="button" onclick="myFunction()">计数!</button>
<p id="demo">0</p>
<script>
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
function myFunction(){
    document.getElementById("demo").innerHTML = add();
}
</script>

</body>
</html>

add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。

这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。

 

 

 

 

 

 

 

 

 

月疯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
笔记之函数篇
qq_51196701的博客
12-27 707
一个C程序可以由一个主函数以及若干个其他的函数组成。 C语言中程序的函数有两种：库函数和自定义函数。 库函数：C语言编译系统提供的一些常用的函数，放在指定的库文件中，用户 使用时需要引用即可。 自定义函数：用户自己编写的函数，使得函数完成用户指定的任务。 函数定义和函数调用： 函数定义也就是别写函数，使它完成特定的任务。 函数必须先定义才能再使用，没有定义过的函数不能使用。 类型标识符用来定义函数类型，也就是指定函数的返回值类型。如果定义函数时省略类型标识符，那么系统会默认这个函数的返
js--函数笔记
zxd的博客
07-05 117
函数：就是就相当于一个大黑盒子，只不过里面存放了好多语句，只有当调用他时，函数才会运行 函数的格式，跟var没什么区别，就是定义一个函数名，然后在大括号里写入多条语句 也可以说是，函数就是特殊的var 1.第一种定义函数的方式 function test() { 代码体 } test(); 所以函数就能相当于一个功能，使用时可以直接调用 函数名的命名规范：小头风原则，多个字母拼接在一起的，第一个单词首字母小写，后面的单词首字母必须大写（这也是开发规范） ...
JS笔记-函数
最新发布
m0_62181310的博客
11-22 529
函数是一个复杂数据类型。可以将重复使用的代码进行封装，实现代码的复用。 使用function关键字声明一个函数。 语法格式：
函数笔记整理
weixin_30872733的博客
05-03 490
一,函数基础 1、函数是什么？ 在学习函数之前，一直遵循面向过程编程，即根据业务逻辑从上到下实现功能，其往往用一长段代码来实现指定功能，开发过程中最常见的操作就是粘贴复制，也就是将之前实现的代码块复制到现需功能处。这样最后的程序会变得特别冗长，有没有什么办法把这些相同的代码块做一些处理？让程序的代码显得简便明朗，这就引出了今天要学习的内容：函数。 定义: 函数是指将一组语句的集合通过一个名字...
JavaScript基础 | 内置函数知识梳理
只想和你一起进步
09-03 1408
此专栏适用于已经入门JavaScript的同学做复习回顾使用
js函数知识点
冷山冷杉的爬坑录
01-23 160
函数知识点* callee arguments.callee 指的是函数自己 function test(){ console.log(arguments.callee) } test() /* 打印出自己 ƒ test(){ console.log(arguments.callee) } */ function test(){ console.log(argume...
JavaScript 入门 新手学习笔记
11-17
这篇"JavaScript入门新手学习笔记"提供了全面的学习资源，适合初学者系统性地掌握这一技术。 笔记可能包含了以下关键知识点： 1. **基础语法**：JS的基础包括变量（var、let、const）、数据类型（如字符串、数字、...
JavaScript继承学习笔记【新手必看】
10-22
在JavaScript中，由于没有传统的类，所以继承不是通过类来实现的，而是通过其他机制，如原型链继承和借用构造函数继承。 ### 一、原型链继承 原型链继承是JavaScript最基础的继承方式，它利用了原型对象的特性。每...
新手 入门到精通 js 笔记 易懂 案例经典
07-03
JavaScript，简称JS，是Web开发中的重要脚本语言，尤其对于新手来说，它是入门网页动态交互的必备技能。本文档是一份新手入门到精通的JS笔记，旨在通过易懂的案例帮助初学者建立扎实的基础。 首先，我们来看一下JS...
JS常用函数（笔记）
04-11
JS常用函数（笔记）
javascript学习笔记整理知识点整理
01-04
这份“javascript学习笔记整理知识点整理”是针对初学者的一份宝贵资料，涵盖了JavaScript的基础知识，旨在帮助新手快速入门并掌握这门语言的核心概念。 一、变量与数据类型 在JavaScript中，变量用于存储数据。...
JavaScript学习总结(七)——JavaScript函数(function)
weixin_34204722的博客
04-22 419
一、函数基本概念 　　为完成某一功能的程序指令(语句)的集合，称为函数。 二、JavaScript函数的分类 　　1、自定义函数(我们自己编写的函数)，如：function funName(){} 　　2、系统函数(JavaScript自带的函数)，如alert函数。 三、函数的调用方式 　　1、普通调用：functionName(实际参数...) 　　2、通过指向函数的变量去调用：...
JavaScript学习笔记-----函数
零雨其蒙
08-31 119
1       函数 1.1    函数的定义和调用 函数定义有以下几种方式： 1.1.1   最普通的定义方式 js 代码       "Content-Type" content="text/html; charset=UTF-8"&gt;             &lt;script language=&lt; sp...
JS——函数（学习笔记）
m0_52704461的博客
08-17 268
JavaScript学习笔记
函数笔记（常数函数、幂函数、指数函数、对数函数、三角函数、反三角函数、复合函数）
热门推荐
chaotiantian的博客
03-20 1万+
常数函数、幂函数、指数函数、对数函数、三角函数和反三角函数统称为基本初等函数 常数函数 幂函数 指数函数 对数函数 三角函数 反三角函数 复合函数
JS笔记五（函数分类）
u011846249的专栏
12-18 160
函数包含一组语句，它们是JS的基础模块单元，用于代码复用、信息隐藏和组合调用。 函数调用方式： 匿名函数立即执行 具名调用 表达式调用 事件调用 &amp;amp;amp;lt;script type=&amp;amp;quot;text/javascript&amp;amp;quot;&amp;amp;amp;gt; /*具名函数调用 如果是使用function关键字进行的函数定义， 那么定义会自动提前 */ f1();
Opencv 常用函数介绍 笔记
Rasin_Wu的博客
04-22 6112
以下程序所涉及函数，涵盖了常用的Opencv函数：#include &lt;opencv2/opencv.hpp&gt; //头文件 using namespace cv; //包含cv命名空间 void main( ) { // 【1】读入一张图片，载入图像 Mat srcImage = imread("1.jpg"); // 【2】显示载入的图片 imshow("【原始图...
JS函数 （自学笔记）
wsdhy_的博客
04-23 344
1.函数的声明 1.1 function命令法 语法： function 函数名(形参1,形参2,..){函数体 } eg: 注意：1）形参可以省略，多个形参之间用逗号隔开，最后一个形参后不加逗号 不加参数 加参数 2）函数调用可以写在声明之前(js在代码执行之前会把函数声明提升到所有代码的最顶部) 定义函数 打印hello world 函数调用在生名之后 运行结果图 函数调用在声明之前 运行结果图 1.2 函数表达式法...
C语言基础函数学习笔记
07-19
C语言关于函数内容的学习笔记，整理的人很全面，看完这个基本就会用c语言的函数了

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值