浅谈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 相关文章推荐
ext读取两种结构的xml的代码
Nov 05 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
微信小程序入门教程
Nov 18 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
详解如何在JS代码中消灭for循环
Dec 11 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
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+SqlServer实现分页显示
2006/10/09 PHP
聊天室php&mysql(五)
2006/10/09 PHP
供参考的 php 学习提高路线分享
2011/10/23 PHP
php常量详细解析
2015/10/27 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
js调用css属性写法
2013/09/21 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
python缩进区别分析
2014/02/15 Python
Python实现的Kmeans++算法实例
2014/04/26 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
Django实现文件上传和下载功能
2019/10/06 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
建筑工程技术应届生自荐信
2013/09/27 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
2014高考励志标语
2014/06/05 职场文书
电话客服工作职责
2014/07/27 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
先进班组材料范文
2014/12/25 职场文书
社区国庆节活动总结
2015/03/23 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