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 相关文章推荐
ajax与302响应代码测试
Oct 23 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
Nov 29 Javascript
JavaScript中的Object对象学习教程
May 20 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
JS中如何实现复选框全选功能
Dec 19 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
react-redux中connect()方法详细解析
May 27 Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 Javascript
vue实现单一筛选、删除筛选条件
Oct 26 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
用PHP制作静态网站的模板框架(三)
2006/10/09 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
简单的js表单验证函数
2013/10/28 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
jquery 手势密码插件
2017/03/17 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
2020/05/20 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
vue-cli3 引入 font-awesome的操作
2020/08/11 Javascript
详解Vue的mixin策略
2020/11/19 Vue.js
python re正则表达式模块(Regular Expression)
2014/07/16 Python
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
python对数组进行反转的方法
2015/05/20 Python
Python爬取APP下载链接的实现方法
2016/09/30 Python
python实现飞机大战微信小游戏
2020/03/21 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
生物化工专业个人自荐信
2013/09/26 职场文书
药品质量检测应届生求职信
2013/11/14 职场文书
车间操作工岗位职责
2013/12/19 职场文书
基层党组织整改方案
2014/10/25 职场文书
推荐信范文大全
2015/03/27 职场文书
专职安全员岗位职责
2015/04/11 职场文书