js函数式编程确实比很多强语言使用灵活得多,今天抽了点时间玩下类与对象方法调用优先级别,顺便回顾下继承

暂时把原型引用写成继承

先看看简单的两个继承

var Parent = function(){};
var b = new Parent();
Object.defineProperty(b,"Name",{value:"John",writable:true});
var A = function(){};
A.prototype= b;
var a = new Child();
alert(a.Name); //John

给父类原型加上类方法

var Parent = function(){};
var b = new Parent();
Object.defineProperty(b,"Name",{value:"John",writable:true});
Parent.prototype.getName = function(){return "Parent said:" + this.Name;};
Parent.prototype.setName = function(value){this.Name = value;};
var A = function(){};
A.prototype= b;
var a = new A();
alert(a.Name); // John
alert(a.getName()); //Parent said John
a.setName("Keven");
alert(a.getName());//Parent said Keven

子类继承并使用了父类原型的方法和属性, 也能通过父类提供的方法修改继承的属性值

var Parent = function(){this.getName=function(){return "Parent child object said:"+this.Name};};
var b = new Parent();
Object.defineProperty(b,"Name",{value:"John",writable:true});
Parent.prototype.getName = function(){return "Parent sard:" + this.Name;};
Parent.prototype.setName = function(value){this.Name = value;};
var A = function(){};
A.prototype= b;
var a = new A(); alert(a.Name); // John
alert(a.getName()); //Parent child object said John
a.setName("Keven");
alert(a.getName());//Parent child object said Keven

此处可以看出对象方法优先于原型方法调用,当对象方法没有找到时会向上层原型查找

再来看看类方法,Parent类加上getName方法

var Parent = function(){this.getName=function(){return "Parent child object said:"+this.Name};};
var b = new Parent();
Object.defineProperty(b,"Name",{value:"John",writable:true});
Parent.prototype.getName = function(){return "Parent sard:" + this.Name;};
Parent.getName = function(){return this.Name;};
Parent.prototype.setName = function(value){this.Name = value;};
var A = function(){};
A.prototype= b;
var a = new A();
alert(a.Name); // John
alert(a.getName()); //Parent child object said John
a.setName("Keven");
alert(a.getName());//Parent child object said Keven
alert(A.prototype.Name); //John
alert(A.getName()) // type error, undefine is not a function

最后一条报错,A并没有继承Parent的getName方法,此处可以理解Parent.getName为静态方法,不会被子类继承

var Parent = function(){this.getName=function(){return "Parent child object said:"+this.Name};};
var b = new Parent();
Object.defineProperty(b,"Name",{value:"John",writable:true});
Parent.prototype.getName = function(){return "Parent sard:" + this.Name;};
Parent.getName = function(){return this.Name;};
Parent.prototype.setName = function(value){this.Name = value;};
var A = function(){this.getName=function(){return "A object said:"+this.Name};};
A.prototype= b;
var a = new A();
alert(a.Name); // John
a.setName("Keven");
alert(a.getName());//A object said Keven
alert(A.prototype.Name); //John
alert(A.getName()) // type error, undefine is not a function

从第二个alert可以看出,当子类有同名方法时优先调用子类对象上的方法getName,总结下来方法查找的顺序为:子对象方法>父对象方法>父原型方法,一句话为越近越亲,层层往上

以上简单试验了一下js里的原型方法,类方法,和对象方法在继承之后的执行顺序,下节一起探讨下原型链模型

