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 ...
随机推荐
- 【iBeacon】iBeacon前沿初探技术备忘
iBeacon是工作在蓝牙4.0(BLE)硬件下的一种协议,属于蓝牙4.0广播协议的一种,通过该协议和一个蓝牙模块可以实现非接触的身份识别.位置检测等. How does BLE communicat ...
- appium 自动化测试之知乎Android客户端
appium是一个开源框架,相对来说还不算很稳定.转载请注明出处!!!! 前些日子,配置好了appium测试环境,至于环境怎么搭建,参考:http://www.cnblogs.com/tobecraz ...
- 「C++11」Lambda 表达式
维基百科上面对于 lambda 的引入是如下描述的: 在标准 C++,特别是当使用 C++ 标准程序库算法函数诸如 sort 和 find.用户经常希望能够在算法函数调用的附近定义一个临时的述部函数( ...
- 循环获取DataTable
DataTable ddtt = tq.Table("); string strName = ""; //DataTable ddtt = dataSet.Tables[ ...
- linux vim 插入行号
1 在文本中插入行号 最近有朋友提到某编辑器有一个可以插入行号的插件,问Vim有没有办法可以在文章中插入行号.%$^&*#8~#$@#!--让我们看一下有多少种方式可以在vim中插入行号或数字 ...
- JDBC连接数据库
JDBC连接数据库 1.加载JDBC驱动程序. Class.forName("com.mysql.jdbc.Driver"); 建立连接,. Connection conn = D ...
- MySQL Fabric和MyBatis的整合过程中遇到的问题
这是我昨天在整合MySQL Fabric和MyBatis时遇到的问题,花了大半天才解决的问题,解决的过程中在网上查找了很久,都没有找到解决的方案.现在记下来,希望能够帮助有同样问题的朋友.如果各位朋友 ...
- WPF 如何画一颗心
如何用WPF画一个心. MainWindow.xaml <Window x:Class="Heart.MainWindow" xmlns="http://schem ...
- vim简明教程
在shell中新建一个文件 # vim a.txt vim有三种模式:一般模式.插入模式.底行模式 三种工作模式 1.命令模式 移动光标 hjkl yy 复制 nyy 从光标向下复制n行 0 移动光标 ...
- ng1.3+表单验证<AngularJs>
前一篇文章说过,ng1.3+以后对于表单验证有了优化,它不再需要一个详细的表达式状态创建元素显示或隐藏. 例如:我们在ng1.3之前的版本都需要如下写法: <div class="er ...