浅谈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 相关文章推荐
jtable列中自定义button示例代码
Nov 21 Javascript
AngularJS语法详解
Jan 23 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
Aug 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
PHP简介
2006/10/09 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
python进阶教程之词典、字典、dict
2014/08/29 Python
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
简单的编程0基础下Python入门指引
2015/04/01 Python
python实现简单神经网络算法
2018/03/10 Python
python斐波那契数列的计算方法
2018/09/27 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
python 使用while循环输出*组成的菱形实例
2020/04/12 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
Pygame的程序开始示例代码
2020/05/07 Python
python2和python3哪个使用率高
2020/06/23 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
2015年语文教师工作总结
2015/05/25 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL
QT与javascript交互数据的实现
2021/05/26 Javascript
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python
Node与Python 双向通信的实现代码
2021/07/16 Javascript
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android