javascript 用函数实现继承详解


Posted in Javascript onMay 28, 2016

一、知识储备:

1、枚举属性名称的函数:

(1)for...in:可以在循环体中遍历对象中所有可枚举的属性(包括自有属性和继承属性)

(2)Object.keys():返回数组(可枚举的自有属性)

(3)Object.getOwnPropertyNames():所有的自有属性

3、属性的特性:数据属性和存取器属性

(1)数据属性:可写(writable)  可枚举(enumerable)  可配置(configurable)  值(value)

数据属性只有一个简单的值;

(2)存取器属性: 写入(set)  读取(get)  可枚举(enumerable)  可配置(configurable)

存取器属性不可写(即没有writable特性)。

属性有set方法,那这个属性是可写的,有get方法,那这个属性就是可读的。

4、定义属性特性的方法:Object.defineProperty(对象,属性,描述符对象)

5、获取属性的描述符对象:Object.getOwnPropertyDescriptor(对象,属性)

二、示例

1、根据for...in的用法,我们可以写出模拟“继承”的方法:

<script type="text/javascript"> 
  var child={}; 
  var mother={ 
    name:"zhangzhiying", 
    lastAge:21, 
    sex:"女"
  }; 
  function extend(target,source){ 
  
for(var p in source){ 
    
target[p]=source[p]; 
  

} 
  

return target; 
  } 
  extend(child,mother); 
  console.log(child);   //<STRONG>Object {name: "zhangzhiying", lastAge: 21, sex: "女"}</STRONG> 
</script>

2、使用for in来循环遍历原型对象的属性,然后一一赋值给我们的空对象,从而实现了“继承”。这个思路很正确,下面我们来对以上示例进行改造:

<script type="text/javascript"> 
  var child={}; 
  var mother={ 
    name:"zhangzhiying", 
    lastAge:21, 
    <STRONG>set age(value){ 
      this.lastAge=value; 
    }, 
    get age(){ 
      return this.lastAge+1; 
    },</STRONG> 
    sex:"女"
  };<BR>
<STRONG> mother.age=15;</STRONG>    //有set方法,具有可写性 
  function extend(target,source){ 
  

for(var p in source){ 
    
target[p]=source[p]; 
  

} 
  

return target; 
  } 
  extend(child,mother); 
  console.log(child);  //<STRONG>Object {name: "zhangzhiying", lastAge: 15, age: 16, sex: "女"}</STRONG> 
</script>

可以看到代码中使用了一对set,get;其中age是一个存取器属性。

运行的结果:一个不包含set,get的普通对象。 

结论:for  in实现的“继承”不处理set和get ,它把存取器属性(age)转换为一个静态的数据属性。

3、给mother对象设置数据属性

<script type="text/javascript"> 
  var child={}; 
  var mother={ 
    name:"zhangzhiying", 
    lastAge:21, 
    set age(value){ 
      this.lastAge=value; 
    }, 
    get age(){ 
      return this.lastAge+1; 
    }, 
    sex:"女"
  }; 
  Object.defineProperty(mother,"lastAge",{writable:false}); //把lastAge设置成了不可写 
  mother.age=15;                       //设置无效,因为lastAge的值不变,所以lastAge+1不变,即age不变 
  function extend(target,source){ 
    for(var p in source){ 
    target[p]=source[p]; 
  } 
  return target; 
  } 
  extend(child,mother); 
  console.log(child);   //Object {name: "zhangzhiying", lastAge: 21, age: 22, sex: "女"} 
  child.lastAge=12;
//结果显示lastAge改变,说明child.lastAge没有“继承”到mother.lastAge的特性,我们再用getOwnPropertyDesriptor()方法确认一下<BR>

 console.log(Object.getO
<EM id=__mceDel></script> 
</EM>

结论:要实现继承,我们还需要解决的问题->“继承”属性特性。

4、完善版本 

<script type="text/javascript"> 
  var child={}; 
  var mother={ 
    name:"zhangzhiying", 
    lastAge:21, 
    set age(value){ 
      this.lastAge=value; 
    }, 
    get age(){ 
      return this.lastAge+1; 
    }, 
    sex:"女"
  }; 
  Object.defineProperty(mother,"lastAge",{writable:false}); 
  mother.age=15; 
  <SPAN style="COLOR: #333399"><STRONG>function extend(target,source){ 
    var names=Object.getOwnPropertyNames(source);  //获取所有的属性名 
    for(var i=0;i<names.length;i++){ 
      if(names[i] in target) continue;  //如果这个属性存在,就跳过(原型继承中,如果自有属性和原型对象的属性重名,保留自有属性) 
      var desc=Object.getOwnPropertyDescriptor(source,names[i]);  //获取mother属性的描述符对象(即属性特性的集合,es5中用描述符对象来表示) 
      Object.defineProperty(target,names[i],desc);  //将mother的描述符对象给child的属性定义 
    } 
    return target; 
  }</STRONG></SPAN> 
  extend(child,mother); 
  console.log(child); 
  child.lastAge=12; 
  console.log(Object.getOwnPropertyDescriptor(child,"lastAge")); 
  console.log(child); 
</script>

最后的结果:

javascript 用函数实现继承详解

可以明显看到三次的打印,child“继承”到了set和get,lastAge数值没发生变化,writable也是false了。 

总结:最近在看《javascript权威指南》,总结一点心得,有错误欢迎指正,共同学习进步~

以上这篇javascript 用函数实现继承详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
小议Javascript中的this指针
Mar 18 Javascript
分享几个超级震憾的图片特效
Jan 08 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
简单模拟node.js中require的加载机制
Oct 27 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
Vue resource三种请求格式和万能测试地址
Sep 26 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 #Javascript
jQuery实现布局高宽自适应的简单实例
May 28 #Javascript
jquery mobile界面数据刷新的实现方法
May 28 #Javascript
jquery自适应布局的简单实例
May 28 #Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 #Javascript
jquery div模态窗口的简单实例
May 28 #Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 #Javascript
You might like
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
JS中用EL表达式获取上下文参数值的方法
2018/03/28 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
对python Tkinter Text的用法详解
2018/10/11 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
python基于opencv 实现图像时钟
2021/01/04 Python
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
重阳节登山活动方案
2014/02/03 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
小学运动会入场口号
2015/12/24 职场文书
电力安全学习心得体会
2016/01/18 职场文书