理解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 陷阱 window全局对象
Nov 26 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 Javascript
Vue实现购物车功能
Apr 27 Javascript
深入理解Angularjs中$http.post与$.post
May 19 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 Javascript
使用vuex存储用户信息到localStorage的实例
Nov 11 Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 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数学运算
2011/12/30 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
php进程间通讯实例分析
2016/07/11 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
Yii框架应用组件用法实例分析
2020/05/15 PHP
js函数的引用, 关于内存的开销
2012/09/17 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
Bootstrap进度条实现代码解析
2017/03/07 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
JS实现判断图片是否加载完成的方法分析
2018/07/31 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
python多进程并发demo实例解析
2019/12/13 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
python 写一个性能测试工具(一)
2020/10/24 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
戴森美国官网:Dyson美国
2016/09/11 全球购物
彪马日本官网:PUMA日本
2019/01/31 全球购物
用Python写一个for循环的例子
2016/07/19 面试题
关于感恩的演讲稿500字
2014/08/26 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
任命书怎么写
2015/03/02 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书