浅谈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实现的超出屏幕时把固定层变为定位层的代码
Feb 23 Javascript
封装好的一个万能检测表单的方法
Jan 21 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 Javascript
Jquery基础教程之DOM操作
Aug 19 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 Javascript
js的对象与函数详解
Jan 21 Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 17 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 Javascript
Vue中key的作用示例代码详解
Jun 10 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中动态HTML的输出技术
2006/10/09 PHP
php数组应用之比较两个时间的相减排序
2008/08/18 PHP
php处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
jquery动态加载js三种方法实例
2013/08/03 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
Javascript简写条件语句(推荐)
2016/06/12 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
简介Django中内置的一些中间件
2015/07/24 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
美国在线购物频道:Shop LC
2019/04/21 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
数控专业大学生的自我鉴定
2013/11/13 职场文书
护士的岗位职责
2013/12/04 职场文书
丑小鸭教学反思
2014/02/03 职场文书
公司门卫岗位职责
2014/03/15 职场文书
社团活动总结
2014/04/28 职场文书
读书之星事迹材料
2014/05/12 职场文书
读群众路线的心得体会
2014/09/03 职场文书
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL