浅谈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 打印页面代码
Mar 24 Javascript
js读取本地excel文档数据的代码
Nov 11 Javascript
一个轻量级的javascript库 pj介绍
Dec 19 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
Vue中的$set的使用实例代码
Oct 08 Javascript
原生js实现下拉框选择组件
Jan 20 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
咖啡界又出新概念,无需咖啡豆的分子咖啡
2021/03/03 咖啡文化
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
php发送邮件的问题详解
2015/06/22 PHP
php图像处理类实例
2015/07/28 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
Laravel5.1框架路由分组用法实例分析
2020/01/04 PHP
Auntion-TableSort国人写的一个javascript表格排序的东西
2007/11/12 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
果断收藏9个Javascript代码高亮脚本
2016/01/06 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
Angular多选、全选、批量选择操作实例代码
2017/03/10 Javascript
详解Vue中过度动画效果应用
2017/05/25 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
vue 项目软键盘回车触发搜索事件
2020/09/09 Javascript
[02:52]DOTA2新手基础教程 米波
2014/01/21 DOTA
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
python实现类之间的方法互相调用
2018/04/29 Python
python实现录音小程序
2020/10/26 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
原生python实现knn分类算法
2019/10/24 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
一月红领巾广播稿
2014/02/11 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
家庭贫困证明
2014/09/23 职场文书