javascript基于原型链的继承及call和apply函数用法分析


Posted in Javascript onDecember 15, 2016

本文实例讲述了javascript基于原型链的继承及call和apply函数用法。分享给大家供大家参考,具体如下:

1. 继承是面向对象编程语言的一个重要特性,比如Java中,通过extend可以实现多继承,但是JavaScript中的继承方式跟JAVA中有很大的区别,JS中通过原型链的方式实现继承。

(1)对象的原型:因为JS中,函数也是对象,因此我们先从对象出发。什么是对象的原型,原型的定义为:

所有通过对象直接量创建的对象都具有同一个函数原型,并且可以通过Object.prototype获得对原型对象的引用,通过关键字new和构造函数调用创建的对象的原型就是构造函数的prototype属性的值。

注:没有原型的对象不多,Object.prototype对象是没有原型的。

(2)创建对象的原型

比如这里有一个Student对象和一个Person对象,其中,Student.prototype指向Person.prototype

对于创建对象完全不同的两种方法:

i)Student.prototype=Person.prototype

这种方法,创建Student的prototype对象,如果改变Student.prototype的值的时候,Person.prototype也会同时改变,为了避免这种情况,我们应采用其他方式;

ii)Student.prototype=Object.create(Person.prototype)

这种方法,创建的Student的Prototype对象,在改变Student.prototype的属性或者方法时,不会同时去改变Person.prototype的属性。

(3)基于继承的赋值操作

例1:

var o={
  x:1
}
o.x=2;
alert(o.x);//输出o.x=2

例2:

var o={
  x:1
}
var osp=Object.create(o);
alert(osp.x);//输出1
osp.x=2;
alert(osp.x);//输出2

i)从上面的两个例子中,我们大概可以看出来,如果对象osp上有x属性,那么无论是取值,还是赋值,都是基于osp对象上的直接属性x,如果osp对象上没有x属性,那么会沿着prototype原型链查找,直到找到一个包含x属性的prototype属性链上的对象,如果osp对象所有prototype原型链上都没有包含x属性,那么返回underfined。

ii)o对象属性的赋值,被视为在osp对象上直接进行,不会影响原型链上的属性。比如上例中的osp.x=2的赋值是在osp对象上,不会影响osp的原型对象o。

2. 举一些对象中继承的例子

(1)我们学过可以用instanceof来进行类型判断,instanceof方法本来就是基于原型链的。

比如例3:

[1,2] instanceof Array    //返回true
[1,2] instanceof Object   //返回true

这个例子说明Array.prototype也是继承于对象而来。

(2)函数中的组合继承问题

function student(name,age){
  this.name=name;
  this.age=age;
}
student.prototype.age=function(){
  return this.age;
}
function beststudent(name,age){
  student.call(this,age);
  return this.name;
}
beststudent.prototype=new student();
  alert(beststudent("yu",2))//输出2
}

3. call函数和apply函数

call函数和apply函数用于改变函数中this的指向,用于对象A调用对象B的方法,call函数和apply函数的区别在于传参的类型不同,apply(x,y),x表示的是执行函数的对象,而y则表示执行函数所需要调用的参数,是一个数组,并且可以传参为argument数组,而call(x,y)中的y之后的变量则是实实在在的变量;

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

Javascript 相关文章推荐
JavaScript 常见对象类创建代码与优缺点分析
Dec 07 Javascript
javascript一些实用技巧小结
Mar 18 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
Sep 27 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
layui表格实现代码
May 20 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
JS实现动态添加外部js、css到head标签的方法
Jun 05 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 Javascript
移动端脚本框架Hammer.js
Dec 15 #Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 #Javascript
浅谈javascript alert和confirm的美化
Dec 15 #Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 #Javascript
原生JS实现图片轮播切换效果
Dec 15 #Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 #Javascript
利用vue写todolist单页应用
Dec 15 #Javascript
You might like
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
php查询相似度最高的字符串的方法
2015/03/12 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
Firefox window.close()的使用注意事项
2009/04/11 Javascript
将CKfinder整合进CKEditor3.0的新方法
2010/01/10 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
快速使用node.js进行web开发详解
2017/04/26 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
三分钟英语演讲稿
2014/04/24 职场文书
活动总结报告格式
2014/05/09 职场文书
创先争优活动承诺书
2014/08/30 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
拙作再改《我的收音机情缘》
2022/04/05 无线电
Java对文件的读写操作方法
2022/04/29 Java/Android