理解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下关于$.Ready()的分析
Dec 13 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
jQuery之按钮组件的深入解析
Jun 19 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
JS中微信小程序自定义底部弹出框
Dec 22 Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
js实现盒子滚动动画效果
Aug 09 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 ajax 分页类代码
2008/11/13 PHP
PHP如何抛出异常处理错误
2011/03/02 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
javascript一些不错的函数脚本代码
2008/09/10 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
js函数内变量的作用域分析
2015/01/12 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
python处理json数据中的中文
2014/03/06 Python
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
简述python Scrapy框架
2020/08/17 Python
Myholidays美国:在线旅游网站
2019/08/16 全球购物
北京银河万佳Java面试题
2012/03/21 面试题
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
酒吧创业计划书
2014/01/18 职场文书
职务任命书范本
2014/06/05 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
初中家长评语大全
2014/12/26 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
日元符号 ¥
2022/02/17 杂记