浅谈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 EasyUI API 中文文档 - Menu菜单
Oct 03 Javascript
javascript在myeclipse中报错的解决方法
Oct 29 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 Javascript
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 23 Javascript
React 高阶组件HOC用法归纳
Jun 13 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
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
JavaScript数组排序的六种常见算法总结
2020/08/18 Javascript
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
在阿里云服务器上配置CentOS+Nginx+Python+Flask环境
2016/06/18 Python
python爬虫使用cookie登录详解
2017/12/27 Python
Python hashlib模块用法实例分析
2018/06/12 Python
python 伯努利分布详解
2020/02/25 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
详解Python 最短匹配模式
2020/07/29 Python
公司管理建议书范文
2014/03/12 职场文书
2014婚礼司仪主持词
2014/03/14 职场文书
主要负责人任命书
2014/06/06 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
九华山导游词
2015/02/03 职场文书
个人学习总结范文
2015/02/15 职场文书
写给媳妇的检讨书
2015/05/06 职场文书