浅谈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 相关文章推荐
js innerHTML 的一些问题的解决方法
Jun 22 Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
说说JSON和JSONP 也许你会豁然开朗
Sep 02 Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
Vue.js中数组变动的检测详解
Oct 12 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
Angular5.1新功能分享
Dec 21 Javascript
vue-prop父组件向子组件进行传值的方法
Mar 01 Javascript
JS实现电商商品展示放大镜特效
Jan 07 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
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
yii中widget的用法
2014/12/03 PHP
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
python解析文件示例
2014/01/23 Python
使用Python对MySQL数据操作
2017/04/06 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
Python 绘制可视化折线图
2020/07/22 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
介绍一下如何优化MySql
2016/12/20 面试题
应届生法律求职信
2013/10/22 职场文书
软件工程专业推荐信
2013/10/28 职场文书
高中同学聚会邀请函
2014/01/11 职场文书
单身联谊活动方案
2014/01/29 职场文书
思想品德课教学反思
2014/02/10 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
Vue3.0 手写放大镜效果
2021/07/25 Vue.js
mysql幻读详解实例以及解决办法
2022/06/16 MySQL