理解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 相关文章推荐
用JavaScript编写COM组件的步骤
Mar 17 Javascript
jQuery 入门讲解1
Apr 15 Javascript
jQuery不使用插件及swf实现无刷新文件上传
Dec 08 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
基于JavaScript实现弹幕特效
Aug 27 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
详解一个基于套接字实现长连接的express
Mar 28 Javascript
js实现计时器秒表功能
Dec 16 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 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
自定义php类(查找/修改)xml文档
2013/03/26 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
Python模拟百度登录实例详解
2016/01/20 Python
Python 文件操作的详解及实例
2017/09/18 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
Jupyter Notebook 实现正常显示中文和负号
2020/04/24 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
HTML5通用接口详解
2016/06/12 HTML / CSS
HTML5中使用json对象的实例代码
2018/09/10 HTML / CSS
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
自荐信怎么写好
2013/11/11 职场文书
合作经营协议书范本
2014/04/17 职场文书
公司外出活动方案
2014/08/14 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
撤诉申请怎么写
2015/05/19 职场文书
初中美术教学反思
2016/02/17 职场文书