JavaScript中的apply,call与this的纠缠
可选。要用作 this 对象的对象。
argArray
可选。要传递到函数的一组参数。
可选。将作为当前对象使用的对象。
arg1, arg2, , argN
可选。将被传递到该方法的参数列表。
function callMe(arg1, arg2){
var s = ""; s += "this value: " + this;
s += "<br />";
for (i in callMe.arguments) {
s += "arguments: " + callMe.arguments[i];
s += "<br />";
}
return s;
} document.write("Original function: <br/>");
document.write(callMe(1, 2));
document.write("<br/>"); document.write("Function called with apply: <br/>");
document.write(callMe.apply(3, [ 4, 5 ]));
document.write(callMe.call(3, 4, 5 ));
// Output: // Original function: // this value: [object Window] // arguments: 1 // arguments: 2 // Function called with apply: // this value: 3 // arguments: 4 // arguments: 5
第一个用apply的:定义:调用函数,并用指定对象替换函数的 this 值
调用函数callMe,使用指定的对象3替换callMe函数中的this,这时候这里的this就从之前的[object Window]变成了3。
第一个用call的:定义:调用一个对象的方法,用另一个对象替换当前对象。
调用对象callMe的方法,用另一个对象3替换callMe中的对象。
从这些结果分析中可以看出,这两者都是使用指定的对象中的对象或者指定的值改变了对象中的this。
也可以说:是一个函数中的对象(this)"劫持"了另一个要执行函数中的对象(this)。
其实这里引出了一个问题:this到底是啥?为何如此重要的一次次来费劲心思的来改变它的指向?
传送门:javascript技术难点(三)之this、new、apply和call详解(这里面说的很棒,绝对够你喝一壶)
(2)实例:
function zqz(a,b){
return alert(a+b);
} function zqz_1(a,b){ zqz.apply(zqz_1,[a,b])
} zqz_1(1,2) //->3
function add(a, b)
{
alert(a + b);
}
function sub(a, b)
{
alert(a - b);
}
add.call(sub, 3, 1); //
function zqz(a,b){
this.name=a;
this.age=b;
alert(this.name+" "+this.age);
} function zqz_1(a,b){ zqz.apply(this,[a,b]) //我们亦可以这么写 zqz.apply(this,arguments)
} zqz_1("Nic",12) //Nic 12
<input type="text" id="myText" value="input text"> function Obj(){
this.value="对象!";
} var value="global 变量"; function Fun1(){
alert(this.value);
} Fun1(); //global 变量 Fun1.call(window); //global 变量 Fun1.call(document.getElementById('myText')); //input text Fun1.call(new Obj()); //对象! Fun1(); //global 变量
function ClassA(){
this.data = "a";
this.funA = function() {
console.log(this.data);
}
} function ClassB(){
this.data = "b";
this.funB = function(){
console.log(this.data);
}
} //ExtendClassAClassB函数就具有了属性data与方法funA或funB(占时不知道)
function ExtendClassAClassB(){
ClassA.call(this);
ClassB.call(this);
} window.onload = function(){
var ecc = new ExtendClassAClassB();
ecc.funA();
ecc.funB();
}
结果:b
b
问题:
为什么是b?
我们可以看到调用的时候,this的指向
为什么两个都是b?
ClassB.call(this) 将 ClassA.call(this)的属性与方法覆盖。最后只有ClassB的属性与方法。
例二:这个看上去更像java里面的继承感觉
function ClassA(){
this.name = 'zqz';
this.fit = function(){
console.log(this.name);
}
} function ClassBExtendClassA(){
ClassA.call(this);
this.job = 'coder';
} var cbc = new ClassBExtendClassA();
cbc.fit();
console.log(cbc.constructor) //对象的引用
console.log(cbc.job);
结果:zqz
function ClassBExtendClassA(){
ClassA.call(this);
this.job = 'coder';
}
coder
JavaScript中的apply,call与this的纠缠的更多相关文章
- javascript中call,apply,bind的用法对比分析
这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们. 关于call,apply,bind这三个函数的用法,是学习java ...
- JavaScript中的apply和call函数详解(转)
每个JavaScript函数都会有很多附属的(attached)方法,包括toString().call()以及apply().听起来,你是否会感到奇怪,一个函数可能会有属于它自己的方法,但是记住,J ...
- JavaScript中call,apply和prototype
[TOC] call()方法 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 如果没有提供 thi ...
- JavaScript中的apply和call函数详解
本文是翻译Function.apply and Function.call in JavaScript,希望对大家有所帮助 转自“http://www.jb51.net/article/52416.h ...
- javascript中的apply,call,bind详解
apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. Jav ...
- JavaScript中的apply()和call()
可以将call()和apply()看做是某个对象的方法,通过调用方法的形式来间接调用函数. call()和apply()的第一个实参是要调用函数的母对象,它是调用上下文,在函数体内通过this来获得对 ...
- Javascript中的apply、call、bind
apply . call .bind 三者都是用来改变函数的this对象的指向的: apply . call .bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文: apply . ...
- javascript中bind,apply,call的相同和不同之处
javasctipt中bind,apply,call的相同点是: 1,都是用来改变this的指向; 2,都可以通过后续参数进行传参; 3,第一个参数都是指定this要指向的对象; 不同点: 1,调用方 ...
- Javascript中的apply与call详解
JavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别. 一.方法定义 1.call 方法 语法:call([thisObj[,arg1[, arg2[, [,.arg ...
随机推荐
- 【AR实验室】mulberryAR : ORBSLAM2+VVSION
本文转载请注明出处 —— polobymulberry-博客园 0x00 - 前言 mulberryAR是我业余时间弄的一个AR引擎,目前主要支持单目视觉SLAM+3D渲染,并且支持iOS端,但是该引 ...
- ASP.NET Aries 入门开发教程5:自定义列表页工具栏区
前言: 抓紧时间,继续写教程,因为发现用户期待的内容,都在业务处理那一块. 不得不继续勤劳了. 这节主要介绍工具栏区的玩法. 工具栏的默认介绍: 工具栏默认包括5个按钮,根据不同的权限决定显示: 添加 ...
- Android 获取meta-data中的数据
在 Android 的 Mainfest 清单文件中,Application,Activity,Recriver,Service 的节点中都有这个的存在.很多时候我们可以通过 meta-data 来配 ...
- javascript匹配各种括号书写是否正确
今天在codewars上做了一道题,如下 看上去就是验证三种括号各种嵌套是否正确书写,本来一头雾水,一种括号很容易判断, 但是三种怎么判断! 本人只是个前端菜鸟,,不会什么高深的正则之类的. 于是,在 ...
- MAC Osx PHP安装指导
php.ini的位置 Mac OS X中没有默认的php.ini文件,但是有对应的模版文件php.ini.default,位于/private/etc/php.ini.default 或者说 /etc ...
- 【Oracle 集群】ORACLE DATABASE 11G RAC 知识图文详细教程之集群概念介绍(一)
集群概念介绍(一)) 白宁超 2015年7月16日 概述:写下本文档的初衷和动力,来源于上篇的<oracle基本操作手册>.oracle基本操作手册是作者研一假期对oracle基础知识学习 ...
- Linux之搭建自己的根文件系统
Hi!大家好,我是CrazyCatJack.又和大家见面了.今天给大家带来的是构建Linux下的根文件系统.希望大家看过之后都能构建出符合自己需求的根文件系统^_^ 1.内容概述 1.构造过程 今天给 ...
- Git(1)
安装Git 完毕 (在开始菜单打开的话,打开的不是你想要的路径,切换路径很麻烦) 1.D盘新建 GitTest 文件夹 2.打开GitTest , 在空白的地方右键, 3.单击 Git Bash He ...
- CentOS:ECDSA host key "ip地址" for has changed and you have requested strict checking(转)
原文地址:http://blog.csdn.net/ausboyue/article/details/52775281 Linux SSH命令错误:ECDSA host key "ip地址& ...
- sublime text 3 + python配置,完整搭建及常用插件安装
四年的时间,一直使用EmEditor编辑器进行Python开发,之前是做面向过程,只需要将一个单独的py文件维护好即可,用着也挺顺手,但是最近在做面向对象的开发,不同的py文件中相互关联较多,感觉单纯 ...