理解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 相关文章推荐
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
jQuery 连续列表实现代码
Dec 21 Javascript
侧栏跟随滚动的简单实现代码
Mar 18 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
Sep 06 Javascript
纯js实现遮罩层效果原理分析
May 27 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
Vue组件中slot的用法
Jan 30 Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
js简单粗暴的发布订阅示例代码
Jan 23 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
图象函数中的中文显示
2006/10/09 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
PHP imagegrabscreen和imagegrabwindow(截取网站缩略图)的实例代码
2013/11/07 PHP
ThinkPHP控制器详解
2015/07/27 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
PHP实现基于3DES算法加密解密字符串示例
2018/08/24 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
php自动加载代码实例详解
2021/02/26 PHP
kmock javascript 单元测试代码
2011/02/06 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
TypeScript魔法堂之枚举的超实用手册
2020/10/29 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
python实现简单的tcp 文件下载
2020/09/16 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
C#的几个面试问题
2016/05/22 面试题
应用数学自荐书范文
2013/11/24 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
村干部群众路线教育活动对照检查材料
2014/10/01 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android