浅谈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 相关文章推荐
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
jquery 插件学习(六)
Aug 06 Javascript
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
JavaScript事件委托实例分析
May 26 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 Javascript
详解Vue调用手机相机和相册以及上传
May 05 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 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
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
python通过http下载文件的方法详解
2019/07/26 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
python实现四人制扑克牌游戏
2020/04/22 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
值传递还是引用传递
2015/02/08 面试题
延安红色之旅心得体会
2014/10/07 职场文书
大学生年度个人总结
2015/02/15 职场文书
初中美术教学反思
2016/02/17 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js
解决Go gorm踩过的坑
2021/04/30 Golang
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang