第三章js类继承闭包回调

第三章JS类，继承，闭包，回调回顾JavaScript对象事件处理JavaScript内置对象的分类JavaScriptString对象JavaScriptArray对象JavaScriptDate对象JavaScriptRegExp正则表达式对象本章内容JavaScript定义类或对象JavaScript继承JavaScript闭包JavaScript回调定义类或对象JavaScript中定义类或对象的方式：工厂方式构造函数方式原型方式混合的构造函数/原型方式……定义类或对象-工厂方式工厂方式的特点在函数内部创建对象，对象创建后动态定义对象的属性代码实现出现的问题在语义上不像使用带有构造函数的new运算符那么正规每次调用createEmployee()，都要创建新函数showName(),意味着每个对象都有自己的showName()版本functioncreateEmployee(name,gender){ varemp=newObject; =name; emp.gender=gender; emp.showName=function(){ alert(); }; returnemp;}vare1=createEmployee("张三","男");e1.showName();vare2=createEmployee("李四","女");e2.showName();定义类或对象-构造函数方式构造函数方式的特点无需在函数内部创建对象，而是使用this关键字代码实现出现的问题与工厂方式一样，构造函数也会重复生成函数functionEmployee(name,gender){ =name; this.gender=gender; this.showName=function(){ alert(); };}vare1=newEmployee("张三","男");e1.showName();vare2=newEmployee("李四","女");e2.showName();定义类或对象-原型方式原型方式的特点使用空构造来设置类名，使用对象的prototype属性，把它看成创建新对象所依赖的原型代码实现出现的问题使用原型方式时，不能通过构造函数传递参数初始化属性若属性是指向对象的指针，则创建的每个对象都共用同一个属性值。上面的例子中，每个对象都共用position属性指向的数组functionEmployee(){}E="张三";Etotype.gender="男";Etotype.position=newArray("项目经理","技术总监");Etotype.showName=function(){ alert();};vare1=newEmployee();e1.showName();定义类或对象-

混合的构造函数/原型方式混合的构造函数/原型方式的特点使用构造函数定义对象的所有非函数属性，使用原型方式定义对象的函数属性（方法）代码实现采用那种方式目前使用最广泛的是混合的构造函数/原型方式functionEmployee(name,gender){ =name; this.gender=gender; this.position=newArray("项目经理","技术总监");}Etotype.showName=function(){ alert();};vare1=newEmployee("张三","男");e1.showName();继承JavaScript中继承的方式对象冒充使用call()方法使用apply()方法原型链混合式继承-对象冒充对象冒充的原理构造函数使用this关键字给所有的属性和方法赋值。由于构造函数只是一个函数，所以可以将父类的构造函数作为子类的方法，然后调用它。子类就会收到父类在构造函数中定义的属性和方法。代码实现特点使用对象冒充可以实现多继承functionClassA(color){ this.color=color; this.showColor=function(){ alert(this.color); };}functionClassB(color,name){ this.parent=ClassA; this.parent(color); deletethis.parent;//delete关键字可以删除对象的属性（删除对ClassA的引用，防止ClassB的实例调用它）

=name; this.showName=function(){ alert(); };}varaObj=newClassA("black");varbObj=newClassB("red","tom");aObj.showColor();bObj.showColor();bObj.showName();functionClassA(color){ this.color=color; this.showColor=function(){ alert(this.color); };}functionClassB(color,name){ this.parent=ClassA; this.parent(color); deletethis.parent;//delete关键字可以删除对象的属性（删除对ClassA的引用，防止ClassB的实例调用它）

=name; this.showName=function(){ alert(); };}varaObj=newClassA("black");varbObj=newClassB("red","tom");aObj.showColor();bObj.showColor();bObj.showName();functionClassA(color){ this.color=color; this.showColor=function(){ alert(this.color); };}functionClassB(color,name){ this.parent=ClassA; this.parent(color); deletethis.parent;//delete关键字可以删除对象的属性（删除对ClassA的引用，防止ClassB的实例调用它）

=name; this.showName=function(){ alert(); };}继承-call()方法语法call([thisObj[,arg1[,arg2[,

[,.argN]]]]])说明第一个参数用来充当函数中的this引用的对象，其他参数都直接传递给函数自身代码实现functionClassB(color,name){ //this.parent=ClassA; //this.parent(color); //deletethis.parent;

ClassA.call(this,color); =name; this.showName=function(){ alert(); };}继承-apply()方法语法apply([thisObj[,argArray]])说明该方法和call()方法类似，只是第二个参数为一个数组，表示将数组中的元素作为函数的参数直接传递代码实现

