JavaScript的课堂讲解.docx

JavaScript的课堂讲解

JavaScript的课堂讲解本文主要内容：1.分析函数的四种调用形式2.弄清楚函数中this的意义3.明确构造函对象的过程4.学会使用上下文调用函数一、函数调用形式函数调用形式是最常见的形式，也是最好理解的形式。所谓函数形式就是一般声明函数后直接调用即是。例如：复制代码代码如下://声明一个函数，并调用functionfunc(){alert("HelloWorld");}func();或者：复制代码代码如下://使用函数的Lambda表达式定义函数，然后调用varfunc=function(){alert("你好，程序员");};func();这两段代码都会在浏览器中弹出一个对话框，显示字符串中的文字，这个就是函数调用。可以发现函数调用很简单，就是平时学习的一样，这里的关键是，在函数调用模式中，函数里的this关键字指全局对象，如果在浏览器中就是window对象。例如：复制代码代码如下:varfunc=function(){alert(this);};func();此时，会弹出对话框，打印出[objectWindow]。二、方法调用模式函数调用模式很简单，是最基本的调用方式。但是同样的是函数，将其赋值给一个对象的成员以后，就不一样了。将函数赋值给对象的成员后，那么这个就不在称为函数，而应该叫做方法。例如：复制代码代码如下://定义一个函数varfunc=function(){alert("我是一个函数么?");};//将其赋值给一个对象varo={};o.fn=func;//注意这里不要加圆括号//调用o.fn();此时，o.fn则是方法，不是函数了。实际上fn的方法体与func是一模一样的，但是这里有个微妙的不同。看下面的代码：复制代码代码如下://接上面的代码alert(o.fn===func);打印结果是true，这个表明两个函数是一样的东西，但是修改一下函数的代码：//修改函数体varfunc=function(){alert(this);};varo={};o.fn=func;//比较alert(o.fn===func);//调用func();o.fn();这里的运行结果是，两个函数是相同的，因此打印结果是true。但是由于两个函数的调用是不一样的，func的调用，打印的是[objectWindow]，而o.fn的打印结果是[objectObject]。这里便是函数调用与方法调用的区别，函数调用中，this专指全局对象window，而在方法中this专指当前对象，即o.fn中的this指的就是对象o。三、构造器调用模式同样是函数，在单纯的函数模式下，this表示window；在对象方法模式下，this指的是当前对象。除了这两种情况，JavaScript中函数还可以是构造器。将函数作为构造器来使用的语法就是在函数调用前面加上一个new关键字。如代码：复制代码代码如下://定义一个构造函数varPerson=function(){this.name="程序员";this.sayHello=function(){alert("你好，这里是"+this.name);};};//调用构造器，创建对象varp=newPerson();//使用对象p.sayHello();上面的案例首先创建一个构造函数Person，然后使用构造函数创建对象p。这里使用new语法。然后在使用对象调用sayHello()方法，这个使用构造函数创建对象的案例比较简单。从案例可以看到，此时this指的是对象本身。除了上面简单的使用以外，函数作为构造器还有几个变化，分别为：1、所有需要由对象使用的属性，必须使用this引导；2、函数的return语句意义被改写，如果返回非对象，就返回this。构造器中的this我们需要分析创建对象的过程，方能知道this的意义。如下面代码：复制代码代码如下:varPerson=function(){this.name="程序员";};varp=newPerson();这里首先定义了函数Person，下面分析一下整个执行：1、程序在执行到这一句的时候，不会执行函数体，因此JavaScript的解释器并不知道这个函数的内容。2、接下来执行new关键字，创建对象，解释器开辟内存，得到对象的引用，将新对象的引用交给函数。3、紧接着执行函数，将传过来的对象引用交给this。也就是说，在构造方法中，this就是刚刚被new创建出来的对象。4、然后为this添加成员，也就是为对象添加成员。5、最后函数结束，返回this，将this交给左边的变量。分析过构造函数的执行以后，可以得到，