JavaScript原型链与继承操作实例总结


Posted in Javascript onAugust 24, 2018

本文实例讲述了JavaScript原型链与继承操作。分享给大家供大家参考,具体如下:

1. JavaScript继承

JavaScript继承可以说是发生在对象与对象之间,而原型链则是实现继承的主要方法;

1.1 原型链

利用原型让一引用类型继承另一个引用类型的属性和方法。

构造函数中有个prototype(每个函数中都有),指向他的原型对象,每个原型对象中也有一个constructor属性,指向原构造函数。通过构造函数创建的新对象中都有一个无法直接访问的[[proto]]属性,使得对象也指向构造函数的原型。这使得对象也获得了原型中的方法和属性。

JavaScript原型链与继承操作实例总结

当访问对象中的属性或方法时,如果对象中没有该属性或方法,则会向上一级原型对象中寻找该属性或方法,如果找了,就返回该属性,若没有则继续向上面的原型中去查找该属性。

1.2 构造函数的原型链继承

function Father(name,age){
    this.name=name;
    this.age=age;
}
Father.prototype.eat=function(){ //给原型添加eat方法
    console.log(this.name+"吃饭了");
}
var f1=new Father("李四",20); //创建新对象f1, [[proto]]指向父原型
function Son(){
}
Son.prototype=f1; //将子构造函数的prototype指向了父类型的对象,这里实现了——继承
var s1=new Son(); // 创建子对象
s1.eat(); //李四吃饭了

运行结果:

JavaScript原型链与继承操作实例总结

注意:

①:当 Son.prototype指向Father的时候,他就已经是父类型的Son了。

②:s1.eat();s1中没有此方法,该方法在父类型原型中,当s1访问时,现在s1中查找,若没有则向他指向的原型中去查找该方法,若还是没有,则继续往上面的原型中查找。这样就形成了一条原型链。

③:通过原型链实现了继承。

简写:

var f1=new Father;
var Son.prototype=f1
//可以直接简写成:
var Son.prototypr=new Father(); //这个时候可以传值进去 ,其余地方无法传值

JavaScript原型链与继承操作实例总结

1.3 默认顶端原型

默认的顶端原型:

是当所有类型都没有指明继承某个类型时,则默认继承Object类型。

objec中也有prototype指向他的object原型,object中也有[[proto]],只不过他指向的是null;可忽略。

object的很多方法,都是存在object的原型中;

在原型链中查找,从当前位置一直往上访问,直到原型链顶端位置。

1.4 测试数据

typeof 测数据的类型,最好只来测试基本类型数据,应为除了基本类型外全是返回object。

console.log(typeof 123) //number
console.log(typeof "ccsa ") //string

instnaceof 测试一个对象属不属于其父类对象的类型

function Father(name){
}
var f1=new Father();
console.log(f1 instanceof Father); //true

运行结果:

JavaScript原型链与继承操作实例总结

isPrototypeOf(要测的对象) 专属于原型对象的方法,判断该对象在不在该原型链上,使用:父类构造函数.prototype.isPrototypeOf(对象)

function Father(){
}
function Son(){
}
Son.prototype=new Father;
var s1=new son();
console.log(Father.prototype.isPrototypeOf(s1));  //true
console.log(Object.prototype.isPrototypeOf(s1));  //true

1.5 借调

借调:借用构造函数调用冒充继承,借调实现的继承,不是真正的继承,只是借用构造函数中的属性或方法。

apply,call。

function Fn(name,age){
   this.name=name;
   this.age=20;
}
function Son(name,age,sex){
   Fn.call(this,name,age)        //借调继承Fn;
   this.sex=sex;
};
var s1=new Son("李四",20,"男");
console.log(s1);

JavaScript原型链与继承操作实例总结

注意:借调缺点:call是冒充继承,不是真正的继承,所以不能访问原构造函数的原型中的属性或方法。

1.6 组合继承

组合构造函数的借调继承和原型的继承优点:

function Fn(name,age){
   this.name=name; //构造函数的属性多样
   this.age=age;
   if((typeof Fn.prototype.eat)!="funciton"){ //判断语句中是否有该方法,没有则创建
    Fn.prototype.eat=function(){ //原型的方法共享
      console.log(this.name+"吃了饭");
    }
   }
}
function Son(name,age,sex){ //创建子类构造函数
   Fn.call(this,name,age) //借调Fn()的属性
   this.sex=sex;
};
Son.prototype=new Fn(); //Son.prototype指向父类对象,实现了继承,所以能够调用eat方法,
var s1=new Son("李四",20,"男"); //若没有继承,单单的使用call借调Fn继承,子类实例s1无法调用eat方法
callconsole.log(s1); //因为call不是真正的继承
s1.eat();

注意:Son.prototype=new Fn(); 这条语句 实现了Son继承父类型Fn;Son指向的是父类型创建的对象,而父类型的对象有自己的属性,并且又成为了子类型的原型,那么其中的属性不就成了共享的了吗。 但是前面还有用到Fn.call( ),这条语句已经借调了父类构造函数属性,相当于覆盖了子类型原型的属性。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS获取父节点方法
Aug 20 Javascript
js实现兼容IE6与IE7的DIV高度
May 13 Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
js触发onchange事件的方法说明
Mar 08 Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
JavaScript实现刷新不重记的倒计时
Aug 10 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 #Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 #Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 #Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 #Javascript
Vue源码解读之Component组件注册的实现
Aug 24 #Javascript
element-ui 关于获取select 的label值方法
Aug 24 #Javascript
微信小程序用户信息encryptedData详解
Aug 24 #Javascript
You might like
php中call_user_func函数使用注意事项
2014/11/21 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
python 图片验证码代码
2008/12/07 Python
videocapture库制作python视频高速传输程序
2013/12/23 Python
使用python绘制常用的图表
2016/08/27 Python
python Pandas 读取txt表格的实例
2018/04/29 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
Spartoo芬兰:欧洲最大的网上鞋店
2016/08/28 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
为什么UNION ALL比UNION快
2016/03/17 面试题
英文自荐信格式
2013/11/28 职场文书
食品销售计划书
2014/04/26 职场文书
经典演讲稿汇总
2014/05/19 职场文书
商务代表岗位职责
2015/02/15 职场文书
司机岗位职责范本
2015/04/10 职场文书
工作收入证明模板
2015/06/12 职场文书
小学运动会加油词
2015/07/18 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电