`
赵彦枝
  • 浏览: 50127 次
  • 性别: Icon_minigender_2
  • 来自: 河北
社区版块
存档分类
最新评论

JavaScript的函数详解

    博客分类:
  • js
 
阅读更多

         函数,在C语言之类的过程式语言中,是顶级的实体,而在Java/C++之类的面向对象的语言中,则被对象包装起来,一般成为对象的方法.在JavaScript中,函数本身与其他任何的内置对象在地位上是没有任何区别的,也就是说函数本身也是对象.总的来说,函数在JavaScript中可以:
              被赋值给一个变量;
              被赋值为对象的属性;
              作为参数被传入别的函数;
              作为函数的结果被返回;
              用字面量来创建.
  一.创建函数
          创建JavaScript函数的一种不常见的方式是通过new操作符来作用于Function"构造器".

var add=new Function("x","y","return(x+y)");
print(add(2,4));
将会打印结果:
6

          参数列表可以有任意的参数,然后紧跟着是函数体,,如果函数体比较复杂,那拼接String需要花费很大的力气,所以JavaScript提供了一种语法糖,即通过字面量来创建函数. 

function add(x,y){
    return x+y;
}或:
var add=function(x,y){
return  x+y;
}

           function关键字会调用Function来new一个对象,并将参数表和函数体准确地传递给Function的构造器.通常来说,在全局作用域内声明一个对象,只不过是对一个属性赋值而已,比如上例中的add函数,事实上只是为全局对象加了一个属性,属性名为add,而属性的值是一个对象,即function(x,y){return x+y}
           函数跟其他的对象一样,都是作为一个独立的对象存在于JavaScript的运行系统,例如:

function p(){
    print("invoke p by ()");
}
p.id="func";
p.type="function";
print(p);
print(p.id+":"+p.type);
print(P());
运行结果如下:
function (){
    print("invoke p by ()");
}
func:function
invoke p by ()
//p函数引用了一个匿名函数(对象),但是同时又可以拥有属性,这些属性不会影响函数本身的功能,完全跟其他对象一样,

 二.函数作用域
       JavaScript中的变量作用域为函数体内有效,而无块作用域.我们在Java函数方法中使用两个for循环时可以使用相同的变量名(如i),而 JavaScript就不可以.JavaScript的函数是在局部作用域内运行的,在局部作用域内运行的函数体可以访问其外层(可能是全局作用域)的变量和函数. JavaScript的作用域为词法作用域,其作用域是在定义时就确定下来的,而非在执行时确定,例如:

var  str="global";
function  scopeTest(){
print(str);
var str="local";
print(str);
}
scopeTest();
运行结果为:
undefined
local

       为什么函数这个时候不去访问外部的str变量呢?因为在词法分析结束后,构造作用域链的时候会将函数内定义的var 变量放入该链,因此在整个函数内部是可见的(从函数的第一行到最后一行),由于str变量本身是未定义的,程序顺序进行,到第一行就会返回未定义.
三.调用对象
        在JavaScript中,在所有函数之外声明的变量为全局变量,而在函数内部声明的变量(通过var关键字)为局部变量.在执行一个函数时,函数的参数和其局部变量会作为调用对象的属性进行存储.同时,解释器会为函数创建一个执行器上下文.与上下文对应的是一个作用域链.作用域链是关于作用域的链,通常实现为一个链表,链表的每个项都是一个对象,即全集对象.对应的,在一个函数中,作用域上会有两个对象,第一个(首先被访问到的)为调用对象,第二个为全局对象.
        当函数需要用到某个变量时,解释器会遍历作用域链,例如:

var  str="global";
function  scopeTest(){
    print(str);
    var str="local";
    print(str);
}

        当解释器进入scopeTest函数的时候,一个调用对象就被创建了,其中包含了str变量作为其中的一个属性并被初始化为underfined,当执行到第一个print(str)时,解释器会在作用域链中查找str,找到之后,打印其值为underfined,然后执行赋值语句,此时调用对象的属性str会被赋值为local,因此第二个print(str)语句会打印local.
四. call和apply
        call和apply通常用来修该函数的上下文,函数中的this指针将被替换为call和apply的第一个参数,例如:

//定义一个人,名字为zhaoyanzhi
var zhaoyanzhi={
name : "zhaoyanzhi",
age : 23,
}
//定义另一个人,名字为zhayanwen
var  zhaoyanwen={
name : "zhaoyanwen",
age : 17
}
//定义一个全局的函数对象
function printName(){
return this.name;
}
//设置printName的上下文为zhaoyanzhi,此时的this为zhaoyanzhi
print(printName.call(zhaoyanzhi));
//设置printName的上下文为zhaoyanwen,此时的this为zhayanwen
print(printName.call(zhayanwen));
print(printName.apply(zhaoyanzhi));
print(printName.apply(zhayanwen));
只有一个参数的时候call和apply的使用方法是一样的,如果有多个参数:
setName.apply(zhaoyanzhi,["yanzhi"])
print(printName.apply(zhaoyanzhi));
setName.call(zhaoyanwen,"yanwen")
得到的结果为:
yanzhi
yanwen
apply的第二个参数为一个函数需要的参数组成的一个数组,而call则需要跟若干个参数,参数之间以逗号
(,)隔开

 五.使用函数

   (1)赋值给一个变量

function add(x,y){
return x+y;
}
var a=0;
a=add; //将函数赋值给一个变量,a的值是一个对象
var b=a(2,3); //调用这个新的函数a
print(b);  //打印的结果为5

   (2)赋值为对象的属性

var obj={
id:"obj1"
}
obj.func=add; //赋值为obj对象的属性
obj.func(2,3); //返回5

    (3)作为参数传递

function adPrint2(str handler){
print(handler(str));
}
//将字符串转换为大写形式,并返回
function  up(str){
return str.toUpperCase();
}
//将字符串转换为小写的形式,并返回
function low(str){
return str.toLowerCase();
}
adPrint2("hello, world", up);
adPrint2("hello,world",low);
运行结果为:
HELLO, WORLD
hello,world

   (4)作为函数的返回值

function currying(){
  return function(){
      print("curring");
}
}

     函数currying返回一个匿名函数,这个匿名函数会打印"curring",简单地调用currying()会得到下面的结果.

function(){
   print("curring");
}

     这个结果本身就是一个匿名函数,如果要掉用currying返回的这个匿名函数,需要这样:

          currying()();

     第一个括号操作,表示调用currying本身,此时返回值为函数,第二个括号操作符调用这个返回值,结果为:

           currying

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    javascript函数详解!

    JavaScript函数详解 JavaScript是一种强大的、基于原型的、动态类型的脚本语言,广泛应用于网页和网络应用开发。在JavaScript中,函数扮演着核心角色,它们不仅可以作为可执行的代码块,还可以作为值进行传递和存储...

    JavaScript函数详解

    JavaScript函数详解涉及的知识点众多,首先,我们了解在传统编程语言中,函数往往局限于作为程序的子程序,需要通过特定关键字定义和调用。而在JavaScript中,函数则被视为一等公民(first-class citizens),这意味...

    第三章JavaScript函数.docx

    【JavaScript函数详解】 JavaScript函数是编程中不可或缺的部分,它们是一段可重复使用的代码,能够实现特定功能。函数分为用户自定义函数和系统函数。系统函数是JavaScript内置的,可以直接使用,而自定义函数则由...

    COM组件中调用JavaScript函数详解及实例

    例如,我们可以创建一个名为`scfDisplayProgress`的JavaScript函数,它接收当前进度、总进度和进度名称,然后更新浏览器的状态栏: ```javascript function scfDisplayProgress(nCurrentProgress, nTotalProgress, ...

    javascript函数

    ### JavaScript函数详解 #### 第一节:函数概述 在JavaScript中,函数占据着核心的地位,它们不仅是执行特定任务的代码块,还具有高度的灵活性和动态性。本节将详细介绍函数的基本概念及其作为对象的独特性质。 #...

    Javascript 函数

    ### JavaScript 函数详解 #### 一、函数的概念与重要性 在编程领域中,函数(Function)是一个不可或缺的概念。在JavaScript中,函数是一段可重用的代码块,用于执行特定的任务。通过定义函数,我们可以封装一系列...

    js的日期函数详解js的日期函数详解

    js的日期函数详解js的日期函数详解js的日期函数详解js的日期函数详解js的日期函数详解js的日期函数详解

    HTML5绘图函数详解

    ### HTML5 Canvas 绘图函数详解 随着HTML5技术的发展,Canvas已经成为网页中进行动态图形渲染的重要工具之一。本文将详细介绍HTML5 Canvas绘图的基本原理及其常用绘图函数的使用方法,帮助读者更好地掌握Canvas绘图...

    javascript回调函数详解参考.docx

    JavaScript中的回调函数是一种重要的编程概念,它涉及到函数作为参数传递以及异步编程的基本原理。回调函数的核心在于,它不是直接被调用,而是被另一个函数在特定时机或事件发生时执行。这种机制使得我们能够在执行...

    HTML+CSS+JavaScript实用详解

    ES6(ECMAScript 6)引入了类、模块、箭头函数等新特性,提升了JavaScript的开发效率和可维护性。 在实际项目中,HTML、CSS和JavaScript通常结合使用,通过分离内容、表现和行为,实现良好的代码组织和可维护性。...

    JavaScript 使用详解下载

    以上只是JavaScript使用详解的一部分内容,实际的学习过程中,还需要深入理解JavaScript的内存管理、性能优化、错误处理以及与最新Web技术(如WebAssembly、Web Components)的结合等。通过不断学习和实践,你将能够...

    JavaScript函数的特性与应用实践深入详解

    本文将详细探讨JavaScript函数的特性与应用实践。 首先,JavaScript函数是一种对象,这使得它们拥有对象的所有属性和方法。函数对象连接到Function.prototype,而这个对象本身又连接到Object.prototype。在创建函数...

    javascript的数组和常用函数详解_.docx

    ### JavaScript的数组与常用函数详解 #### 一、数组基础 **数组定义:** 数组是JavaScript中最基本的数据结构之一,用于存储多个值。数组中的每个元素都有一个索引,索引从0开始。 **特点:** - 数组可以存储任何...

    javascript事件详解

    JavaScript事件详解 JavaScript是一种基于浏览器的脚本语言,它的事件机制是实现动态交互的重要部分。在JavaScript中,事件是用户或浏览器对网页进行操作时触发的特定动作,比如点击按钮、鼠标移动等。本文将详细...

    javascript正则表达式函数用法详解

    javascript正则表达式函数用法详解

    《网页开发手记:HTML+CSS+JavaScript实战详解》

    在《网页开发手记》中,你将学习到JavaScript的基础语法,包括变量、数据类型、运算符、流程控制和函数等。进一步,你将接触到DOM(Document Object Model)操作,通过JavaScript改变网页内容和结构。此外,还会涉及...

    javaScript使用详解.pdf

    JavaScript,是一种广泛应用于Web开发的轻量级编程语言,它主要负责实现客户端的动态...总结,《JavaScript使用详解》这本书将深入讲解这些内容,帮助读者从基础到进阶全面掌握JavaScript,为Web开发打下坚实的基础。

Global site tag (gtag.js) - Google Analytics