《web前端设计》课件-第13章 JavaScript面向对象（下）

第13章JavaScript面向对象（下）构造函数与原型对象this指向原型链错误处理与继承学习目标掌握了解掌握掌握了解原型的作用12掌握使用构造函数创建对象3掌握访问对象成员的规则4掌握原型继承的使用和错误的处理方式目录☞点击查看本节相关知识点13.1构造函数与原型对象☞点击查看本节相关知识点13.2原型链☞点击查看本节相关知识点13.3this指向☞点击查看本节相关知识点13.4错误处理目录☞点击查看本节相关知识点13.5继承知识架构13.1构造函数与原型对象1构造函数2静态成员和实例成员3构造函数和类的区别4原型对象知识架构13.2原型链1访问对象的原型对象2访问对象的构造函数3原型对象的原型对象4绘制原型链5成员查找机制6【案例】利用原型对象扩展数组方法知识架构13.3this指向1分析this指向2更改this指向知识架构13.4错误处理1如何进行错误处理2错误对象的传递3抛出错误对象4错误类型知识架构13.5继承1借用构造函数继承父类属性2利用原型对象继承父类方法构造函数：构造函数主要用来创建对象，并为对象的成员赋初始值。13.1构造函数与原型对象1

构造函数

varp1=newPerson('张三',18);varp2=newPerson('李四',19);console.log();//输出结果：张三console.log(p2.age);//输出结果：19p2.sing();//输出结果：我会唱歌实例化functionPerson(name,age){=name;this.age=age;this.sing=function(){console.log('我会唱歌');};}Person构造函数定义：实例成员是指实例对象的成员，而静态成员是指通过类或构造函数访问的成员。13.1构造函数与原型对象2静态成员和实例成员functionPerson(uname){this.uname=uname;}Person.school='X大学';//添加静态属性schoolPerson.sayHello=function(){//添加静态方法sayHelloconsole.log('Hello');};console.log(Person.school); //访问静态属性，输出结果：X大学Person.sayHello(); //访问静态方法，输出结果：Hello静态属性区别：类中的成员方法是定义在类中的，使用类创建对象后，这些对象的方法都是引用了同一个方法，这样可以节省内存空间。13.1构造函数与原型对象3构造函数和类的区别

classPerson{sing(){console.log('hello');}}varp1=newPerson();varp2=newPerson();console.log(p1.sing===p2.sing); //输出结果：true方法共享原型对象：每个构造函数都有一个原型对象存在，这个原型对象通过构造函数的prototype属性来访问。13.1构造函数与原型对象4原型对象

functionPerson(){}//定义函数console.log(Ptotype);//输出结果：{constructor:ƒ}console.log(typeofPtotype);//输出结果：object原型对象案例：利用原型对象共享方法。13.1构造函数与原型对象4原型对象

functionPerson(uname){this.uname=uname;}Ptotype.sayHello=function(){console.log('你好，我叫'+this.uname);};varp1=newPerson('张三');varp2=newPerson('李四');console.log(p1.sayHello===p2.sayHello);//输出结果：truep1.sayHello();//输出结果：你好，我叫张三p2.sayHello();//输出结果：你好，我叫李四利用原型对象共享方法对象的原型对象：每个对象都有一个__proto__属性，这个属性指向了对象的原型对象。13.2原型链1访问对象的原型对象

functionPerson(){}varp1=newPerson();console.log(p1.__proto__===Ptotype);//输出结果：true对象的原型对象实例对象与原型对象的关系：13.2原型链1访问对象的原型对象

对象的构造函数：在原型对象里面有一个constructor属性，该属性指向了构造函数。13.2原型链2访问对象的构造函数

functionPerson(){}//通过原型对象访问构造函数console.log(Ptotype.constructor===Person); //输出结果：true//通过实例对象访问构造函数varp1=newPerson();console.log(p1.constructor===Person);//输出结果：true对象的构造函数案例：用赋值方式修改原型对象为新的对象，就无法访问构造器函数。13.2原型链2访问对象的构造函数

functionPerson(){}//修改原型对象为一个新的对象Ptotype={sayHello:function(){console.log('hello');}};varp1=newPerson();//使用实例对象p1可以访问新的原型对象中的属性p1.sayHello();//输出结果：hello//使用constructor属性无法访问原来的构造函数console.log(p1.constructor);//输出结果：Object(){[nativecode]}对象的构造函数构造函数、原型对象和实例对象之间的关系：13.2原型链2访问对象的构造函数

原型对象的原型对象：原型对象也是对象，那么这个对象应该也会有一个原型对象存在。13.2原型链3原型对象的原型对象

functionPerson(){}//查看原型对象的原型对象console.log(Ptotype.__proto__);//查看原型对象的原型对象的构造函数console.log(Ptotype.__proto__.constructor);原型对象的原型对象案例：Ptotype.__proto__这个对象其实就是Ototype对象。13.2原型链3原型对象的原型对象

