理解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 相关文章推荐
jquery中eq和get的区别与使用方法
Apr 14 Javascript
jQuery类选择器用法实例
Dec 23 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
用原生js统计文本行数的简单示例
Aug 19 Javascript
JS原型链 详解及示例代码
Sep 06 Javascript
清除输入框内的空格
Dec 21 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
Javascript模块化机制实现原理详解
Apr 02 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
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
php 文章采集正则代码
2009/12/28 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
vue实现购物车加减
2020/05/30 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
Python pickle模块用法实例分析
2015/05/27 Python
详解python单例模式与metaclass
2016/01/15 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
信用社实习人员自我鉴定
2013/09/20 职场文书
元旦获奖感言
2014/03/08 职场文书
企业标语口号
2014/06/10 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
三孔导游词
2015/02/05 职场文书
个人总结格式范文
2015/03/09 职场文书
大学生入党群众意见书
2015/06/02 职场文书
三八妇女节致辞
2015/07/31 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
小学教师教育随笔
2015/08/14 职场文书
给校长的建议书范文
2015/09/14 职场文书
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL