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 原型与继承说明
Jun 09 Javascript
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
vue中div禁止点击事件的实现
Apr 02 Vue.js
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 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面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
什么是JavaScript
2009/08/13 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
javascript 使td内容不换行不撑开
2012/11/29 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
Python使用MONGODB入门实例
2015/05/11 Python
Python基础练习之用户登录实现代码分享
2017/11/08 Python
python学生信息管理系统
2018/03/13 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
Python3读写ini配置文件的示例
2020/11/06 Python
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
Ibatis的核心配置文件都有什么
2014/09/08 面试题
大学生找工作推荐信范文
2013/11/28 职场文书
《小鹰学飞》教学反思
2014/04/23 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
干部对照检查材料范文
2014/08/26 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
决心书格式及范文
2019/06/24 职场文书