js 继承 对象方法与原型方法
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 继承 对象方法与原型方法的更多相关文章
- JS中的phototype JS的三种方法(类方法、对象方法、原型方法)
JS中的phototype是JS中比较难理解的一个部分 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个 ...
- js遍历对象的属性和方法
js遍历对象的属性和方法 一.总结 二.实例 练习1:具有默认值的构造函数 实例描述: 有时候在创建对象时候,我们希望某些属性具有默认值 案例思路: 在构造函数中判断参数值是否为undefined,如 ...
- JavaScript中的类方法、对象方法、原型方法
类方法:也叫函数方法,在JavaScript中函数也是一个对象,所以可以为函数添加属性以及方法: 对象方法:包括构造函数中的方法以及其原型上面的方法: 原型方法:一般用于对象实例共享,在原型上面添加该 ...
- 【JavaScript】类继承(对象冒充)和原型继承__深入理解原型和原型链
JavaScript里的继承方式在很多书上分了很多类型和实现方式,大体上就是两种:类继承(对象冒充)和原型继承. 类继承(对象冒充):在函数内部定义自身的属性的方法,子类继承时,用call或apply ...
- js继承的几种实现方法
一.用function实现: function Person(name) { this.name = name; } Person.prototype.getName = function() { r ...
- JS遍历对象的几种方法
几天前一个小伙伴问我 Object.getOwnPropertyNames() 是干什么用的 平时还真没有使用到这个方法,一时不知如何回答 从方法名称来分析,应该是返回的是对象自身属性名组成的数组 那 ...
- JS判断对象是否存在的方法
Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言描述的算法如下: ...
- 【转】js获取对象的所有属性和方法
//有时候需要知道一个js对像的所有属性和方法来帮助调试,下面是再网上找到的一个比较给力的方法 function displayProp(obj){ var names=""; f ...
- js继承的实现(原型/链、函数伪装)
一.原型继承父类的实例 //父类及其原型属性/方法 function SuperType () { this.name = ['zc','ls','ww']; } SuperType.prototyp ...
随机推荐
- BZOJ 2079: [Poi2010]Guilds
Description 问一个图是否有二染色方案,满足每个点都跟他颜色不用的点有连边. Sol 结论题. 除了只有一个点,否则任何图都能被二染色. Code /******************** ...
- ContextMenuStrip 类
表示快捷菜单 命名空间: System.Windows.Forms程序集: System.Windows.Forms(位于 System.Windows.Forms.dll) 继承层次结构 Sy ...
- scenejs的一点Cameras小笔记
视图模式: 一如官网所见,这个cameras 是控制的视口的东西. 他有如下4个模式 1.orbit模式 鼠标拖中物体,切换视口观察物体,鼠标滚轮变换, 放大缩小可视范围. 2.orbit/spin模 ...
- set和map的简单用法
.set(集合)map(映射)都属于关联类容器 都支持查询一个元素是否存在并能够有效地获取元素. set集合的元素总是从小到大排列,set集合通过二分查找树实现.它具备以下两个特点: ①:独一无二的元 ...
- js之iframe子页面与父页面通信
iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...
- View & Controller 一些方法的执行顺序
一. 加载视图 init-初始化程序 viewDidLoad-加载视图 viewWillAppear-UIViewController对象的视图即将加入窗口时调用: viewDidApper-UI ...
- MySQL存储过程动态SQL语句的生成
用Mysql存储过程来完成动态SQL语句,使用存储过程有很好的执行效率: 现在有要求如下:根据输入的年份.国家.节假日类型查询一个节假日,我们可以使用一般的SQL语句嵌入到Java代码中,但是执行效率 ...
- heightcharts
title:标题 subtitle:子标题 data:eval(dataList)//数据格式转换
- 集合 LinkedList、ArrayList、Set、Treeset
LinkedList中特有的方法: 1:方法介绍 addFirst(E e) addLast(E e) getFirst() getLast() removeFirst() removeLast() ...
- angular1.x的简单介绍(二)
首先还是要强调一下DI,DI(Denpendency Injection)伸手获得,主要解决模块间的耦合关系.那么模块是又什么组成的呢?在我看来,模块的最小单位是类,多个类的组合就是模块.关于在根模块 ...