理解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 相关文章推荐
可缩放Reloaded-一个针对可缩放元素的复用组件
Mar 10 Javascript
jquery判断单个复选框是否被选中的代码
Sep 03 Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
js实现无缝滚动图
Feb 22 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
浅析从vue源码看观察者模式
Jan 29 Javascript
微信小程序获取用户openid的实现
Dec 24 Javascript
JavaScript实现更换背景图片
Oct 18 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
PR值查询 | PageRank 查询
2006/12/20 PHP
PHP编译安装中遇到的两个错误和解决方法
2014/08/20 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
php微信开发之谷歌测距
2018/06/14 PHP
PHP日期和时间函数的使用示例详解
2020/08/06 PHP
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
jquery.validate的使用说明介绍
2013/11/12 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
2017/12/13 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
基于Python的身份证号码自动生成程序
2014/08/15 Python
Python 3中的yield from语法详解
2017/01/18 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
基于Python绘制个人足迹地图
2020/06/01 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
如何开启linux的ssh服务
2013/06/03 面试题
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
食堂标语大全
2014/06/11 职场文书
提档介绍信范文
2015/10/22 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫
muduo TcpServer模块源码分析
2022/04/26 Redis
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript