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 相关文章推荐
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 Javascript
微信小程序动态添加分享数据
Jun 14 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
Jul 14 Javascript
深入解析Vue 组件命名那些事
Jul 18 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 Javascript
javascript History对象原理解析
Feb 17 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 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中动态显示签名和ip原理
2007/03/28 PHP
php 解压rar文件及zip文件的方法
2014/05/05 PHP
功能强大的php分页函数
2016/07/20 PHP
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
js格式化时间小结
2014/11/03 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
python实现图片中文字分割效果
2019/07/22 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
python 实现的车牌识别项目
2021/01/25 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
h5封装下拉刷新
2020/08/25 HTML / CSS
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
晚会开幕词范文
2016/03/04 职场文书
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript
python中tkinter复选框使用操作
2021/11/11 Python
HTTP中的Content-type详解
2022/01/18 HTML / CSS