理解Javascript的call、apply


Posted in Javascript onDecember 16, 2015

call 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法.

注意:该函数的语法与 apply() 方法的语法几乎完全相同,唯一的区别在于,apply()方法接受的是一个参数数组,而 call()方法接受的是一系列参数列表。

了解完这两个方法的概念后,我们来一步一步理解他们的应用.

改变方法内this的指向
我们先来看下面这个例子

var name = "编程的人";
var age = 1;
var person = {
name:"公众号:bianchengderen",
age:20
}
function say(){
console.log("我叫:"+this.name+",年龄:"+this.age)
}
say();// 我叫: 编程的人,年龄: 1
say.call(person);//年龄:20

这两种调用执行的方式不一样,他们的结果也不一样,不一样在于say方法里面的this指向了不同的对象,第一次执行指向的是window,而我们以call方式执行,将say方法里面的this指向了person对象.
这是不是有点冒充别人的感觉.那我们这样有什么作用了?当然自己可以多多想想,到底能做什么! 我们继续往下面走.

实现继承机制
继承,这是高级面向对象的一种特性,用call我们可以将JAVASCRIPT有这种特点.
在看下面这个例子之前,必须好好理解上面的例子.

function Person(){
this.name = "编程的人";
this.age = 20;
}
function Student(){
Person.call(this);
this.school = "地球";
}
var student = new Student();
//下面打印出来: 编程的人,20,地球
console.log(student.name,student.age,student.school);

在这个例子里,Student函数继承了Person的name和age属性,就是通过Person.call(this)来实现,理解上面的例子后,应该是不难理解的.所以Student即拥有了Person的特点,又有自己的个性,比如这个this.school.

在这里,我们没有涉及到加入参数的传递,是方便大家的理解,需要加入参数传递,大家可以敲代码试一试,看看效果怎么样!

我们就先讲这两个例子吧,之后再进行深入学习。

Javascript 相关文章推荐
关于setInterval、setTimeout在jQuery中的使用注意事项
Sep 28 Javascript
JavaScript将字符串转换成字符编码列表的方法
Mar 19 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 Javascript
javascript实现网站加入收藏功能
Dec 16 #Javascript
javascript实现无缝上下滚动特效
Dec 16 #Javascript
js实现将选中内容分享到新浪或腾讯微博
Dec 16 #Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 #Javascript
Sublime Text 3常用插件及安装方法
Dec 16 #Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 #Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 #Javascript
You might like
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
JSONP基础知识详解
2017/03/19 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
Python编程pygal绘图实例之XY线
2017/12/09 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
Python编程中NotImplementedError的使用方法
2018/04/21 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
JAVA高级程序员面试题
2013/09/06 面试题
司机岗位职责
2013/11/15 职场文书
商务会议邀请函
2014/01/09 职场文书
开业庆典答谢词
2014/01/18 职场文书
安全标语大全
2014/06/10 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
单独二胎证明
2015/06/24 职场文书
小学生读书笔记
2015/07/01 职场文书
尝试使用Python爬取城市租房信息
2022/04/12 Python
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js