详解javascript中的call, apply
一些学js的同学一看到call, apply, 就蒙了, 感觉不好懂, 看的头大. 今天我们就一起来研究一下这2个东东.
彻底弄清楚它们的用法.
定义:
call, apply是函数的方法, 只有函数才有这2个方法.
作用:
call, apply主要作用是改变函数赖以执行的作用域, 简言之就是改变函数中this的指向.
用法:
fn.call(obj, args1, args2, ...); //obj是指定函数赖以执行的对象, arg1等是传给函数的参数(假如有的话)
fn.apply(obj, [args1, args2, ...]); //obj是指定函数赖以执行的对象, [arg1, ...]等是传给函数的参数数组(假如有的话)
差别:
call和apply的差别就是参数的不同.
call中的参数必须是一个个枚举出来的.
apply中的参数必须是数组或者是arguments对象
例子1:
function fn(arg){
alert(arg);
}
fn.call(this, 'hello world'); //hello world, 由于fn中没指定this, 所以此时的this指向window对象.
fn.apply(this, ['hello world']); //hello world, 由于fn中没指定this, 所以此时的this指向window对象. 例子2:
function fn(arg1, arg2, arg3){
alert(arg1 + arg2 + arg3);
}
fn.call(this, 'hello world', 'petty', 'jack'); //hello worldpettyjack
fn.apply(this, ['hello world', 'petty', 'jack']); //hello worldpettyjack 例子3:
function myFn(arg1, arg2, arg3){
alert(arg1 + arg2 + arg3);
}
function fn(arg1, arg2, arg3){
myFn.apply(this, arguments); //此处传arguments对象, 即fn中的[arg1, arg2, arg3]
}
fn('hello', 'world', '!'); //helloworld! 例子4:
var o = {
name: 'tom'
};
function fn(){
alert(this.name);
}
fn.call(this); //此时this指向window, 所以是window的name值
fn.call(o); //此时this指向o, 所以是o的name值, 'tom'
fn.apply(o); //同上 例子5:
function MyFn(name){
this.name = name;
} // 定义一个构造函数 function Fn(age, name){
this.age = age;
MyFn.call(this, name); // 理解了call的定义后, 就不难看出, 此处继承了MyFn的name属性.
//MyFn.apply(this, [name]); // 也可
} // 定义另一个构造函数 var person = new Fn(20, 'tom');
alert(person.name); // 原本Fn是没有name属性的, 但是使用了call或者apply后, 就继承了MyFn的name属性, 所以为'tom' 理解了以上的call和apply的原理后, 我们一起来模仿jquery中each函数. function each(obj, fn){
var i;
if(Object.prototype.toString.call(obj) === '[object Array]'){
for(i = 0, length = obj.length; i < length; i++){
fn.call(obj[i], i, obj[i]);
}
}
else if(typeof obj === 'object'){
for(i in obj){
if(obj.hasOwnProperty(i)){
fn.call(obj[i], i, obj[i]);
}
}
}
else{
return false;
}
} var oDiv = document.getElementsByTagName('div');
each(oDiv, function(){
this.style.background = '#ff0000'; // 所有div的背景都变为红色的了.
});
简单吧.好了, 讲解到此为止.
详解javascript中的call, apply的更多相关文章
- 【转】详解JavaScript中的this
ref:http://blog.jobbole.com/39305/ 来源:foocoder 详解JavaScript中的this JavaScript中的this总是让人迷惑,应该是js众所周知的坑 ...
- 详解javascript中的this对象
详解javascript中的this对象 前言 Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的 ...
- 详解 javascript中offsetleft属性的用法(转)
详解 javascript中offsetleft属性的用法 转载 2015-11-11 投稿:mrr 我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...
- (转载)详解Javascript中prototype属性(推荐)
在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...
- 详解JavaScript中的原型
前言 原型.原型链应该是被大多数前端er说烂的词,但是应该还有很多人不能完整的解释这两个内容,当然也包括我自己. 最早一篇原型链文章写于2019年07月,那个时候也是费了老大劲才理解到了七八成,到现在 ...
- 【转】详解JavaScript中的异常处理方法
有三种类型的编程错误:(1)语法错误和(2)运行时错误(3)逻辑错误:语法错误: 语法错误,也被称为解析错误,在编译时进行传统的编程语言,并出现在JavaScript解释时. 例如,下面一行将导致一个 ...
- 详解JavaScript中的Event Loop(事件循环)机制
前言 我们都知道,javascript从诞生之日起就是一门单线程的非阻塞的脚本语言.这是由其最初的用途来决定的:与浏览器交互. 单线程意味着,javascript代码在执行的任何时候,都只有一个主线程 ...
- 详解JavaScript中的arc的方法
今天说说JavaScript在网页中画圆的函数arc! 一.arc所需要的参数设置 1 arc(x, y, radius, startAngle, endAngle, counterclockwise ...
- 详解JavaScript中的this
JavaScript中的this总是让人迷惑,应该是js众所周知的坑之一. 个人也觉得js中的this不是一个好的设计,由于this晚绑定的特性,它可以是全局对象,当前对象,或者…有人甚至因为坑大而不 ...
随机推荐
- libxml2 crash
在 xmlParseFile 就那么挂在里面了 只有一个dll 和一堆头文件 没法调试 有如下猜想(感谢fb 和 array) 这是一个unhandled exception可以catch看看 也许是 ...
- 引擎设计跟踪(九.8) Gizmo helper实现与多国语言
最近把gizmo helper的绘制做好了. 1.为了复用代码,写了utility来创建sphere, cube, cylinder, plane, ring(line), circle(solid) ...
- 一个利用window.name实现的windowStorage
//key:value|key:value var windowStorage = { _inited: false, _data: {}, init: function(str) { var tmp ...
- 如何做到尽可能不使用庞大的jQuery
jQuery 是现在最流行的 JavaScript 工具库. 据统计,目前全世界 57.3% 的网站使用它.也就是说,10 个网站里面,有 6 个使用 jQuery.如果只考察使用工具库的网站,这个比 ...
- Rust: move和borrow
感觉Rust官方的学习文档里关于ownship,borrow和lifetime介绍的太简略了,无法真正理解这些语法设计的原因以及如何使用(特别是lifetime).所以找了一些相关的blog来看,总结 ...
- SEO网站优化方案
学习许多前辈的经验,看到一些比较有价值的seo优化方案,特记录一下,对照自己的操作之路,新人也可借鉴一二,下面是从卢松松博客看到的文章.高手直接跳过,请勿喷水. 一个完整的SEO优化方案主要由四个小组 ...
- nested pop animation can result in corrupted navigation bar
nested pop animation can result in corrupted navigation barFinishing up a navigation transition in a ...
- iOS第三方(ActionSheet)-JTSActionSheet
外观和系统的基本一样 github地址:https://github.com/jaredsinclair/JTSActionSheet 百度云下载: http://pan.baidu.com/s/1q ...
- HDU 2159 FATE (二维完全背包
FATE http://acm.hdu.edu.cn/showproblem.php?pid=2159 Problem Description 最近xhd正在玩一款叫做FATE的游戏,为了得到极品装备 ...
- java 如何连接MySql数据库
利用jdbc方式连接数据库. 1.添加mysql驱动jar包 我用的是这个驱动包mysql-connector-java-5.1.26-bin.jar 添加方式: 2.加载MySql驱动类 priva ...