`
icedcoco
  • 浏览: 38696 次
社区版块
存档分类
最新评论

学习JavaScript 的必备 (一),让您对js的 function, javascript内置对象,this概念及之间的关系不再迷惑。(

    博客分类:
  • EXT
阅读更多
-------------------该文摘自于匿名教程总结,希望对初学js的同学有帮助,因为它解决了我学习js的众多迷惑。。。


函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解。

  javascript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的。通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递。在继续讲述之前,先看一下函数的使用语法:

以下是引用片段:
function func1(…){…} 
var func2=function(…){…}; 
var func3=function func4(…){…}; 
var func5=new Function();  


  这些都是声明函数的正确语法。它们和其他语言中常见的函数或之前介绍的函数定义方式有着很大的区别。那么在JavaScript中为什么能这么写?它所遵循的语法是什么呢?下面将介绍这些内容。


  认识函数对象(Function Object)

  可以用function关键字定义一个函数,并为每个函数指定一个函数名,通过函数名来进行调用。在JavaScript解释执行时,函数都是被维护为一个对象,这就是要介绍的函数对象(Function Object)。

  函数对象与其他用户所定义的对象有着本质的区别,这一类对象被称之为内部对象,例如日期对象(Date)、数组对象(Array)、字符串对象(String)都属于内部对象。这些内置对象的构造器是由JavaScript本身所定义的:通过执行new Array()这样的语句返回一个对象,JavaScript内部有一套机制来初始化返回的对象,而不是由用户来指定对象的构造方式。

  在JavaScript中,函数对象对应的类型是Function,正如数组对象对应的类型是Array,日期对象对应的类型是Date一样,可以通过new Function()来创建一个函数对象,也可以通过function关键字来创建一个对象。为了便于理解,我们比较函数对象的创建和数组对象的创建。先看数组对象:下面两行代码都是创建一个数组对象myArray:

以下是引用片段:
var myArray=[]; 
//等价于 
var myArray=new Array(); 
同样,下面的两段代码也都是创建一个函数myFunction: 
function myFunction(a,b){ 
  return a+b; 

//等价于 
var myFunction=new Function("a","b","return a+b");  


  通过和构造数组对象语句的比较,可以清楚的看到函数对象本质,前面介绍的函数声明是上述代码的第一种方式,而在解释器内部,当遇到这种语法时,就会自动构造一个Function对象,将函数作为一个内部的对象来存储和运行。从这里也可以看到,一个函数对象名称(函数变量)和一个普通变量名称具有同样的规范,都可以通过变量名来引用这个变量,但是函数变量名后面可以跟上括号和参数列表来进行函数调用。

  用new Function()的形式来创建一个函数不常见,因为一个函数体通常会有多条语句,如果将它们以一个字符串的形式作为参数传递,代码的可读性差。下面介绍一下其使用语法:

以下是引用片段:
var funcName=new Function(p1,p2,...,pn,body); 

  参数的类型都是字符串,p1到pn表示所创建函数的参数名称列表,body表示所创建函数的函数体语句,funcName就是所创建函数的名称。可以不指定任何参数创建一个空函数,不指定funcName创建一个无名函数,当然那样的函数没有任何意义。

  需要注意的是,p1到pn是参数名称的列表,即p1不仅能代表一个参数,它也可以是一个逗号隔开的参数列表,例如下面的定义是等价的:

以下是引用片段:
new Function("a", "b", "c", "return a+b+c") 
new Function("a, b, c", "return a+b+c") 
new Function("a,b", "c", "return a+b+c") 

  JavaScript引入Function类型并提供new Function()这样的语法是因为函数对象添加属性和方法就必须借助于Function这个类型。

  函数的本质是一个内部对象,由JavaScript解释器决定其运行方式。通过上述代码创建的函数,在程序中可以使用函数名进行调用。本节开头列出的函数定义问题也得到了解释。注意可直接在函数声明后面加上括号就表示创建完成后立即进行函数调用,例如:

以下是引用片段:
var i=function (a,b){ 
  return a+b; 
}(1,2); 
alert(i);  


  这段代码会显示变量i的值等于3。i是表示返回的值,而不是创建的函数,因为括号“(”比等号“=”有更高的优先级。这样的代码可能并不常用,但当用户想在很长的代码段中进行模块化设计或者想避免命名冲突,这是一个不错的解决办法。




  需要注意的是,尽管下面两种创建函数的方法是等价的:

以下是引用片段:
function funcName(){ 
  //函数体 

//等价于 
var funcName=function(){ 
  //函数体 
}  

  但前面一种方式创建的是有名函数,而后面是创建了一个无名函数,只是让一个变量指向了这个无名函数。在使用上仅有一点区别,就是:对于有名函数,它可以出现在调用之后再定义;而对于无名函数,它必须是在调用之前就已经定义。例如:

以下是引用片段:
<script language="JavaScript" type="text/javascript"> 
<!-- 
func(); 
var func=function(){ 
  alert(1) 

//--> 
</script>  

  这段语句将产生func未定义的错误,而:

以下是引用片段:
<script language="JavaScript" type="text/javascript"> 
<!-- 
func(); 
function func(){ 
  alert(1) 

//--> 
</script>  

  则能够正确执行,下面的语句也能正确执行:

以下是引用片段:
<script language="JavaScript" type="text/javascript"> 
<!-- 
func(); 
var someFunc=function func(){ 
  alert(1) 

//--> 
</script>  

  由此可见,尽管JavaScript是一门解释型的语言,但它会在函数调用时,检查整个代码中是否存在相应的函数定义,这个函数名只有是通过function funcName()形式定义的才会有效,而不能是匿名函数。



  函数对象和其他内部对象的关系 


  除了函数对象,还有很多内部对象,比如:Object、Array、Date、RegExp、Math、Error。这些名称实际上表示一个类型,可以通过new操作符返回一个对象。然而函数对象和其他对象不同,当用typeof得到一个函数对象的类型时,它仍然会返回字符串“function”,而typeof一个数组对象或其他的对象时,它会返回字符串“object”。下面的代码示例了typeof不同类型的情况:

以下是引用片段:
alert(typeof(Function))); 
alert(typeof(new Function())); 
alert(typeof(Array)); 
alert(typeof(Object)); 
alert(typeof(new Array())); 
alert(typeof(new Date())); 
alert(typeof(new Object()));  


  运行这段代码可以发现:前面4条语句都会显示“function”,而后面3条语句则显示“object”,可见new一个function实际上是返回一个函数。这与其他的对象有很大的不同。其他的类型Array、Object等都会通过new操作符返回一个普通对象。尽管函数本身也是一个对象,但它与普通的对象还是有区别的,因为它同时也是对象构造器,也就是说,可以new一个函数来返回一个对象,这在前面已经介绍。所有typeof返回“function”的对象都是函数对象。也称这样的对象为构造器(constructor),因而,所有的构造器都是对象,但不是所有的对象都是构造器。

  既然函数本身也是一个对象,它们的类型是function,联想到C++、Java等面向对象语言的类定义,可以猜测到Function类型的作用所在,那就是可以给函数对象本身定义一些方法和属性,借助于函数的prototype对象,可以很方便地修改和扩充Function类型的定义,例如下面扩展了函数类型Function,为其增加了method1方法,作用是弹出对话框显示"function":

以下是引用片段:
Function.prototype.method1=function(){ 
  alert("function"); 

function func1(a,b,c){ 
  return a+b+c; 

func1.method1(); 
func1.method1.method1();  


  注意最后一个语句:func1.method1.mehotd1(),它调用了method1这个函数对象的method1方法。虽然看上去有点容易混淆,但仔细观察一下语法还是很明确的:这是一个递归的定义。因为method1本身也是一个函数,所以它同样具有函数对象的属性和方法,所有对Function类型的方法扩充都具有这样的递归性质。

  Function是所有函数对象的基础,而Object则是所有对象(包括函数对象)的基础。在JavaScript中,任何一个对象都是Object的实例,因此,可以修改Object这个类型来让所有的对象具有一些通用的属性和方法,修改Object类型是通过prototype来完成的:

以下是引用片段:
Object.prototype.getType=function(){ 
  return typeof(this); 

var array1=new Array(); 
function func1(a,b){ 
  return a+b; 

alert(array1.getType()); 
alert(func1.getType());  


  上面的代码为所有的对象添加了getType方法,作用是返回该对象的类型。两条alert语句分别会显示“object”和“function”。


  将函数作为参数传递

  在前面已经介绍了函数对象本质,每个函数都被表示为一个特殊的对象,可以方便的将其赋值给一个变量,再通过这个变量名进行函数调用。作为一个变量,它可以以参数的形式传递给另一个函数,这在前面介绍JavaScript事件处理机制中已经看到过这样的用法,例如下面的程序将func1作为参数传递给func2:

以下是引用片段:
function func1(theFunc){ 
  theFunc(); 

function func2(){ 
  alert("ok"); 

func1(func2);  

  在最后一条语句中,func2作为一个对象传递给了func1的形参theFunc,再由func1内部进行theFunc的调用。事实上,将函数作为参数传递,或者是将函数赋值给其他变量是所有事件机制的基础。


  例如,如果需要在页面载入时进行一些初始化工作,可以先定义一个init的初始化函数,再通过window.onload=init;语句将其绑定到页面载入完成的事件。这里的init就是一个函数对象,它可以加入window的onload事件列表。


  传递给函数的隐含参数:arguments

  当进行函数调用时,除了指定的参数外,还创建一个隐含的对象——arguments。arguments是一个类似数组但不是数组的对象,说它类似是因为它具有数组一样的访问性质,可以用arguments[index]这样的语法取值,拥有数组长度属性length。arguments对象存储的是实际传递给函数的参数,而不局限于函数声明所定义的参数列表,例如:

以下是引用片段:
function func(a,b){ 
  alert(a); 
  alert(b); 
  for(var i=0;i<arguments.length;i++){ 
  alert(arguments[i]); 
  } 

func(1,2,3);  

  代码运行时会依次显示:1,2,1,2,3。因此,在定义函数的时候,即使不指定参数列表,仍然可以通过arguments引用到所获得的参数,这给编程带来了很大的灵活性。arguments对象的另一个属性是callee,它表示对函数对象本身的引用,这有利于实现无名函数的递归或者保证函数的封装性,例如使用递归来计算1到n的自然数之和:

以下是引用片段:
var sum=function(n){ 
  if(1==n)return 1; 
  else return n+sum(n-1); 

alert(sum(100));  


  其中函数内部包含了对sum自身的调用,然而对于JavaScript来说,函数名仅仅是一个变量名,在函数内部调用sum即相当于调用一个全局变量,不能很好的体现出是调用自身,所以使用arguments.callee属性会是一个较好的办法:

以下是引用片段:
var sum=function(n){ 
  if(1==n)return 1; 
  else return n+arguments.callee(n-1); 

alert(sum(100));  


  callee属性并不是arguments不同于数组对象的惟一特征,下面的代码说明了arguments不是由Array类型创建:

以下是引用片段:
Array.prototype.p1=1; 
alert(new Array().p1); 
function func(){ 
  alert(arguments.p1); 

func(); 

  运行代码可以发现,第一个alert语句显示为1,即表示数组对象拥有属性p1,而func调用则显示为“undefined”,即p1不是arguments的属性,由此可见,arguments并不是一个数组对象。

  函数的apply、call方法和length属性

  JavaScript为函数对象定义了两个方法:apply和call,它们的作用都是将函数绑定到另外一个对象上去运行,两者仅在定义参数的方式有所区别:

以下是引用片段:
Function.prototype.apply(thisArg,argArray); 
Function.prototype.call(thisArg[,arg1[,arg2…]]);  


  从函数原型可以看到,第一个参数都被取名为thisArg,即所有函数内部的this指针都会被赋值为thisArg,这就实现了将函数作为另外一个对象的方法运行的目的。两个方法除了thisArg参数,都是为Function对象传递的参数。下面的代码说明了apply和call方法的工作方式:

以下是引用片段:
//定义一个函数func1,具有属性p和方法A 
function func1(){ 
  this.p="func1-"; 
  this.A=function(arg){ 
  alert(this.p+arg); 
  } 

//定义一个函数func2,具有属性p和方法B 
function func2(){ 
  this.p="func2-"; 
  this.B=function(arg){ 
  alert(this.p+arg); 
  } 

var obj1=new func1(); 
var obj2=new func2(); 
obj1.A("byA"); //显示func1-byA 
obj2.B("byB"); //显示func2-byB 
obj1.A.apply(obj2,["byA"]); //显示func2-byA,其中[“byA”]是仅有一个元素的数组,下同 
obj2.B.apply(obj1,["byB"]); //显示func1-byB 
obj1.A.call(obj2,"byA"); //显示func2-byA 
obj2.B.call(obj1,"byB"); //显示func1-byB  

  可以看出,obj1的方法A被绑定到obj2运行后,整个函数A的运行环境就转移到了obj2,即this指针指向了obj2。同样obj2的函数B也可以绑定到obj1对象去运行。代码的最后4行显示了apply和call函数参数形式的区别。




  与arguments的length属性不同,函数对象还有一个属性length,它表示函数定义时所指定参数的个数,而非调用时实际传递的参数个数。例如下面的代码将显示2:

以下是引用片段:
function sum(a,b){ 
  return a+b; 

alert(sum.length); 

----------------------------------------------------------------------
深入认识JavaScript中的this指针 


  this指针是面向对象程序设计中的一项重要概念,它表示当前运行的对象。在实现对象的方法时,可以使用this指针来获得该对象自身的引用。

  和其他面向对象的语言不同,JavaScript中的this指针是一个动态的变量,一个方法内的this指针并不是始终指向定义该方法的对象的,在上一节讲函数的apply和call方法时已经有过这样的例子。为了方便理解,再来看下面的例子:

以下是引用片段:
<script language="JavaScript" type="text/javascript"> 
<!-- 
//创建两个空对象 
var obj1=new Object(); 
var obj2=new Object(); 
//给两个对象都添加属性p,并分别等于1和2 
obj1.p=1; 
obj2.p=2; 
//给obj1添加方法,用于显示p的值 
obj1.getP=function(){ 
  alert(this.p); //表面上this指针指向的是obj1 

//调用obj1的getP方法 
obj1.getP(); 
//使obj2的getP方法等于obj1的getP方法 
obj2.getP=obj1.getP; 
//调用obj2的getP方法 
obj2.getP(); 
//--> 
</script>  

  从代码的执行结果看,分别弹出对话框显示1和2。由此可见,getP函数仅定义了一次,在不同的场合运行,显示了不同的运行结果,这是有this指针的变化所决定的。在obj1的getP方法中,this就指向了obj1对象,而在obj2的getP方法中,this就指向了obj2对象,并通过this指针引用到了两个对象都具有的属性p。

  由此可见,JavaScript中的this指针是一个动态变化的变量,它表明了当前运行该函数的对象。由this指针的性质,也可以更好的理解JavaScript中对象的本质:一个对象就是由一个或多个属性(方法)组成的集合。每个集合元素不是仅能属于一个集合,而是可以动态的属于多个集合。这样,一个方法(集合元素)由谁调用,this指针就指向谁。实际上,前面介绍的apply方法和call方法都是通过强制改变this指针的值来实现的,使this指针指向参数所指定的对象,从而达到将一个对象的方法作为另一个对象的方法运行。

  每个对象集合的元素(即属性或方法)也是一个独立的部分,全局函数和作为一个对象方法定义的函数之间没有任何区别,因为可以把全局函数和变量看作为window对象的方法和属性。也可以使用new操作符来操作一个对象的方法来返回一个对象,这样一个对象的方法也就可以定义为类的形式,其中的this指针则会指向新创建的对象。在后面可以看到,这时对象名可以起到一个命名空间的作用,这是使用JavaScript进行面向对象程序设计的一个技巧。例如:

以下是引用片段:
var namespace1=new Object(); 
namespace1.class1=function(){ 
  //初始化对象的代码 

var obj1=new namespace1.class1();  


  这里就可以把namespace1看成一个命名空间。

  由于对象属性(方法)的动态变化特性,一个对象的两个属性(方法)之间的互相引用,必须要通过this指针,而其他语言中,this关键字是可以省略的。如上面的例子中:

以下是引用片段:
obj1.getP=function(){ 
  alert(this.p); //表面上this指针指向的是obj1
分享到:
评论

相关推荐

    javascript本地对象_内置对象和宿主对象

    JavaScript中的对象是编程的核心组成部分,它们是由特性(attribute)组成的,特性可以包含原始值(如字符串、数字、布尔值)或引用值(如其他对象或函数)。如果一个特性存储的是函数,那么它就被称为对象的方法;...

    JavaScript内置函数与内置对象.doc

    JavaScript内置函数与内置对象.doc

    JavaScript学习深入—面向对象编程

    ### JavaScript学习深入—面向对象编程 #### 一、JavaScript中的类型概述 JavaScript作为一种动态的、弱类型的语言,其核心特点之一在于它灵活的对象模型。尽管JavaScript的基础架构支持面向对象编程(OOP),但在...

    Javascript 面向对象的JavaScript进阶

    在面向对象的JavaScript中,类的成员可以根据它们与类和对象的关系分为“类成员”和“实例成员”。 ##### 8.2.1 实例属性和实例方法 **定义:** 实例成员包括实例属性和实例方法。每个对象实例都有自己的实例属性...

    js 面向对象实例

    原型是JavaScript中的另一个关键概念,它使得对象之间可以共享属性和方法。每个JavaScript对象都有一个`__proto__`属性,指向创建该对象的构造函数的原型。原型对象也是一个对象,可以通过`prototype`属性来访问。...

    JAVASCRIPT 面向对象编程精要

    JavaScript是一种基于原型的语言,这意味着它不像传统的面向对象语言(如Java或C++)那样拥有类的概念。在JavaScript中,对象是核心,一切都可以视为对象。JavaScript的对象是动态的,即可以在运行时添加或删除属性...

    Javascript面向对象编程

    ### JavaScript面向对象编程详解 #### 一、引言 JavaScript作为一种广泛使用的脚本语言,在Web开发领域占据着举足轻重的地位。尽管JavaScript本质上是一种基于原型的语言,但它也支持面向对象编程的一些特性,使得...

    javascript创建对象的方式(二)

    JavaScript的对象都有一个内置的`__proto__`属性,指向创建该对象的构造函数的原型。我们可以通过原型来添加或修改对象的方法和属性。例如: ```javascript Person.prototype.sayHello = function() { console....

    JavaScript面向对象基础.ppt

    在JavaScript中,面向对象编程(OOP)是其核心概念之一,允许开发者通过类和对象来组织和管理代码,提高代码的可重用性和可维护性。 8.1 面向对象术语 面向对象编程的基础包括类、对象、继承和多态等概念。类是对象...

    javascript完全学习手册1 源码

    第2篇 JavaScript内置对象篇 第3章 JavaScript内置对象 43 3.1 JavaScript对象概述 43 3.1.1 对象的概念 43 3.1.2 使用JavaScript对象 基础知识 44 3.2 Array对象 46 3.2.1 创建Array对象 46 3.2.2 Array对象属性 ...

    JavaScript面向对象编程指南 pdf

    JavaScript是一种广泛应用于Web开发的脚本语言,..."JavaScript面向对象编程指南"这本书应该是对这一主题的详细解析,包括概念讲解、实例演示以及最佳实践,对于想要提升JavaScript编程能力的人来说是一份宝贵的资源。

    面向对象JavaScript开发

    JavaScript,作为一种广泛应用于Web开发的动态脚本语言,最初被设计为简单的客户端脚本语言,但随着技术的发展,它已经发展出了丰富的面向对象编程(OOP)特性。面向对象JavaScript开发是现代Web开发中不可或缺的一...

    javascript中onclick(this)用法介绍

    在Web开发中,JavaScript是用于实现网页交互性的核心技术之一。通过JavaScript,开发者可以编写脚本来处理用户的点击、输入、页面加载等各种事件。本文将详细介绍JavaScript中一种常见的事件处理用法——onclick...

    JavaScript视频教程-4.函数与内置对象

    函数与内置对象"中,我们将会深入探讨JavaScript编程中的核心概念——函数和内置对象。 函数是JavaScript中的重要组成部分,它们是可重用的代码块,可以接受参数并返回值。函数的定义使用`function`关键字,例如: ...

    javascript function、指针及内置对象

    掌握JavaScript函数的使用、函数对象的性质以及JavaScript内置对象是学习JavaScript的基础。 ### 函数和函数对象(Function Object) 在JavaScript中,函数可以通过`function`关键字声明,也可以将函数赋值给变量...

    第15章 javascript面向对象与原型

    在深入讲解JavaScript面向对象与原型的知识点之前,首先需要了解JavaScript的基础知识。在JavaScript中,面向对象编程(OOP)的...正确理解并运用这些概念,可以让开发者更有效地利用JavaScript进行面向对象的编程。

    JavaScript面向对象编程指南.pdf

    JavaScript是一种高级的、解释型的编程语言,它支持面向对象的编程范式,允许开发者创建对象、使用继承和多态等面向对象的特性。以下是关于JavaScript面向对象编程的一些关键知识点: 1. 对象:在JavaScript中,...

    JavaScript面向对象精要(英文版)

    《JavaScript面向对象精要》这本书不仅介绍了JavaScript面向对象的基础概念,还深入探讨了其实现机制及其在实际开发中的应用。对于希望提高自己JavaScript技能水平的开发者来说,本书是一本不可多得的好书。通过学习...

    javascript初学教程 多本 pdf

    JavaScript,简称为JS,是一种广泛应用于网页和网络应用开发的轻量级脚本语言,尤其在客户端编程中占据核心地位。本教程集合了多本PDF书籍,旨在帮助初学者全面理解并掌握JavaScript的基础知识和核心概念。 首先,...

Global site tag (gtag.js) - Google Analytics