理解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 05 Javascript
javascript 函数及作用域总结介绍
Nov 12 Javascript
详解JavaScript树结构
Jan 09 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
jQuery实现的简单在线计算器功能
May 11 jQuery
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
JavaScript原型链与继承操作实例总结
Aug 24 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 Javascript
layui实现数据表格自定义数据项
Oct 26 Javascript
如何在selenium中使用js实现定位
Aug 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
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
session 的生命周期是多长
2006/10/09 PHP
在服务端进行目录建立、删除,文件上传、删除的过程的php代码
2008/09/10 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
js实现缓动动画
2020/11/25 Javascript
Python实现的求解最小公倍数算法示例
2018/05/03 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
python 根据时间来生成唯一的字符串方法
2019/01/14 Python
python实现AES加密和解密
2019/03/27 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
请编程遍历页面上所有 TextBox 控件并给它赋值为 string.Empty
2015/12/03 面试题
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
公司营业员的自我评价
2014/03/04 职场文书
大学活动总结格式
2014/04/29 职场文书
项目经理任命书内容
2014/06/06 职场文书
车队安全员岗位职责
2015/02/15 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
MySQL 如何设计统计数据表
2021/06/15 MySQL
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js