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 相关文章推荐
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
JS实现图片切换特效
Dec 23 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自动更新新闻DIY
2006/10/09 PHP
打造计数器DIY三步曲(下)
2006/10/09 PHP
深入了解php4(2)--重访过去
2006/10/09 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
python自然语言编码转换模块codecs介绍
2015/04/08 Python
python操作字典类型的常用方法(推荐)
2016/05/16 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
C语言中break与continue的区别
2012/07/12 面试题
vue实现倒计时功能
2021/03/24 Vue.js
高校教师思想汇报
2014/01/11 职场文书
教师三严三实学习心得体会
2014/10/11 职场文书
车辆年检委托书范本
2014/10/14 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
聘任书的格式及模板
2019/10/28 职场文书
python爬虫框架feapde的使用简介
2021/04/20 Python