js中call()与apply()方法
菜鸟级别的选手,学习+意会。欢迎指正
参考文章
http://uule.iteye.com/blog/1158829
http://blog.csdn.net/myhahaxiao/article/details/6952321
语法规则
call方法:
语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]])
apply方法:
语法:apply([thisObj[,argArray]])
第一个参数。就是你用来替换函数中的this的那个对象。
由于apply,call是定义在Function.prototype上的,所以,只要是函数都可以调用这两个方法(原型链)。
小例子
var obj = {name : 'hanker'};function f(a,b){console.log(this.name); //hankerconsole.log(a); //1console.log(b); //2}f.call(obj,1,2);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
作用:Apply,与call的作用都是一样:更改函数内部的this,让它指向第一个参数。
上面的小例子展示了call的基本用法。前面f视为一个对象,他使用对象的call()方法,参数为3个。上面小例子中只有一个参数
我们可以粗劣的把f.call(obj);视作执行f(1,2);,有了call方法后,f函数中所有的this都指向了obj对象。
call与apply区别
var obj = {name : 'hanker'};function f(a,b){console.log(this.name); //hankerconsole.log(a); //1console.log(b); //2}f.apply(obj,[1,2]);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
两者区别在于参数的写法不同.上面的代码和小例子的代码作用一样
apply只有两个参数,而call可写多个参数。apply()方法的第一个参数为一个对象,第二个参数为一个数组或类数组对象(由以前的知识可知函数即对象,函数也有自己的方法)。
为什么要同时有 call 和 apply 方法呢?
在js中有一个只存在于函数中的类数组对象arguments.在一些情况下可以直接使用apply()方法
常用实例
<script type="text/javascript">/*定义一个人类*/function Person(name,age){this.name=name;this.age=age;}/*定义一个学生类*/function Student(name,age,grade){Person.apply(this,arguments);this.grade=grade;}//创建一个学生类var student=new Student("qian",21,"一年级");//测试alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);//name:qian age:21 grade:一年级
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
从上面例子看:
1.代码是从new Student(“qian”,21,”一年级”);这一句开始执行的。
2.用new创建了一个新对象student. 同时也调用了函数function Student(name,age,grade)。
3.运行Person.apply(this,arguments); ,可以视作Person(arguments );在apply方法里,其中 this指向了新创建的对象。于是Person函数中的this就指向了student.(arguments就是一个类数组对象)。于是Student就有了Person的属性和方法。
从某些特性来看,这就是js中的继承。
进一步利用
1.利用Math.max求数组中的最大值
Math.max 参数里面不支持Math.max([param1,param2]) 也就是数组。
可以使用
var min = Math.min.apply(null, [10,8,9,7,1]);
console.log(min);
- 1
- 2
- 1
- 2
2.判断数据类型
借用了Object.prototype.toString
var a = []; var b = function(){};var c = {};var d = null;var e = 1;console.log( Object.prototype.toString.call(a) ); //[object Array]console.log( Object.prototype.toString.call(b) ); //[object Function]console.log( Object.prototype.toString.call(c) ); //[object Object]console.log( Object.prototype.toString.call(d) ); //[object Null]console.log( Object.prototype.toString.call(e) ); //[object Number]
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
3.实现字符串的翻转
var str = 'abcdefghijk';String.prototype.reverse = function(){return Array.prototype.reverse.call(this.split('')).join('');}console.log( str.reverse() );
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
注意:上面两个运用了原型链的知识。
(function () {(function () {('pre.prettyprint code').each(function () { var lines = (this).text().split(′\n′).length;var(this).text().split('\n').length;var numbering = $('').addClass('pre-numbering').hide(); (this).addClass(′has−numbering′).parent().append((this).addClass('has-numbering').parent().append(numbering); for (i = 1; i
js中call()与apply()方法相关推荐
- JavaScript中call和apply方法
1 /* 2 在js中 call和apply常用于绑定作用域 3 */ 4 //1 简单的绑定 5 function sum(a,b){ 6 return a+b; 7 } 8 //将sum的功能绑定 ...
- 面试官问:能否模拟实现JS的call和apply方法
写于2018年11月30日,发布在掘金上阅读量近一万,现在发布到微信公众号申明原创.相对比较基础的知识,虽然日常开发可能用得比较少,各种源码中有很多call和apply,需要掌握. 前言 这是面试官问 ...
- vue 懒人_Vue.js 中的实用工具方法【推荐】
收集日常开发中常用到的一些工具方法, 包含 vue 的公用过滤器.公用指令等 (PS: 懒人养成记) 公用自定义过滤器 import Vue from 'vue' import moment from ...
- js中match、replace方法中使用正则表达式
为什么80%的码农都做不了架构师?>>> js中match.replace方法中使用正则表达式 (2012-06-29 14:23:37) 转载▼ 标签: 字符串 飞雪 正则表 ...
- JS中令人发指的valueOf方法介绍
转载自 JS中令人发指的valueOf方法介绍 彭老湿近期月报里提到了valueOf方法,兴致来了翻了下ECMA5里关于valueOf方法的介绍,如下: 15.2.4.4 Object.protot ...
- java有push方法么_[Java教程]js中push和join方法使用介绍
[Java教程]js中push和join方法使用介绍 0 2013-10-09 07:00:17 push和join方法想必大家并不陌生吧,在本文将为大家详细介绍下js中的push和join方法的使用 ...
- js中数组常用的方法总结,包括ES6
原文地址:js中数组常用的方法总结,包括ES6 1.push() 后增 push()方法可以向数组后添加一个新的元素,并返回新数组的长度. 末尾添加,返回长度,改变原数组 var a = [1,2,3 ...
- js中判断数据类型的方法
JS中判断数据类型的方法: 使用typeof操作符. 对一个值使用 typeof 操作符可能返回下列某个字符串,返回的类型都是字符串形式. (1) undefined:如果这个值未定义 (2) boo ...
- JS中 new Date() 各方法的用法
JS中 new Date() 各方法的用法 1.new Date() 参数篇 a.返回类型为国标时间, b.无参数时可以直接返回输出时的时间, c.有参数时则返回对应时间的国标时间, d.日期中间的符 ...
最新文章
- JavaSript实现调用google地图输入经度,纬度移动到该点,同时对点做标记
- java正则表达式空行_正则表达式删除空行
- evaluate函数使用无效_使用Keras和Pytorch处理RNN变长序列输入的方法总结
- 看动画学算法之:排序-快速排序
- 分析业务模型-类图(Class Diagram)(上)
- BottomupSort算法 c++代码实现
- 带你自学Python系列(九):input函数和程序循环四维导图导图
- 测测你的显示器灰阶显示
- 机器人布罩_机器人防护罩案例分析
- 剥开比原看代码03:比原是如何监听p2p端口的
- php阿拉伯语字符串,使用PHP将RTL(阿拉伯语)文本写入图像
- 克隆虚拟主机后的主机如何联网!!!!
- 【论文视频】对比学习论文综述【论文精读】
- linux免费邮件服务器,Linux 电子邮件服务器的搭建
- 【合天网安】Burpsuite简介及MIME上传绕过实例
- 孝当先健康管理品牌连锁项目说明会-南昌站圆满结束
- 窗函数法设计FIR滤波器参数特征表
- 崩溃,我带的实习生把图片直接存到了服务器上
- 微服务基础知识点学习笔记(持续更新)
- 人体解剖学标本长廊的构成、管理及其优势