functionClassB(color,name){ //this.parent=ClassA; //this.parent(color); //deletethis.parent;

ClassA.apply(this,newArray(color)); =name; this.showName=function(){ alert(); };}继承-原型链原理由于prototype对象的任何属性和方法都会被传递给那个类的所有实例，所以我们可以将父类对象作为子类的原型对象，从而达到继承父类中属性和方法的目的代码实现

functionClassA(){}ClassA.prototype.color="";ClassA.prototype.showColor=function(){ alert(this.color);};functionClassB(){}ClassB.prototype=newClassA();ClassB.="";ClassB.prototype.showName=function(){ alert();};vara=newClassA();varb=newClassB();a.color="blue";b.color="black";="tom";a.showColor(); //输出：blueb.showColor(); //输出：blackb.showName(); //输出：tom弊端：原型链不支持多重继承继承-混合方式混合方式的好处避免对象冒充必须使用构造函数所带来的问题避免原型链无法使用带参数函数代码实现functionClassA(color){ this.color=color;}ClassA.prototype.showColor=function(){ alert(this.color);};functionClassB(color,name){ ClassA.call(this,color); =name;}ClassB.prototype=newClassA();ClassB.prototype.showName=function(){ alert();};vara=newClassA("red");varb=newClassB("blue","tom");a.showColor(); //输出：redb.showColor(); //输出：blueb.showName(); //输出：tom闭包-1闭包是通过在对一个函数调用的执行环境中返回一个函数对象构成的。Javascript中每一个函数都是一个闭包。但通常我们说的闭包是指嵌套函数。闭包的主要用途通过内部函数读取外部函数的变量内部函数可以在外部函数的外面，访问外部函数的内部变量闭包-2一个简单的闭包代码functionf1(){ vart=1; functionf2(){ alert(++t); } returnf2;}varfn=f1();fn();第1行：创建一个外部函数f1第2行：创建一个局部变量t第3-5行：创建一个内部函数f2，在f2中访问局部变量t第6行：返回内部函数f2，注意这里返回的是f2(内部函数对象)，并没有调用f2函数第8行：由于f1将返回f2，所以fn实际是引用了f2第9行：由于fn引用了f2，所以这里实际上是调用了f2函数闭包-3问题一：f2中可以访问到f1中t变量？答：内部函数可以访问外部函数中任何局部变量提醒：定义局部变量需要使用var关键字如果没有使用var关键字，那么将变成全局变量例如：functionf1(){ t=10;}f1();alert(t);闭包-4问题二：returnf2;为什么这里返回的是一个函数名？答：这里返回的不是函数名。在javascript中函数其实就是对象，而函数名其实是对函数对象的引用。所以这里的f2是一个函数对象，既然是对象当然可以作为返回值。我们还可以返回匿名函数，例如：看到了吗，直接将函数对象返回，这是一个匿名函数。这段代码和上段代码的执行结果是一样的functionf1(){ vart=1; returnfunction(){ alert(++t); };}闭包-5问题三：f2和f2()有什么区别？答：f2是对函数的引用，你可以看成是函数对象。而f2()则是执行函数。就像在我们的代码中varfn=f1();这里的fn表示一个引用，它将引用f1()执行完后返回的f2。而代码fn();这里表示执行fn所引用的函数，也就是f2函数。闭包-6问题四：f1();执行完后它的局部变量t不是应该被回收吗，为什么fn();还是能访问到t？答：f1是f2的父函数，而f2则被一个全局变量fn引用，这样f2将一直存在于内存中。f2的运行环境是f1，所以f1也会一直在内存中，不会在调用结束后被垃圾回收。闭包-7思考1：如果再次调用fn();结果会是什么？思考2：如果像下面这样结果会是什么？functionf1(){ vart=1; returnfunction(){ alert(++t); }}varfn=f1();fn();varfn1=f1();fn1();回调函数-1回调函数就是一个通过函数引用调用的函数在javascript中函数名就是函数的引用在javascript中回调函数的实现方式：定义一个回调函数提供函数实现的一方在初始化的时候，将回调函数引用注册给调用者当特定的事件或条件发生的时候，调用者使用函数引用调用回调函数进行处理回调函数-2一个简单的例子functioncallbackFn(){ alert("我是回调函数");}functionfn(callback){ callback();}fn(callbackFn);回调函数-3callbackFn函数就是一个回调函数fn函数是调用函数执行时将回调函数（callbackFn）的引用传递给调用函数（fn）在调用函数（fn）运行期间执行回调函数（callbackFn）回调函数-4思考：如果回调函数带参数该如何调用？注意：通常情况下当调用函数（fn）定义好以后是不允许修改的。functioncallbackFn(i,j){ alert(i+j);}functionfn(callback){ callback();}fn(callbackF