理解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 相关文章推荐
js 小贴士一星期合集
Apr 07 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
js实现数组转换成json
Jun 26 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
js 事件的传播机制(实例讲解)
Jul 20 Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
javaScript日期工具类DateUtils详解
Dec 08 Javascript
微信小程序中为什么使用var that=this
Aug 27 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 过滤页面中的BOM(实现代码)
2013/06/29 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
js二级地域选择的实现方法
2013/06/17 Javascript
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
用Python写的图片蜘蛛人代码
2012/08/27 Python
Python操作json数据的一个简单例子
2014/04/17 Python
Python递归遍历列表及输出的实现方法
2015/05/19 Python
Python根据区号生成手机号码的方法
2015/07/08 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
keras的三种模型实现与区别说明
2020/07/03 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
土木工程毕业生推荐信
2013/10/28 职场文书
优良学风班申请材料
2014/02/13 职场文书
中国好声音华少广告词
2014/03/17 职场文书
企业节能减排实施方案
2014/03/19 职场文书
进口业务员岗位职责
2014/04/06 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
考察现实表现材料
2014/05/19 职场文书
水浒传读书笔记
2015/06/25 职场文书
2015党建工作简报
2015/07/21 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
高中生综合素质评价范文
2015/08/18 职场文书
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS