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. 上个项目的一些反思 III

    离线缓存 之前的项目因为实时性要求比较高,所以一打开客户端,就开始做网络请求.现在想想,是没有做内容的离线缓存.这个问题,我没意识到.产品经理也没有意识到... 我觉得Archiver,来做比较合适, ...

  2. 卸载linux Mint自带jdk并安装最新jdk

    查看安装的软件包sudo dpkg --list | grep -i jdk 删除jdksudo apt-get purge openjdk* 删除其他的包sudo apt-get purge ice ...

  3. docker swarm-mode

    root@node1:~# docker versionClient: Version: 1.12.3 API version: 1.24 Go version: go1.6.3 Git commit ...

  4. MySQL 专用备份软件参考

    1.MySQL Backup Tool   免费(需要安装 .NET 3.5)  https://sourceforge.net/projects/mysqlbutool/?source=typ_re ...

  5. 设计模式--代理模式Proxy(结构型)

    一.代理模式 为其他对象提供一种代理以控制对这个对象的访问. 代理模式分为四种: 远程代理:为了一个对象在不同的地址空间提供局部代表.这样可以隐藏一个对象存在于不同地址空间的事实. 虚拟代理:根据需要 ...

  6. DispatcherServlet 和 ContextLoaderListener 的关系,到底用哪个?

    我们先看下这两个东东的配置方法: 对于contextConfigLocation参数,有2个地方可以配置: 1)context-param 是全局性配置 2)servlet下的init-param 是 ...

  7. log4net 添加日志

    1.  在config里配置一下 <configSections>    <section name="log4net" type="System.Co ...

  8. Android JNI总结

    @Dlive 0x01 JNI介绍 JNI是Java Native Interface的缩写,JNI不是Android专有的东西,它是从Java继承而来,但是在Android中,JNI的作用和重要性大 ...

  9. maven打包

    1.利用maven-jar-plugin <build> <plugins> <!-- The configuration of maven-jar-plugin --& ...

  10. Html 5 Web Storage

    HTML5 中使用Web Storage 技术进行本地存储,能够在Web 客户端进行数据存储.WebStorage 曾今属于HTML5的规范,目前已经被独立出来形成单独的规范体系.简单来说使用Web本 ...