js 继承 对象方法与原型方法的更多相关文章

  1. JS中的phototype JS的三种方法(类方法、对象方法、原型方法)

    JS中的phototype是JS中比较难理解的一个部分 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个 ...

  2. js遍历对象的属性和方法

    js遍历对象的属性和方法 一.总结 二.实例 练习1:具有默认值的构造函数 实例描述: 有时候在创建对象时候,我们希望某些属性具有默认值 案例思路: 在构造函数中判断参数值是否为undefined,如 ...

  3. JavaScript中的类方法、对象方法、原型方法

    类方法:也叫函数方法,在JavaScript中函数也是一个对象,所以可以为函数添加属性以及方法: 对象方法:包括构造函数中的方法以及其原型上面的方法: 原型方法:一般用于对象实例共享,在原型上面添加该 ...

  4. 【JavaScript】类继承(对象冒充)和原型继承__深入理解原型和原型链

    JavaScript里的继承方式在很多书上分了很多类型和实现方式,大体上就是两种:类继承(对象冒充)和原型继承. 类继承(对象冒充):在函数内部定义自身的属性的方法,子类继承时,用call或apply ...

  5. js继承的几种实现方法

    一.用function实现: function Person(name) { this.name = name; } Person.prototype.getName = function() { r ...

  6. JS遍历对象的几种方法

    几天前一个小伙伴问我 Object.getOwnPropertyNames() 是干什么用的 平时还真没有使用到这个方法,一时不知如何回答 从方法名称来分析,应该是返回的是对象自身属性名组成的数组 那 ...

  7. JS判断对象是否存在的方法

    Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言描述的算法如下: ...

  8. 【转】js获取对象的所有属性和方法

    //有时候需要知道一个js对像的所有属性和方法来帮助调试,下面是再网上找到的一个比较给力的方法 function displayProp(obj){ var names=""; f ...

  9. js继承的实现(原型/链、函数伪装)

    一.原型继承父类的实例 //父类及其原型属性/方法 function SuperType () { this.name = ['zc','ls','ww']; } SuperType.prototyp ...

随机推荐

  1. opengl es中不同的绘制方式

    opengl es中不同的绘制方式 转载请保留出处:http://xiaxveliang.blog.163.com/blog/static/297080342013467344263/ 1. GL_P ...

  2. The note of Vue.js

    In computed field, increment operator is not supported.

  3. eclipse各版本介绍

    记录下吧!以免以后下载时候又不知道下载那个: Eclipse IDE for Java Developers 是为java开发的 Eclipse IDE for Java EE Developers  ...

  4. zookeeper3.3.6 伪分布式安装

    下载地址(http://zookeeper.apache.org/releases.html#download)   一:下载zookeeper的安装包,解压,进入到zk的目录文件,进入conf目录 ...

  5. mysql 事件

    经常要周期性的执行某一个命令或者SQL语句.mysql事件,mysql的版本是5.1以上. 首先要查看事件是否开启了, SHOW VARIABLES LIKE 'event_scheduler'; S ...

  6. php定界符<<<EOF讲解(转)

    Heredoc技术.可用来输出大段的html和javascript脚本 1.PHP定界符的作用就是按照原样,包括换行格式什么的,输出在其内部的东西: 2.在PHP定界符中的任何特殊字符都不需要转义:  ...

  7. Delphi容器类之---TOrderedList、TStack、TQueue、TObjectStack、TObjectQueue

    TOrderedList.TStack.TQueue Contnrs单元还定义了其他三个类:TOrderedList.TStack.TQueue TOrderedList TOrderedList = ...

  8. Linux内核源代码获取教程

    Linux内核源代码获取方法 什么叫Linux 什么叫Linux内核 Linux内核源代码的获取 什么叫Linux? Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UN ...

  9. 移动端webapp自适应实践(css雪碧图制作小工具实践)图文并茂

    为什么要写这个 以前写过关于webapp自适应屏幕的文章(链接),不过写的大多数群众看不懂,所以来个图文并茂的版本.虽然只是一个简单的页面,不过在做的过程中也遇到了一些问题,也算是好事吧! 该示例gi ...

  10. ethhdr、ether_header、iphdr、tcphdr、udphdr 结构介绍

    转自:http://blog.csdn.net/petershina/article/details/8573853 ************************eth的结构*********** ...