javascript用函数实现继承详解_javascript技巧

《javascript用函数实现继承详解_javascript技巧》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

一、知识储备：1、枚举属性名称的函数：(1)for...in：口J以在循环体中遍历对象中所有可枚举的属性(包括自有属性和继承属性)(2)Object.keys():返回数组(可枚举的自有属性)(3)Object.getOwnPropertyNames():所有的自有属性3、属性的特性：数据属性和存取器属性(1)数据属性：口J坊(writable)叮枚举(enumerable)口J配置(configurable)值(value)数据屈性只冇一个简单的值；(2)存取器属性：写入(set)读取(get)可枚举(enumerable)可配置(configurable)存取器属性不可写(即没有writable特性)。屈性有set方法，那这个屈性是可写的，有get方法，那这个屈性就是可读的。4、定义属性特性的方法:Object.defineProperty(对象，属性,描述符对象)5、获取属性的描述符对象:Object.getOwnPropertyDescriptor(对象，属性)二、示例1、根据for...in的用法，我们可以写出模拟“继承”的方法：varchild={};varmother={ncime:，zzhangzhiying〃，lastAgc:21,sex:女};functionextend(target,source){for(varpinsource){ target[p]=source[p];}returntarget;}extend(chi1d,mother);consolc.log(child);//Objcct{name:，zzhangzhiying〃，lastAge:21,sex:女"}〈/STRONG〉2、使用forin来循环遍历原型对象的属性，然后一一赋值给我们的空对象，从而实现了“继承”。这个思路很正确，下面我们來对以上示例进行改造：varchild={};varmother={name:znangzhiying,lastAge:21,setage(value){this.lastAge=value;},getage(){returnthis.1astAge+1;},sex:•女};
mother,age二15;//有set方法，具有可写性functioncxtcnd(target,source){for(varpinsource){target[p]=source[p];}returntarget;}extend(chiId,mother);console,log(child);//Object{name:/Zzhangzhiying，z,lastAge:15,age:16,sex:〃女〃}"STRONG〉可以看到代码中使用了一对set,get；其中3gc是一个存取器属性。运行的结果：一个不包含set,get的普通对象。结论:forin实现的“继承”不处理set和get,它把存取器属性(age)转换为一个静态的数据属性。3^给mother对彖设置数据屈性 varchild={};varmother={name:Z，zhangzhiying/Z,lastAge:21,setage(value){this.lastAge=value;},getage(){returnthis.lastAge+1;},sex:女};Object・defincProperty(mother,，zlastAgc",{writable:false});//把lastAge设置成了不可写mother,age二15;//设置无效，因为lastAge的值不变，所以laslAge+1不变，即age不变functionextend(target,source){for(varpinsource){target[p]=source[p];}returnlargel;}extend(child,mother);console,log(child);//Object{name:，zzhangzhiying，z,lastAge:21,age:22,sex:"女"}child.lastAge=12;//结果显示lastAge改变，说明child.lastAge没有"继承”到mother.lastAge的特性，我们再用getOwnPropertyDesriptor()方法确认一下〈BR>console,log(Object.getO结论：要实现继承，我们还需要解决的问题-〉“继承”属性特性。4、完善版本varchild={);varmother={name:Z，zhangzhiyingz，,lastAge:21,setage(value){this.lastAge二value; },getage(){returnthis.lastAgc+1;Object,defineProperty(mother,，zlastAge，z,{writable:false});mother.agc=15;〈SPANstyle二〃COLOR:#333399">〈STR0NG>functionextend(target,source){varnames=0bject.getOwnPropertyNames(source);//获取所有的属性名for(vari=0;iextend(chi1d,mother);console,log(child);child.lastAge=12;console,log(Object.getOwnPropertyDescriptor(child,/zlastAge/z));console,log(child);最后的结果: ▼Object{name:,rzhangzhiyingnjLastAge:21jsex:Bage:(…)►getage:functionage()►setage:functionage(value)lastAge:21name:,fzhangzhiying"sex:站女"►_proto_:ObjectObject{vaLue:21,writabLe:faLse^enuinerabLe:truefconfigurabLe:true}▼Object{name:,rzhangzhiyingrtjLastAge:21jsex:tfQage:(…)►getage:functionage()►setage:functionage(value)lastAge:21name:,fzhangzhiying"sex:站女"►_proto_:Object可以明显看到三次的打印,child“继承”到了set和get,lastAge数值没发生变化‘writable也是false了。总结：最近在看《javascript权威指南》，总结一点心得，冇错误欢迎指正，共同学习进步~以上这篇javascript用函数实现继承详解就是小编分享给大家的全部内容了，希累能给大家一个参考，也希累大家多多支持脚本之家。