浅谈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 操作Word和Excel的实现代码
Oct 26 Javascript
jquery 操作单选框,复选框,下拉列表实现代码
Oct 27 Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 Javascript
js创建对象的区别示例介绍
Jul 24 Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
深入理解JQuery中的事件与动画
May 18 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 Javascript
详解如何在Vue项目中导出Excel
Apr 19 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去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
php查询及多条件查询
2017/02/26 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
script标签属性type与language使用选择
2012/12/02 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
Python实现简单截取中文字符串的方法
2015/06/15 Python
Python制作简单的网页爬虫
2015/11/22 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
大三预备党员入党思想汇报
2014/01/08 职场文书
清洁工岗位职责
2014/01/29 职场文书
社区创先争优承诺书
2014/08/30 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
2014年市场部工作总结
2014/11/25 职场文书
2015年教师节主持词
2015/07/03 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android
python 镜像环境搭建总结
2022/09/23 Python