浅谈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 相关文章推荐
javascript 动态调整图片尺寸实现代码
Dec 28 Javascript
Javascript变量函数浅析
Sep 02 Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
Vue服务器渲染Nuxt学习笔记
Jan 31 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
node.js事件轮询机制原理知识点
Dec 22 Javascript
详细分析vue表单数据的绑定
Jul 20 Javascript
javaScript Array api梳理
Mar 31 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中一个完整表单处理实现代码
2011/11/10 PHP
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
Python实现扩展内置类型的方法分析
2017/10/16 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
python视频按帧截取图片工具
2019/07/23 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
Django 路由层URLconf的实现
2019/12/30 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
华润集团网上药店:健一网
2016/09/19 全球购物
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
旧时光糖果:Old Time Candy
2018/02/05 全球购物
公司培训心得体会
2014/01/03 职场文书
房地产财务管理制度
2014/02/02 职场文书
化妆品促销方案
2014/02/24 职场文书
解除劳动关系协议书2篇
2014/11/28 职场文书
保安辞职申请书应该怎么写?
2019/07/15 职场文书
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python