浅谈javascript原型链与继承


Posted in Javascript onJuly 13, 2015

js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解。

浅谈javascript原型链与继承

      首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询obj的原型,我们通过判断obj的原型是否与Object.prototype相等来证明是否存在obj的原型,答案返回true,所以存在。然后我们定义一个函数foo(),任何一个函数都有它的prototype对象,即函数的原型,我们可以在函数的原型上添加任意属性,之后通过new一个实例化的对象可以共享其属性(下面的两个例子会详细介绍)。

function foo(){}
foo.prototype.z = 3;
var obj = new foo();
obj.x=1;
obj.y=2;
obj.x //1
obj.y //2
obj.z //3
typeof obj.toString; //function
obj.valueOf(); // foo {x: 1, y: 2, z: 3}
obj.hasOwnProperty('z'); //false

浅谈javascript原型链与继承

在这里,obj的原型(_proto_)指向foo函数的prototype属性,foo.prototype的原型指向Object.prototype,原型链的末端则为null,通过hasOwnProperty来查看z属性是否是obj上的,显示false,则obj上本没有z属性,但通过查找其原型链,发现在foo.prototype上有,所以obj.z=3,并且对于首例上obj.valueOf()以及toString都是Object.prototype上的,所以任何一个对象都有这两个属性,因为任何一个对象的原型都是Object.prototype.当然除了以下一个特例,

var obj2 = Object.create(null);
obj2.valueOf(); //undefined

Object.create()为创建一个空对象,并且此对象的原型指向参数。下面一个综合实例向大家展示一下如何实现一个class来继承另外一个class

//声明一个构造函数Person
function Person(name,age){
  this.name = name;
  this.age = age;
}
Person.prototype.hi = function (){
  console.log('Hi,my name is ' + this.name +',my age is '+this.age);
};
Person.prototype.LEGS_NUM=2;
Person.prototype.ARMS_NUM=2;
Person.prototype.walk = function (){
  console.log(this.name+' is walking !');
};
function Student(name,age,classNum){
  Person.call(this,name,age);
  this.classNum = classNum;
}
//创建一个空对象
Student.prototype = Object.create(Person.prototype);
//constructor指定创建一个对象的函数。
Student.prototype.constructor = Student;
Student.prototype.hi = function (){
  console.log('Hi,my name is ' + this.name +',my age is '+this.age+' and my class is '+this.classNum);
};
Student.prototype.learns = function (sub){
  console.log(this.name+' is learning '+sub);
};
//实例化一个对象Bosn
var Bosn = new Student('bosn',27,'Class 3');
Bosn.hi(); //Hi,my name is bosn,my age is 27 and my class is Class 3
Bosn.LEGS_NUM; //2
Bosn.walk(); //bosn is walking !
Bosn.learns('Math'); //bosn is learning Math

浅谈javascript原型链与继承

构造函数Person与Student的this指向实例化的对象(Bosn),并且此对象的原型指向构造器的prototype。

我们用Object.create()方法来创建一个空对象,此对象的原型事项Person.prototype,这样写的好处是我们可以在不影响Person.prototype属性的前提下可以自己创建Studnet.prototype的任意属性,并且可以继承Person.prototype上原有的属性,因为子类Student是继承基类Person的。如果直接写Person.prototype = Student.prototype,那他两同时指向一个对象,在给Student.prototype添加属性的同时,Person的原型链上也会增加同样的属性。

对于构造函数Student里面的call方法,里面的this指向新创建的Student的实例化的对象,并通过call来实现继承。

Student.prototype.constructor = Student,这句话的含义是指定Student为创建Student.prototype这个对象的函数,如果不写这句话,该对象的函数还是Person。

对于继承,一共有三种方式来实现,

function Person(name,age){
  this.name = name;
  this.age = age;
}
function Student(){

}
Student.prototype = Person.prototype; //1
Student.prototype = Object.create(Person.prototype); //2
Student.prototype = new Person(); //3

第一种,刚刚在上面已经说过了,直接这样写会让子类和基类同时指向bosn实例;

第二种,恰到好处的避开这一点,并很好地实现继承,让实例先查询子类,若没有相应属性,再查询基类;

第三种,虽然也实现了继承,但调用了Person这个构造函数,这个例子中此构造函数有两个参数name和age,但这第三种什么也没有传,并没有实例化。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
JS获取DropDownList的value值与text值的示例代码
Jan 07 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 Javascript
JS实现兼容性较好的随屏滚动效果
Nov 09 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
详解elementUI中input框无法输入的问题
Apr 27 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 #Javascript
javascript作用域问题实例分析
Jul 13 #Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 #Javascript
jquery实现图片上传之前预览的方法
Jul 11 #Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 #Javascript
javascript中JSON对象与JSON字符串相互转换实例
Jul 11 #Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 #Javascript
You might like
PHP出错界面
2006/10/09 PHP
php empty函数判断mysql表单是否为空
2010/04/12 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
在HTML中使用JavaScript的两种方法
2020/12/24 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
Python OS模块常用函数说明
2015/05/23 Python
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
python调用c++传递数组的实例
2019/02/13 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
汉语专业应届生求职信
2013/10/01 职场文书
公司联欢会策划方案
2014/05/19 职场文书
见习期个人总结
2015/03/05 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书