javascript 用函数实现继承详解

 更新时间:2016年05月28日 10:24:05   投稿:jingxian  
下面小编就为大家带来一篇javascript 用函数实现继承详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

一、知识储备:

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>

最后的结果:

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

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

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

相关文章

  • 深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制

    深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制

    这篇文章主要介绍了深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制,需要的朋友可以参考下
    2014-06-06
  • Ant Design Pro 下实现文件下载的实现代码

    Ant Design Pro 下实现文件下载的实现代码

    这篇文章主要介绍了Ant Design Pro 下实现文件下载的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • js中将String转换为number以便比较

    js中将String转换为number以便比较

    string没转换就拿去比较,结果是很头疼的,下面为大家介绍下js中String转换为number,需要的朋友可以参考下
    2014-07-07
  • JavaScript WeakMap的具体使用

    JavaScript WeakMap的具体使用

    本文主要介绍了JavaScript WeakMap的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • javascript各种复制代码收集

    javascript各种复制代码收集

    javascript各种形式的复制代码效果,有直接复制url,复制文本框中的内容、隐藏表单中的内容,复制span中的内容
    2008-09-09
  • Js操作DOM元素及获取浏览器高宽的简单方法

    Js操作DOM元素及获取浏览器高宽的简单方法

    下面小编就为大家带来一篇Js操作DOM元素及获取浏览器高宽的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • 表单提交前触发函数返回true表单才会提交

    表单提交前触发函数返回true表单才会提交

    这篇文章主要介绍了表单提交前触发函数当返回true表单才会提交的具体实现,需要的朋友可以参考下
    2014-03-03
  • 深入webpack打包原理及loader和plugin的实现

    深入webpack打包原理及loader和plugin的实现

    这篇文章主要介绍了深入webpack打包原理及loader和plugin的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • JS实现数组内值累加常见的3个方法

    JS实现数组内值累加常见的3个方法

    这篇文章主要给大家介绍了关于JS实现数组内值累加常见的3个方法,文中通过实例代码将3个方法介绍的非常详细,对大家学习或者使用js具有一定参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • Webpack中SplitChunksPlugin 配置参数详解

    Webpack中SplitChunksPlugin 配置参数详解

    这篇文章主要介绍了Webpack中SplitChunksPlugin 配置参数详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03

最新评论