functionPerson(){}console.log(Ptotype.__proto__===Ototype);//truevarobj={};console.log(obj.__proto__===Ototype);//trueconsole.log(Ototype.__proto__);//输出结果：null原型对象的原型对象原型链结构特点：每个构造函数都有一个prototype属性指向原型对象。原型对象通过constructor属性指向构造函数。通过实例对象的__proto__属性可以访问原型对象。Object的原型对象的__proto__属性为null。13.2原型链4原型链

原型链结构图：13.2原型链4原型链

函数在原型链中的结构：13.2原型链4多学一招

成员查找机制：JavaScript首先会判断实例对象有没有这个成员如果没有找到，就继续查找原型对象的原型对象如果直到最后都没有找到，则返回undefined。13.2原型链5成员查找机制

成员查找机制：13.2原型链5成员查找机制

functionPerson(){='张三';}P='李四';varp=newPerson();console.log();//输出结果：张三delete;//删除对象p的name属性console.log();//输出结果：李四deleteP;//删除原型对象的name属性console.log();//输出结果：undefined成员查找机制案例代码：13.2原型链6

【案例】利用原型对象扩展数组方法

Atotype.sum=function(){varsum=0;for(vari=0;i<this.length;i++){sum+=this[i];}returnsum;};vararr=[1,2,3];console.log(arr.sum());//输出结果：6为数组添加sum()方法函数中this指向，情况如下：构造函数内部的this指向新创建的对象。直接通过函数名调用函数时，this指向的是全局对象window。如果将函数作为对象的方法调用，this将会指向该对象。13.3this指向1分析this指向案例演示：13.3this指向1分析this指向functionfoo(){returnthis;}varo={name:'Jim',func:foo};console.log(foo()===window);//对应第2种情况，输出结果：trueconsole.log(o.func()===o); //对应第3种情况，输出结果：truethis指向更改this指向方法有：apply()方法和call()方法。13.3this指向2更改this指向functionmethod(){console.log();}method.apply({name:'张三'}); //输出结果：张三method.call({name:'李四'}); //输出结果：李四更改this指向apply()方法和call()方法的区别：13.3this指向2更改this指向functionmethod(a,b){console.log(a+b);}method.apply({},['1','2']); //数组方式传参，输出结果：12method.call({},'3','4'); //参数方式传参，输出结果：34apply()方法和call()方法的区别bind()方法：实现提前绑定的效果。在绑定时，还可以提前传入调用函数时的参数。

13.3this指向2多学一招functionmethod(a,b){console.log(+a+b);}varname='张三';vartest=method.bind({name:'李四'},'3','4');method('1','2'); //输出结果：张三12test(); //输出结果：李四34bind()方法案例演示

：13.4错误处理1如何进行错误处理varo={};o.func(); //这行代码会出错，因为调用了不存在的方法console.log('test'); //前面的代码出错时，这行代码不会执行案例演示错误案例演示

：13.4错误处理1如何进行错误处理varo={};try{//在try中编写可能出现错误的代码o.func();console.log('a');//如果前面的代码出错，这行代码不会执行}catch(e){//在catch中捕获错误，e表示错误对象console.log(e);}console.log('b');//如果错误已经被处理，这行代码会执行try{}catch(e){}案例演示

：13.4错误处理2错误对象的传递functionfoo1(){foo2();console.log('foo1');}functionfoo2(){varo={};o.func();//发生错误}书写错误代码try{foo1();}catch(e){console.log('test');}try{}catch(e){}处理案例演示

：13.4错误处理3抛出错误对象try{vare1=newError('错误信息'); //创建错误对象throwe1;//抛出错误对象，也可以与上一行合并为：thrownewError('错误信息');}catch(e){console.log(e.message); //输出结果：错误信息console.log(e1===e); //判断e1和e是否为同一个对象，输出结果：true}抛出错误对象错误类型

：13.4错误处理4错误类型类型说明Error表示普通错误，其余6种类型的错误对象都继承自该对象EvalError调用eval()函数错误，已经弃用，为了向后兼容，低版本还可以使用RangeError数值超出有效范围，如“newArray(-1)”ReferenceError引用了一个不存在的变量，如“vara=1;a+b;”（变量b未定义）SyntaxError解析过程语法错误，如“{;}”“if()”“vara=new;”TypeError变量或参数不是预期类型，如调用了不存在的函数或方法错误类型

：13.4错误处理4错误类型类型说明URIError解析URI编码出错，调用encodeURI()、escape()等URI处理函数时出现案例演示

：13.4错误处理4错误类型try{varo={;}; //语法错误}catch(e){console.log(e.message);}语法错误call()方法

：将父类的this指向子类的this，这样就可以实现子类继承父类的属性。13.5继承1借用构造函数继承父类属性案例演示

：13.5继承1借用构造函数继承父类属性functionFather(uname,age){//Father构造函数是父类this.uname=uname;this.age=age;}functionSon(uname,age,score){//Son构造函数是子类Father.call(this,uname,age);//子类继承父类的属性this.score=score;//子类可以拥有自己的特有属性}varson=newSon('张三',18,100);console.log(son); //输出结果：Son

{uname:"张三",age:18,score:100}call()方法原型对象继承父类方法：将父类的实例对象作为子类的原型对象来使用13.5继承2利用原型对象继承