js原型链与继承解析(初体验)


Posted in Javascript onMay 09, 2016

js原型链与继承解析(初体验)

首先定义一个对象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

js原型链与继承解析(初体验)

在这里,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

js原型链与继承解析(初体验)

构造函数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

以上这篇js原型链与继承解析(初体验)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
JS获取整个页面文档的实现代码
Dec 15 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
javascript时间差插件分享
Jul 18 Javascript
打造自己的jQuery插件入门教程
Sep 23 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
如何将JavaScript将数组转为树形结构
Jun 02 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
May 09 #Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 #Javascript
JavaScript中的prototype原型学习指南
May 09 #Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 #Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 #Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 #Javascript
AngularJS控制器继承自另一控制器
May 09 #Javascript
You might like
PHP下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
浅谈javascript 面向对象编程
2009/10/28 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
JavaScript知识点整理
2015/12/09 Javascript
js代码实现点击按钮出现60秒倒计时
2021/01/28 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
Vue中qs插件的使用详解
2020/02/07 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
python使用分治法实现求解最大值的方法
2015/05/12 Python
windows环境下tensorflow安装过程详解
2018/03/30 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
QML使用Python的函数过程解析
2019/09/26 Python
PyTorch中permute的用法详解
2019/12/30 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
西雅图的买手店:Totokaelo
2019/10/19 全球购物
环境工程求职简历的自我评价范文
2013/10/24 职场文书
求职信模板怎么做
2014/01/26 职场文书
秋季开学典礼主持词
2014/03/19 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
初中英语教学随笔
2015/08/15 职场文书