js高端系列教程(12)——JavaScript探秘:命名函数表达式
js的类定义函数
js的类定义函数以JS的类定义函数为标题,本文将详细介绍JS中的类定义函数的概念、语法和用法,并通过实例来说明其具体应用。
在JavaScript中,类定义函数是一种用于创建对象的模板,它定义了对象的属性和方法。
通过类定义函数,我们可以方便地创建多个具有相同属性和方法的对象,提高代码的复用性和可维护性。
在JS中,使用关键字class来定义类,后面跟着类名。
类名通常以大写字母开头,符合驼峰命名法。
类定义函数包含一个constructor方法,用于初始化对象的属性。
在constructor方法中,可以通过this关键字引用当前对象的属性。
除了constructor方法,类定义函数还可以定义其他方法,这些方法可以通过类的实例来调用。
在类定义函数中,可以使用关键字static定义静态方法,静态方法可以直接通过类名来调用,而不需要创建类的实例。
下面是一个简单的示例,演示了如何使用类定义函数创建对象:```javascriptclass Person {constructor(name, age) { = name;this.age = age;}sayHello() {console.log(`Hello, my name is ${}.`);}static getAdultAge() {return 18;}}let person1 = new Person("Alice", 20);person1.sayHello();let person2 = new Person("Bob", 25);person2.sayHello();console.log(Person.getAdultAge());```在上面的示例中,我们首先定义了一个Person类,它有两个属性name和age,以及一个方法sayHello。
然后我们通过类的构造函数创建了两个Person对象,分别是person1和person2。
javascript函数的定义和调用
javascript函数的定义和调用JavaScript函数是JavaScript中最重要的概念之一,它是用于创建可重复使用的代码模块的一种形式。
它允许开发人员处理更复杂的算法,同时可以创建更简单、更容易维护的代码。
每个JavaScript 函数都有它自己的定义和调用程序。
定义函数在JavaScript中,函数都是通过关键字“function”定义的。
函数定义可以包括参数、返回值类型和函数体,就像下面这个示例一样:function functionName(parameter1, parameter2) {// Function Body}在上面的代码中,“functionName”是函数的名称,“parameter1”和“parameter2”是函数的参数,而“Function Body”是函数的体,它是函数的主体部分。
函数的参数可以是任何类型的值,可以是字符串、数字、对象等等。
另外,函数的返回值类型可以是任何类型的值,也可以是任何类型的对象。
调用函数在JavaScript中,函数可以通过函数名称和参数列表来调用。
函数调用的语法如下:functionName(parameter1, parameter2,…);上面的代码显示,函数调用使用函数名称和参数列表来调用函数。
在函数调用中,参数列表中的参数值将替换函数定义中的参数,函数将返回定义时指定的返回值。
例如,下面这个示例函数用于计算两个数字之和:function add(num1, num2) {return num1 + num2;}以上函数的调用可以像下面这样:let sum = add(2, 3);在上面的代码中,“add”函数使用“2”和“3”作为参数调用,它将返回5,并将结果保存在“sum”变量中。
JavaScript函数也可以用于定义和调用回调函数,这些回调函数可以在完成异步操作后执行某些操作。
例如,以下示例函数可以定义并调用一个异步函数,该函数将在完成操作后调用回调函数:function doAsyncOperation(callback) {// Perform the asynchronous operation.// Once the operation is complete, call the callback function.callback();}// Define a callback function.function myCallbackFunction() {console.log(The asynchronous operation has completed.);}// Invoke the doAsyncOperation function, passing it the callback function.doAsyncOperation(myCallbackFunction);在上面的代码中,“doAsyncOperation”函数定义了一个异步操作,并将一个回调函数作为参数传入。
JavaScript的命名规范
JavaScript的命名规范JavaScript是一种用于在网页上添加交互功能的脚本语言。
良好的命名规范可以使代码更易读、易维护,并提高团队合作效率。
本文将介绍JavaScript中常用的命名规范。
一、变量和函数命名1. 使用有意义且描述准确的名称。
2. 变量名应该以小写字母开始,使用驼峰命名法来区分单词。
例如:firstName, lastName。
3. 函数名应该以动词开头,使用驼峰命名法。
例如:calculateTotal, getUserInfo。
4. 避免使用单个字符作为变量名,除非用于简单的计数器或迭代变量。
二、常量命名1. 使用全大写字母和下划线来命名常量。
例如:MAX_WIDTH, PI。
2. 将常量的命名与变量和函数的命名方式区分开,可以使用下划线分隔单词。
三、构造函数命名1. 构造函数名应使用大写字母开头,以便区分普通函数。
例如:Car, Employee。
2. 避免使用与内置对象重名的构造函数。
四、文件名命名1. 在文件名中使用有意义的名称来描述文件的内容。
2. 文件名应使用小写字母,多个单词之间使用连字符“-”分隔。
五、类命名1. 类名应该以大写字母开头。
2. 使用驼峰命名法来命名类。
例如:Person, ShoppingCart。
六、枚举命名1. 枚举命名应使用大写字母,多个单词之间使用下划线分隔。
七、模块命名1. 模块命名应该以小写字母开头,使用驼峰命名法。
2. 模块命名应该具有描述性,清晰明了。
八、注释规范1. 使用注释来解释代码的目的、功能和工作原理。
2. 注释应该简洁明了,避免冗余和无用的描述。
3. 在关键的函数和复杂的代码块上添加注释,以提高代码的可读性。
九、缩进和空格1. 使用合适的缩进来分层次显示代码块。
2. 使用空格来增加代码的可读性,并在运算符和逗号后面添加空格。
3. 避免在行尾使用空格,以免引起不必要的错误。
结论:良好的命名规范是编写易读、易维护代码的基础。
js 函数和方法
JavaScript中的特定函数1. 函数的概念和定义函数是一组可重用的语句块,用于执行特定任务或计算结果。
它可以接受参数,执行代码,并返回一个值。
在JavaScript中,函数是一种特殊的对象,可以被调用和传递。
函数的定义有两种方式:a. 函数声明:function functionName(parameter1, parameter 2, ...) {// 函数体// 执行代码的语句块return result;}函数声明以关键字function开始,后跟函数名称和参数列表,参数用括号括起来并用逗号分隔。
函数体包含一组语句块,用于执行代码。
最后,通过关键字return 返回一个可选的结果。
b. 函数表达式:var functionName = function(parameter1, parameter2, ...) {// 函数体// 执行代码的语句块return result;};函数表达式通过将函数字面量赋值给变量来定义函数。
函数表达式可以匿名(没有函数名称)或具名(有函数名称)。
2. 函数的用途函数在编程中起着至关重要的作用,可以提高代码的重用性和可维护性,减少冗余代码,使代码更模块化和可扩展。
以下是函数常见的用途:a. 重复执行一段代码当某个代码块需要多次执行时,可以将其封装在一个函数中,并通过调用该函数来实现代码的重复执行。
b. 封装代码将功能相关的代码段封装在一个函数中,可以提高代码的可读性和可维护性。
通过函数名称可以清楚地表达代码的意图。
c. 参数传递函数可以接受参数,从而使得代码更加灵活和可定制。
参数可以是任何类型,包括基本数据类型和对象。
d. 返回值函数可以通过关键字return返回一个值,该值可以被调用者使用。
返回值可以是任何类型的数据。
3. 函数的工作方式a. 函数调用要执行函数中的代码,需要调用该函数。
函数可以被直接调用或通过变量间接调用(函数表达式)。
// 函数声明方式function greet(name) {console.log('Hello, ' + name + '!');}greet('John'); // 直接调用函数// 函数表达式方式var greet = function(name) {console.log('Hello, ' + name + '!');};greet('John'); // 通过变量间接调用函数b. 传递参数函数可以接受参数,在调用函数时将实际值传递给参数。
Js函数的三种定义方式
Js函数的三种定义⽅式函数的定义⽅式函数声明:必须有名字,会函数提升,在预解析阶段就已经创建,声明前后都可以调⽤//函数声明//定义函数名function fn(){console.log(123);}函数表达式:⼀种变量赋值,函表达式可以没有名字(匿名函数),没有函数提升。
//将函数赋值给⼀个变量,可以是匿名函数var fn = function(){console.log(123);};由于函数声明提升,函数声明定义的函数,其函数名可以在函数声明之前调⽤,⽽函数表达式定义的函数不能,它进⾏的是⼀个变量赋值,本质会进⾏变量声明提升,如果写在前⾯的话,只是定义了⼀个变量,⽽没有赋值,其内部是undefined,⽆法执⾏函数,就会报错。
new Function函数本⾝也是⼀种对象,可以调⽤属性和⽅法//函数声明⽅式//有参数function fun(a,b){var a = 1;console.log(a+b);}function(2,3);//通过构造函数⽅法定义函数var fn = new Function('var a = "1";console.log(a)');fn();//添加参数var fn2 = new Function('a','b','var a = "1";console.log(a+b)');fn2(2,4);这种⽅式其实相当于new Function的括号⾥穿的是⼀堆字符串,解析慢,效率低,易出错。
console.dir(fn2);//new Function()是函数也是⼀种对象,有⾃⼰的属性和⽅法new Function()是函数也是⼀种对象,有⾃⼰的属性和⽅法。
js匿名函数和命名函数
js匿名函数和命名函数JavaScript是一种具有灵活性和互动性的编程语言,它可以帮助我们创建动态和交互式的网页和应用程序。
在JavaScript中,函数是非常重要的概念。
在函数中,我们可以封装一些代码以便以后重复使用,或者我们可以将代码在程序中分成更小的、可管理的部分。
在JavaScript中,有两种类型的函数:匿名函数和命名函数。
1. 匿名函数匿名函数是没有名称的函数。
它们被创建并存储在变量中,通常作为另一个函数的参数传递。
例如,我们可以使用匿名函数来指定JavaScript中的回调函数。
以下是一个使用匿名函数的示例:```setTimeout(function() {alert('Hello, world!');}, 1000);```上面的代码将等待1000毫秒,然后显示一个弹出消息框。
在这里,我们传递了一个匿名函数作为第一个参数,它将在计时器完成后执行。
另一个示例是在DOM事件处理程序中使用匿名函数。
以下是一个用于单击按钮的HTML元素的示例:```<button id="myButton">Click me!</button>```我们将在JavaScript中创建一个事件处理程序,当用户单击按钮时将在控制台中记录一条消息。
我们可以使用匿名函数完成这个任务,如下所示:```var myButton = document.getElementById('myButton');myButton.addEventListener('click', function() {console.log('Button clicked!');});```在这里,我们使用addEventListener方法将匿名函数作为事件处理程序传递给按钮元素。
2. 命名函数命名函数是命名了的函数。
它们是在JavaScript中定义并存储在变量中,以便稍后在程序中使用。
js对函数的说明
js对函数的说明1.函数的定义及特点在JavaScript中,函数可以定义为一组指令及逻辑结构,用于完成特定的任务。
函数一般由关键字function开头,后面紧跟函数名,参数用括号括起来,参数之间用逗号分隔,然后是函数体,最后用return语句返回一个值。
函数的定义形式如下:```javascriptfunction functionName(parameter1, parameter2, …, parameterN){//执行的操作return result;}```其中,functionName是函数名,parameter1、parameter2、…、parameterN是参数,可以为0个或多个,result是返回值,可以为0个或1个。
函数的特点主要有以下几点:- 函数是一段可重复使用的代码块。
通过调用函数可以减少代码冗余,提高代码的可维护性和复用性。
- 函数的执行结果可以用return语句返回,可以作为表达式的值参与运算。
- 函数具有局部作用域,函数内部定义的变量在函数外部是无法访问的,保证了函数的封装性。
- 函数可以作为参数传递给其他函数,也可以作为返回值返回给其他函数,实现函数的组合和复合。
- 函数可以递归调用自己,实现较复杂的计算和算法。
2.函数的调用方式JavaScript中函数的调用方式分为三种:函数调用、方法调用和构造函数调用。
2.1 函数调用函数调用是最基本的调用方式,可以通过函数名直接调用函数。
函数调用语法如下:```javascriptfunctionName(argument1, argument2, …, argumentN);```其中,argument1、argument2、…、argumentN是实参,传入函数内部的参数值。
下面是一个简单的例子:```javascriptfunction add(a, b) {return a + b;}var result = add(1, 2);```add函数接收两个参数a和b,返回两个参数相加的结果。
js定义函数的几种方法
js定义函数的几种方法在JavaScript中,定义函数的方法有很多。
比如函数声明,函数表达式,构造函数,bind,call 和 apply等。
首先,函数声明是一种定义函数的最常见的方式。
它的基本语法是使用关键词 function 关键字定义函数名和参数,然后使用大括号将函数体包裹起来,最后使用分号结束声明。
例如:```javascriptfunction helloWorld(str){console.log(str);}helloWorld('Hello World!'); // 输出 'Hello World!'```其次,Function表达式会创建一个函数并赋值给相应的变量。
它的语法一样,我们可以使用函数名,参数,函数体和分号结束,但它可以定义在脚本中的任何位置,甚至是其他函数中。
例如:```javascriptlet helloWorld = function(str){console.log(str);};helloWorld('Hello World!'); // 输出 'Hello World!'```第三,使用构造函数创建函数的方法可能有点不同。
使用 Function 构造函数可以编写不同的参数和函数体。
例如:```javascriptlet helloWorld = new Function('str','console.log(str);');helloWorld('Hello World!'); // 输出 'Hello World!'```第四,bind() 函数在函数创建时就被调用,用于绑定函数的上下文环境,也就是 this 关键字的指向。
例如:```javascriptlet person = {name: 'John Doe',helloWorld: function(str){console.log(str + ' ' + );}}let useBind = person.helloWorld.bind(person); useBind('Hello World!'); // 输出 'Hello World! John Doe'```最后是 call 和 apply。
js函数声明函数表达式
js函数声明函数表达式在JavaScript中,我们可以使用函数声明和函数表达式来创建函数。
首先,让我们来看一下函数声明。
函数声明是使用关键字function来定义的,后面跟着函数名和函数体。
例如:javascript.function myFunction() {。
// 函数体。
console.log("这是一个函数声明");}。
在上面的例子中,myFunction就是函数名,函数体内的代码会在调用函数时执行。
另一种创建函数的方式是函数表达式。
函数表达式是将一个匿名函数赋值给一个变量或常量。
例如:javascript.var myFunction = function() {。
// 函数体。
console.log("这是一个函数表达式");};在这个例子中,我们将一个匿名函数赋值给了变量myFunction。
需要注意的是,函数表达式末尾的分号是必需的。
函数声明和函数表达式在语法和使用上有一些区别。
函数声明会被提升(hoisted),这意味着可以在函数声明之前调用函数。
而函数表达式必须在赋值后才能调用。
另外,函数表达式还可以用作回调函数、立即执行函数等。
例如:javascript.setTimeout(function() {。
console.log("这是一个回调函数");}, 1000);在上面的例子中,我们将一个匿名函数作为回调函数传递给setTimeout函数。
总的来说,函数声明和函数表达式都是创建函数的有效方式,但它们在语法和使用上有一些区别,开发者可以根据实际需求选择合适的方式来定义函数。
javascript eslint命名规则
javascript eslint命名规则
JavaScript ESLint命名规则主要有以下几点:
- 变量命名:变量应该使用驼峰式写法,单词之间用下划线_分隔,如`myVariableName`。
变量名应该尽量简洁明了,使用完整的单词而不是缩写,避免使用类似`a`、`b`这样的单个字母作为变量名。
- 函数命名:函数名应该使用动词+名词的形式,描述函数的操作和功能。
例如,`getUserById`表示获取某个用户的详细信息。
- 常量命名:常量名应该全部使用大写字母,单词之间用下划线_分隔,如`MAX_VALUE`。
常量名应该尽量描述清楚其含义,如`MAX_ATTEMPTS`表示最大尝试次数。
- 类命名:类名应该使用驼峰式写法,单词之间用下划线_分隔,如`MyClassName`。
类名应该尽量描述类的主要功能或职责。
这些命名规则可以帮助代码更加易读、易理解,并且符合行业标准。
此外,ESLint还支持自定义命名规则,你可以根据团队的开发规范和个人喜好进行配置。
js函数名称命名规则
js函数名称命名规则JavaScript(简称JS)函数名称的命名规则是一项非常重要的技能,可以使你的代码更加清晰易读,避免出现冲突和错误。
下面,我们将详细介绍JavaScript函数名称的命名规则。
1. 使用有意义的名称函数名称应该能够清楚地表示函数的作用。
建议使用具有实际含义的单词或单词组合作为函数名称,这样可以让代码更加易于理解。
例如,getMessage()就比getMessageFromServer()更好,因为后者就暗示了函数从某处获取了消息,但不清楚是从何处获取。
2. 避免与关键字冲突JavaScript关键字是指语言本身已经定义的名称,这些名称具有特殊的含义,在编程中是不能使用的。
因此,在命名函数时应避免使用这些关键字作为名称。
3. 使用驼峰命名法函数名称应该使用驼峰命名法,即每个单词的首字母大写,除了第一个单词以外。
例如,getUserName()而不是GetUserName()或get_user_name()。
4. 函数名称大小写需要区分JavaScript是一种区分大小写的语言,因此函数名称的大小写需要精确匹配。
这意味着在其他代码中引用函数时,大小写必须完全匹配。
例如,如果函数名称为getUser(),则getUser()和GetUser()是两个不同的函数。
5. 使用动词作为前缀使用动词作为前缀可以使函数名称更加规范化。
例如,使用get、set、add或delete标识函数的作用。
这使得代码更加易于理解和组织。
6. 函数名可以包含下划线虽然驼峰命名法是最常见的,但函数名称也可以包含下划线。
例如,get_user_name()。
不过,需要注意的是,不要在函数名称的开头或结尾使用下划线。
总结JavaScript函数名称的命名规则是一个重要的开发技能,需要注意以下几点:1. 使用有意义的名称;2. 避免与关键字冲突;3. 使用驼峰命名法;4. 函数名称大小写需要区分;5. 使用动词作为前缀;6. 函数名可以包含下划线。
js 命名参数
js 命名参数JS命名参数前言在JavaScript中,函数是非常重要的。
我们可以通过函数来封装代码,使其更加模块化和可重用。
而在函数的参数方面,JavaScript有一个很好的特性——命名参数。
什么是命名参数?如果你曾经使用过其他编程语言(如Python),你可能已经熟悉了这个概念。
简单来说,命名参数就是指可以按照名称来传递参数的一种方式。
在JavaScript中,通常情况下我们都是按照位置来传递参数的。
例如:```javascriptfunction add(a, b) {return a + b;}add(1, 2); // 3```但是,当我们需要传递多个参数时,位置很容易混淆。
例如:```javascriptfunction createUser(name, age, gender, email) {// ...}createUser('John',25,'male','****************');```这样写虽然没有问题,但是当我们看到这个函数调用时,很难一眼看出每个参数代表什么意思。
这就是命名参数出现的原因——通过给每个参数一个名称来使代码更加清晰易懂。
如何使用命名参数?在JavaScript中,并没有原生支持命名参数的语法。
但是我们可以通过对象解构或者ES6的默认值语法来实现类似于命名参数的效果。
方法一:对象解构对象解构是一种从对象中提取属性值的方法。
我们可以将函数的参数定义为一个对象,然后在调用函数时传递一个包含参数名称和对应值的对象。
例如:```javascriptfunction createUser({ name, age, gender, email }) {// ...}createUser({ name: 'John', age: 25, gender: 'male', email:'****************'});```这样写虽然看起来有些冗长,但是当我们需要传递多个参数时,代码会更加清晰易懂。
JavaScript函数表达式
JavaScript函数表达式⼀、序定义函数的⽅式有两种:⼀种是函数声明,另⼀种就是函数表达式;1.1 函数声明function functionName(arg){//函数体}关于函数声明,它有⼀个重要特征就是函数声明提升,意思就是在执⾏代码之前会先读取函数声明。
这就意味着可以把函数放在调⽤它的语句后⾯。
如下所⽰:helloworld(); //在代码执⾏之前会先读取函数声明function helloworld(){console.log("hello world");}1.2 函数表达式var functionName=function(arg){//函数体}这种形式看起来好像是常规的变量赋值语句,即创建⼀个函数并将它赋值给变量functionName。
这种情况下创建的函数叫做匿名函数。
因为function关键字后⾯没有标识符。
函数表达式与其他表达式⼀样,在使⽤之前必须先赋值;如下⾯代码就会导致错误;helloworld(); //错误,还未赋值,函数不存在var helloworld=function(){console.log("hello world");}有了函数表达式,我们就可以动态给函数表达式赋值了;如下⾯代码:var helloworld; //声明if(condition){ //条件helloworld=function(){ //赋值console.log("hello world");}}else{helloworld=function(){ //赋值console.log("你好,世界");}}⼆、递归函数递归函数是在⼀个函数通过名字调⽤⾃⾝的情况下构成的(和C#等语⾔⼀样,所以程序的核⼼思想是差不多,只是在语法上有些差异,学好⼀门语⾔的基础,学习其他就会轻松很多),举个经典的递归⾯试题,⼀列数的规则如下 : 1 、 1 、 2 、 3 、 5 、 8 、 13 、 21 、34…… 求第 30 位数是多少,⽤递归算法实现,代码如下所⽰:function foo(n) {if (n <= 0)return 0;else if (n > 0 && n <= 2)return 1;elsereturn foo(n - 1) + foo(n - 2);}虽然这个函数表明看来没有什么问题,但下⾯的代码却可能导致它出错:var foo1 = foo;foo = null;console.log(foo1(34));以上代码先把foo()函数保存在变量foo1中,然后将foo变量设为null,结果指向原始函数的引⽤只剩下⼀个。
JavaScript常见变量和函数命名示例
JavaScript常见变量和函数命名示例JavaScript作为前端开发从业人员必须掌握的3大基础知识中最重要的一环,也是平是接触时间最长、写得最多的。
在开发过程中必然会遇到命名的问题,你会词穷、纠结、惆怅吗?本文的出现相信能够解决大部分烦恼,让你轻松写出符合规范、易读、简短的代码。
本文将通过大量的实例来试图自圆其说,形成一套系统化、实用的变量命名理化体系。
通过按JavaScript的数据类型分类着手、细到一个函数的参数命名,并提供众多可选方案,并尽量给出其适用范围和利弊。
JavaScript常见变量和函数命名示例思维导图需要注意的是由于个人写作水平、和知识有限,很多方面叙述上有些生硬,在分类上也没有什么特别的依据,文章也没有人审稿,所以有什么纰漏还请留言告知。
由于写作仓促,内容可能不全,后续会随着工作和学习的深入而不断地调整和更新。
布尔值(Boolean)命名Boolean值是两种逻辑状态的变量,它包含两个值:真和假。
在JavaScript中对应 true 和 false,在实践中通常使用数字1表示真值,0来表示假值。
虽然Boolean的状态只有两种但是在命名时可以进一步分类,这里给出几种场景:场景一:表示可见性、进行中的状态解释:可见性在通常指页面中的元素、组件是否显示(或者组件挂载到DOM上,但并不可见)。
进行中主要是说明某种状态是处于持续进行中。
推荐命名方式为 is + 动词(现在进行时)/形容词,同时这种方式也可以直接不写 is,但是为了更好的作区分,建议还是加上。
{isShow: '是否显示',isVisible: '是否可见',isLoading: '是否处于加载中',isConnecting: '是否处于连接中',isValidating: '正在验证中',isRunning: '正在运行中',isListening: '正在监听中'}注意:在Java中使用这种方式是有一定副作用的,为什么请移步:为什么阿里巴巴禁止开发人员使用“isSuccess” 作为变量名?场景二:属性状态类解释:通常用来描述实体(例如:HTML标签、组件、对象)的功能属性,而且定法比较固定。
JavaScript 函数表达式
JavaScript 函数表达式JavaScript中创建函数主要有两种方法:函数声明和函数表达式。
这两种方式都有不同的适用场景。
这篇笔记主要关注的是函数表达式的几大特点以及它的使用场景,下面一一描述。
主要特点可选的函数名称函数名称是函数声明的必需组成部分,这个函数名称相当于一个变量,新定义的函数会复制给这个变量,以后函数的调用都需要通过这个变量进行。
而对于函数表达式来说,函数的名称是可选的,例如下面的例子:var sub = function(a1,a2){ return a1-a2; }这个例子中函数表达式没有名称,属于匿名函数表达式。
再看下面的例子:var sub = function f(a1,a2){ return a1-a2; } console.log(f(5,3)); //错误调用方式 console.log(sub(5,3)); //正确调用方式在这个例子中,函数表达式的名称为f,这个名称f实际上变成了函数内部的一个局部变量,并且指代函数对象本身,在函数递归的时候有很大用处,后面会详细讲到。
在执行阶段创建(区别于函数声明)这个特点是函数表达式明显区别于函数声明的地方。
解释器在解析JavaScript代码时对于这两种方式并不是一视同仁的。
解释器会首先读取函数声明,并使其在执行任何代码之前可用;而对于函数表达式,则必须等到解释器执行到它所在的代码行,才会被真正解析执行。
例如:console.log(add(1,2)); //"3" console.log(sub(5,3));//"unexpected identifier",报错 function add(a1,a2){ return a1+a2; } var sub = function(a1,a2){ return a1-a2; }第一条语句完全可以正常执行。
对代码求值时,JavaScript引擎在第一遍就会声明函数并通过一个名为函数声明提升的过程将它们放到源代码树的顶部。
JavaScript函数的高级用法
JavaScript函数的⾼级⽤法1.函数的定义和调⽤1.1函数的定义⽅式1. ⽅式1 函数声明⽅式 function 关键字 (命名函数)function fn(){}2. ⽅式2 函数表达式(匿名函数)var fn = function(){}3. ⽅式3 new Function()var f = new Function('a', 'b', 'console.log(a + b)');f(1, 2);var fn = new Function('参数1','参数2'..., '函数体')注意/*Function ⾥⾯参数都必须是字符串格式第三种⽅式执⾏效率低,也不⽅便书写,因此较少使⽤所有函数都是 Function 的实例(对象)函数也属于对象*/1.2函数的调⽤/* 1. 普通函数 */function fn() {console.log('⼈⽣的巅峰');}fn();/* 2. 对象的⽅法 */var o = {sayHi: function() {console.log('⼈⽣的巅峰');}}o.sayHi();/* 3. 构造函数*/function Star() {};new Star();/* 4. 绑定事件函数*/btn.onclick = function() {}; // 点击了按钮就可以调⽤这个函数/* 5. 定时器函数*/setInterval(function() {}, 1000); 这个函数是定时器⾃动1秒钟调⽤⼀次/* 6. ⽴即执⾏函数(⾃调⽤函数)*/(function() {console.log('⼈⽣的巅峰');})();2.this2.1函数内部的this指向这些 this 的指向,是当我们调⽤函数的时候确定的。
javascript函数(声明,传参,返回值,递归)
javascript函数(声明,传参,返回值,递归)javascript函数(声明,传参,返回值,递归)1、函数的基本概念函数:是由事件驱动的或者当他被调⽤时可执⾏的可重复使⽤的代码块。
空调是由遥控器控制或者当开关打开时,可运⾏的家⽤电器(⼯具)特点:封装代码----使代码更简洁重复使⽤---在重复功能的时候直接调⽤就好执⾏时机---随时可以在我们想要执⾏的时候执⾏2、函数的创建和执⾏1. 函数的创建1、声明式函数声明的关键字 : functionfunction 关键字和 var 关键字的⾏为⼏乎⼀致,都会在内存上开辟⼀块空间,⽤来存储变量之中的数据;function 函数名( 条件 ){代码}规定 : 必须执⾏,不执⾏就报错;规范 : 最好执⾏,不执⾏也不会报错,但是会让程序有⼀些负⾯影响。
函数定义的规范: 函数名的⾸字母⼩写!函数的命名规则和变量命名规则完全⼀致;函数推荐驼峰命名;变量推荐_命名;function foo(){console.log("hello world");}函数定义了,会吧代码默默的放在哪⾥不会去执⾏代码;只要在程序主动调⽤的时候,代码才会执⾏!;声明式-规定 : 不要漏掉函数的名字!;2、赋值式函数也是数据类型的⼀种;基本类型 : 五种;引⽤类型 : 三种 => function(){}(其中⼀种)我们可以认为函数是⼀种数据;赋值式函数声明可以没有函数名!;其实就是和我们使⽤ var 关键字是⼀个道理了⾸先使⽤ var 定义⼀个变量,把⼀个函数当作值直接赋值给这个变量就可以了var foo = function(){console.log("hello world");}函数定义和调⽤规范 : 先声明再调⽤!;var foo = function poo(){console.log("hello world");// 只有在这个函数⾥⾯才会使⽤;}// poo 是⽆法被调⽤ , 因为他的作⽤范围是局部的;2. 函数的执⾏1. 直接执⾏2. 通过⾏为执⾏函数调⽤的两种形式:1. 你在代码之中调⽤;直接写函数名() 就可以了function foo(){console.log("hello world");}foo();注意:定义完⼀个函数以后,如果没有函数调⽤,那么写在 {} ⾥⾯的代码没有意义,只有调⽤以后才会执⾏2. 浏览器在特定时机帮你调⽤函数!;事件⾏为;html标签进⾏触发 => 浏览器接受 => 浏览器调⽤函数;<button id="btn">你点我⼀下试试</button>function foo(){console.log("hello world");}btn.onclick = foo// console.log(btn);// 在点击的时候会让浏览器调⽤对应的函数;// btn 就是元素的id;// onclick 是事件⾏为;3、函数的参数(重点)我们在定义函数和调⽤函数的时候都出现过 ()现在我们就来说⼀下这个 () 的作⽤就是⽤来放参数的位置参数分为两种⾏参和实参// 声明式function fn(⾏参) {// ⼀段代码}fn(实参)// 赋值式函数var fn = function (⾏参) {// ⼀段代码}fn(实参)接收:形参就是在函数内部可以使⽤的变量,在函数外部不能使⽤每写⼀个单词,就相当于在函数内部定义了⼀个可以使⽤的变量(遵循变量名的命名规则和命名规范)多个单词(形参)之间以 , 分隔// 书写⼀个参数// 声明式function fn(num) {// 在函数内部就可以使⽤ num 这个变量}// 赋值式var fn1 = function (num) {// 在函数内部就可以使⽤ num 这个变量}// 书写两个参数// 声明式function fun(num1, num2) {// 在函数内部就可以使⽤ num1 和 num2这两个变量}// 赋值式var fun1 = function (num1, num2) {// 在函数内部就可以使⽤ num1 和 num2 这两个变量}如果只有⾏参的话,那么在函数内部使⽤的值个变量是没有值的,也就是 undefined⾏参的值是在函数调⽤的时候由实参决定的发送:实参在函数调⽤的时候给⾏参赋值的也就是说,在调⽤的时候是给⼀个实际的内容的function fn(num) {// 函数内部可以使⽤ num}fn(100)// 这个函数的本次调⽤,书写的实参是 100// 那么本次调⽤的时候函数内部的 num 就是 100fn(200)// 这个函数的本次调⽤,书写的实参是 200// 那么本次调⽤的时候函数内部的 num 就是 200函数内部的⾏参的值,由函数调⽤的时候传递的实参决定多个参数的时候,是按照顺序⼀⼀对应的function fn(num1, num2) {// 函数内部可以使⽤ num1 和 num2}fn(100, 200)// 函数本次调⽤的时候,书写的参数是 100 和 200// 那么本次调⽤的时候,函数内部的 num1 就是 100,num2 就是 200多个参数的关系原则上来说,形参和实参的数量应该⼀⼀对应但,如果,⼆者数量不⼀致:形参多,实参少:多出来的形参为undefined实参多,形参少:多出来的实参找argumentsarguments是⼀个在函数内部才能使⽤的,⽤来保存当前函数所有实参的类数组,也叫对象可以通过索引和长度来解析arguments形参⽐实参多 :// 参数多了怎么办 ?// 形参 : 变量 => 函数体之中;// 实参数量⽐形参数量少; 其余未赋值的形参值都为 undefined;function foo( a , b , c , d ){console.log( a , b , c , d );}foo( 1 );实参⽐形参多 :剩下的实参都哪⾥去了 ?剩下的参数都使⽤arguments关键字进⾏接收, 使⽤ [] 进⾏取出;function foo( a ){// console.log(a);// 函数之中有⼀个关键字 : arguments => 接受所有的实际参数;// arguments ⾥⾯可以存很多很多的数据;// console.log( arguments );// 想要取出复杂结构之中的数据 : 取出运算符 => .// arguments.0// Uncaught SyntaxError: Unexpected number// 语法报错 : 不允许使⽤数字;// JS之中的取出运算符 => .纯英⽂// => [] ⾥⾯可以放任何数据;// document.write() === document["write"]()console.log(arguments[2]);}foo( 1 , 2 , 3 , 4 , 5 , 6 , 7 );4、函数的返回值-return(重点)将函数执⾏处理的数据,返回出来,便于其他程序或⽤户调⽤或做⼆次使⽤关键字 : return => 函数体内使⽤;function foo(){return "hello world";}console.log(foo());// = > "hello world"return的特性在函数之中,只要遇到了return关键字,表⽰函数执⾏结束,会⽴即跳出函数执⾏。
javascript获取函数名称、函数参数、对象属性名称的代码实例
javascript获取函数名称、函数参数、对象属性名称的代码实例在js权威指南中看到的⼀个⽅法:Function.prototype.getName = function(){return || this.toString().match(/function\s*([^(]*)\(/)[1]}如果当前函数是有名函数,则返回其名字,如果是匿名函数则返回被赋值的函数变量名,如果是闭包中匿名函数则返回“anonymous”。
复制代码代码如下:var getFnName = function(callee){var _callee = callee.toString().replace(/[\s\?]*/g,""),comb = _callee.length >= 50 ? 50 :_callee.length;_callee = _callee.substring(0,comb);var name = _callee.match(/^function([^\(]+?)\(/);if(name && name[1]){return name[1];}var caller = callee.caller,_caller = caller.toString().replace(/[\s\?]*/g,"");var last = _caller.indexOf(_callee),str = _caller.substring(last-30,last);name = str.match(/var([^\=]+?)\=/);if(name && name[1]){return name[1];}return "anonymous"};使⽤:在要调查的函数内部执⾏此函数,传⼊⼀个参数,为arguments.callee。
JavaScript预解析:同名变量和函数、同名函数表达式和同名函数声明
JavaScript预解析:同名变量和函数、同名函数表达式和同名函数声明预解析的含义:在写js代码调⽤函数的时候,⽆论你是在调⽤位置的前⾯或者后⾯声明函数,都可以正常调⽤,原因是,JavaScript碰到script标签,会将var变量(注意是var)声明和函数声明(注意是声明)提升到当前作⽤域最前⾯。
预解析结论:变量的提升,指的是声明的提升,赋值(初始化)并不会提升看⼀些例⼦:例1://例1console.log(num);var num = 2;//上述代码:解析过程var num; //第⼀步:预解析//执⾏过程console.log(num); //第⼆步:打印结果-->undefinednum = 2; //第三步:赋值说明:变量声明提升,赋值不提升例2://例2:var num = 2;var num;console.log(num);//上述代码:解析过程var num; //第⼀步:预解析var num; //第⼆步:预解析num = 2; //第三步:赋值console.log(num); //第四步:打印结果-->2结果不是undefined?因为var 变量是会提升的,提前预解析了,然后⼜赋值了,所以结果为2。
扩展-1://扩展-1function f() {}var f;console.log(f);//上述代码:解析过程function f() {} //第⼀步:预解析整个函数var f; //第⼆步:预解析console.log(f); //第三步:打印结果-->function f() {}按理说,这⾥应该是undefined,结果不是原因:预解析时,当变量和函数同名时,优先留下函数的值(不管谁前或后,函数优先级更⾼)扩展-2://扩展-2function f() {console.log(num); // undefined}var num;这⾥函数⾥⾯能访问到num,证明变量的声明会在函数声明之前这个问题是个⼈的理解,有疑问的读者也可以去查些资料。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
函数表达式在实际应用中还是很常见的,在web开发中友个常用的模式是基于对某种特性的测试来伪装函数定义,从而达到性能优化的目的,
但由于这种方式都是在同一作用域内,所以基本上一定要用函数表达式://该代码来自Garrett Smith的APE Javascript library库(/ape/)
var contains = (function() {
var docEl = document.documentElement;
if (typeof pareDocumentPosition != 'undefined') {
return function(el, b) {
return (pareDocumentPosition(b) & 16) !== 0;
};
}
else if (typeof docEl.contains != 'undefined') {
return function(el, b) {
return el !== b && el.contains(b);
};
}
return function(el, b) {
if (el === b) return false;
while (el != b && (b = b.parentNode) != null);
return el === b;
};
})();
提到命名函数表达式,理所当然,就是它得有名字,前面的例子var bar = function foo(){};就是一个有效的命名函数表达式,但有一点需要记住:这个名字只在新定义的函数作用域内有效,因为规范规定了标示符不能
在外围的作用域内有效:
var f = function foo(){
return typeof foo; // foo是在内部作用域内有效
};
// foo在外部用于是不可见的
typeof foo; // "undefined"
f(); // "function"
既然,这么要求,那命名函数表达式到底有啥用啊?为啥要取名?
正如我们开头所说:给它一个名字就是可以让调试过程更方便,因为在
调试的时候,如果在调用栈中的每个项都有自己的名字来描述,那么调
试过程就太爽了,感受不一样嘛。