《javascript用函数实现继承详解_javascript技巧.docx.pdf》由会员分享，可在线阅读，更多相关《javascript用函数实现继承详解_javascript技巧.docx.pdf（5页珍藏版）》请在三一文库上搜索。
1、一、 知识储备： 1、枚举属性名称的函数： (1)for. in：口J以在循环体中遍历对象中所有可枚举的属性( 包括自有属性 和继承属性 ) (2)Object. keys():返回数组 (可枚举的自有属性 ) (3)Object. getOwnPropertyNames():所有的自有属性 3、 属性的特性：数据属性和存取器属性 (1)数据属性：口J坊(writable) 叮枚举(enumerable) 口J配置 (configurable) 值(value) 数据屈性只冇一个简单的值； (2)存取器属性：写入(set) 读取(get) 可枚举(enumerable) 可配 置 (confi
2、gurable) 存取器属性不可写 ( 即没有writable特性)。 屈性有set方法，那这个屈性是可写的，有get方法，那这个屈性就是可读的。 4、 定义属性特性的方法:Object. defineProperty (对象，属性 , 描述符对象 ) 5、 获取属性的描述符对象:Object. getOwnPropertyDescriptor (对象，属性 ) 二、 示例 1、根据for. in的用法，我们可以写出模拟“继承”的方法： var child=; var mother= n cime: ，z zha ngzhi yin g，lastAgc:21, sex:女 ; function
3、 extend(target, source) for(var p in source) targetp=sourcep; return target; extend (chi 1d, mother); consolc. log(child) ; /Objcct name: ，zzhangzhiying ， lastAge: 21, sex: 女“ /STRONG 2、使用for in来循环遍历原型对象的属性，然后一一赋值给我们的空对象，从而 实现了“继承”。这个思路很正确，下面我们來对以上示例进行改造： var child=; var mother= name: znangzhiying ,
4、 lastAge:21, set age (value) this. lastAge=value; , get age() return this.1astAge+1; , sex: ?女 ; mother, age二15; / 有set 方法，具 有可写性 function cxtcnd (target, source) for (var p in source) targetp=sourcep; return target; extend (chi Id, mother); console, log(child) ; /Object name: /Z zhangzhiying ， z, l
5、astAge: 15, age: 16, sex: 女 “STRONG 可以看到代码中使用了一对set, get；其中3gc是一个存取器属性。 运行的结果：一个不包含set, get的普通对象。 结论:for in实现的“继承”不处理set和get , 它把存取器属性(age)转 换为一个 静态的数据属性。 3给mother对彖设置数据屈性 var child=; var mother= name: Z， zhangzhiying /Z , lastAge:21, set age (value) this.lastAge=value; , get age () return this. las
6、tAge+1; , sex:女 ; Object ? defincProperty(mother, ，z lastAgc“, writable:false) ; / 把lastAge设 置成了不可写 mother, age二15; / 设置无效，因为lastAge的值不 变，所以laslAge+1不变，即age不变 function extend (target, source) for (var p in source) targetp=sourcep; return largel; extend (child, mother); console, log (child) ; /Object
7、 name: ，z zhangzhiying ， z, lastAge: 21, age: 22, sex:“女“ child. lastAge=12; / 结果显示lastAge 改变，说明child. lastAge 没有“继承”到mother. lastAge 的特性，我们再用getOwnPropertyDesriptor () 方 法确认一下BR console, log (Object. getO 结论：要实现继承，我们还需要解决的问题-“继承”属性特性。 4、完善版本 var child=); var mother= name: Z， zhangzhiying z， , lastA
8、ge:21, set age (value) this. lastAge二value; , get age() return this. lastAgc+1; Object, defineProperty(mother, ，z lastAge ，z, writable:false); mother. agc=15; SPAN style二COLOR: #333399“STR0NGfunction extend(target, source) var names=0b ject. getOwnPropertyNames (source) ; / 获取所有的属性名 for (var i=0;i e
9、xtend(chi 1d, mother); console, log(child); child.lastAge=12; console, log (Object. getOwnPropertyDescriptor (child, /z lastAge /z ); console, log(child); 最后的结果 : Object name: ,rzhangzhiyingnj Last Age: 21j sex: B age:( ) ? get age: function age() ? set age: function age(value) lastAge: 21 name: ,fz
10、hangzhiying“ sex: 站女 “ ? _proto_: Object Object vaLue: 21, writabLe: faLse enuinerabLe: truef configurabLe: true Object name: ,rzhangzhiyingrtj LastAge: 21j sex: tfQ age:( ) ? get age: function age () ? set age: function age(value) lastAge: 21 name: ,fzhangzhiying“ sex: 站女 “ ? _proto_: Object 可以明显看到三次的打印,child “继承”到了set和get, lastAge数值没发生变 化writable 也是false 了。 总结：最近在看javascript权威指南，总结一点心得，冇错误欢迎指正，共 同学习进步 以上这篇javascript用函数实现继承详解就是小编分享给大家的全部内容了，希 累能给大家一个参考，也希累大家多多支持脚本之家。