Js中call apply函数以及this用法
this介绍:
C#里this关键字的意义比较确定的。JavaScript的this关键字,随着函数使用场合不同,this的值会发生变化,感觉用法比较混乱,所以,现在是有必要整理一下的时刻了!
总结一个原则:在js里面,this指针代表的是执行当前代码的对象的所有者。
1、和c#类似的纯粹函数调用:
function test() {
this.x = 1;
alert(x);
}
test();//1
其实这里的this就是全局变量。看下面的例子就能很好的理解这里的this就是全局对象Global。
var x = 1;
function test() {
alert(this.x);
}
test();//1 var x = 1;
function test() {
this.x = 0;//修改了全局变量,this就是全局对象Global
}
test();
alert(x);//0
2、作为方法调用,那么this就是指它的上级对象。
function test() {
alert(this.x);//this是指它的上级对象,这里的上级是调用该函数的对象p;
}
var p = {};
p.x = 1;
p.m = test;
p.m(); //1 ;这里m是test方法,p是this,输出的是p.x;
3、作为构造函数调用:所谓构造函数,就是用new生成一个新的对象。这时,这个this就是指这个对象。
function test() {
this.x = 1;
}
var p = new test();
alert(p.x);//1;这里也可以理解为其上级对象是一个构造函数p;
4、apply调用this指向的是apply中的第一个参数。
var x = 0;
function test() {
alert(this.x);
}
var p = {};//定义一个对象
p.x = 1;
p.m = test;
p.m.apply(); //0;当apply没有参数时,表示为全局对象。所以值为var x = 0;
p.m.apply(p);//1;p继承了test,但是this还是指向其上级对象p;
Call()与apply()两个方法介绍:
它们的作用都是将函数绑定到另外一个对象上去运行,两者仅在定义参数方式有所区别:
call方法: call(thisObj,[arg1,arg2…] )
call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
apply方法: apply(thisObj,argArray)
如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作thisObj, 并且无法被传递任何参数。
ECMAScript规范给所有函数都定义了Call()与apply()两个方法,call与apply的第一个参数都是需要调用的函数对象,在函数体内这个参数就是this的值,剩余的参数是需要传递给函数的值。二者区别在第二个参数上,call后面除了第一个参数是用来改变函数的this作用域之外,后面加几个参数,则函数就有几个参数,而apply总共就2个参数,第一个参数与call一样,第二个参数是一个数组,里面有几个值,则在执行函数时的参数就有几个,例子如下:
var fun = function(param1,param2){};
fun.call(window,1,2);
fun.apply(window,[1,2]);//这两个是等价的!
下面,我们看看二者都怎么用:
1.带参数和不带参数的区别
function main(){
var str = "hello";
console.log(str);
}
main.call();//hello;当call/apply没有参数时,表示为全局对象。所以值为hello;
2.利用call调用原型中的方法:
// 写法1
var arr1 = ["a1","b2","c3"];
var value1 = arr1.shift();//shift把数组的第一个元素从其中删除,并返回第一个元素的值
console.log(value1); //a1 //写法2
var arr2 = ["a1","b2","c3"];
var value2 = Array.prototype.shift.call(arr2); //a1;调用原型prototype中的shift方法 console.log(value2);
console.log是一个打印js数组和对像的函数,大家用的最多查看js输出是alert,但是alert只能弹string或者是int,console.log可以在浏览器的控制台输出结果!很好的调试工具!
3.利用call模仿继承:
<script>
function fun1() {
this.a = 123;
this.add = function () {alert(this.a );}
}
function fun2() {
this.a = 456;
}
var f1=new fun1()
var f2=new fun2()
var a = f1.add.call(f2); // a输出的是456,在函数体内参数f2就是this的值,像f2继承f1
</script>
这里就是把f1的方法拿给f2来使用,f2便可以使用f1中所有的方法,这就像高级语言中继承的概念(感觉像f2继承f1)。
4.使用多个call实现多继承:
function fun1() {
this.add = function () { return this.a }
}
function fun2() {
this.sub = function () { return this.a-this.b }
}
function fun3() {
this.a = 10;
this.b = 2;
fun1.call(this);//this是当前对象fun3,它继承了fun1和fun2
fun2.call(this);//作用是把fun1和fun2的方法“继承”给fun3
}
var f3 = new fun3()
alert(f3.add());
alert(f3.sub());//如此,想要继承谁就可以继承谁
上面用到一些数组的方法,这里整理一下:
Array 对象方法:
concat()
连接两个或更多的数组,并返回结果
join()
把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔(,)
pop()
删除并返回数组的最后一个元素
push()
向数组的末尾添加一个或更多元素,并返回新的长度
reverse()
颠倒数组中元素的顺序
shift()
删除并返回数组的第一个元素
slice()
从某个已有的数组返回选定的元素slice(start,end):返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。请注意,该方法并不会修改数组,而是返回一个子数组。如果想删除数组中的一段元素,应该使用方法 Array.splice()
sort()
对数组的元素进行排序
splice()
删除元素,并向数组添加新元素:array.splice(index,howmany,item1,.....,itemX)
arr.splice(2,0,"William")
index : 整数,规定添加/删除项目的位置(从0开始),使用负数可从数组结尾处规定位置。
howmany : 要删除的项目数量,如果设置为 0,则不会删除项目插入,1替换。
item1, ..., itemX : 可选,向数组添加的新项目。
toString()
把数组转换为字符串,并返回结果
unshift()
arrayObject.unshift(newelement1,newelement2,....,newelementX):向数组的开头添加一个或更多元素,并返回新的长度
valueOf()
返回数组对象的原始值
Js中call apply函数以及this用法的更多相关文章
- 详解js中的apply与call的用法
前言 call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向.call 和 apply二者的作用完全一样,只是接受 ...
- js中的apply与call的用法与区别
call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向.call 和 apply二者的作用完全一样,只是接受参数的 ...
- JS中Array数组的三大属性用法
原文:JS中Array数组的三大属性用法 Array数组主要有3大属性,它们分别是length属性.prototype属性和constructor属性. JS操作Array数组的方法及属性 本文总结了 ...
- underscore.js中的节流函数debounce及trottle
函数节流 throttle and debounce的相关总结及想法 一开始函数节流的使用场景是:放止一个按钮多次点击多次触发一个功能函数,所以做了一个clearTimeout setTimeou ...
- 深入理解js中的apply、call、bind
概述 js中的apply,call都是为了改变某个函数运行时的上下文环境而存在的,即改变函数内部的this指向. apply() apply 方法传入两个参数:一个是作为函数上下文的对象,另外一个是作 ...
- JS中关于把函数作为另一函数的参数的几点小总结
//JS中关于把函数作为函数的参数来传递的问题的小总结//第一,最简单的形式无参函数,直接形式函数的函数名放到括号中,再在执行部分这个函数即可.//当然调用时要穿另一个真正的定义好的函数/*funct ...
- js中的回调函数的理解和使用方法
js中的回调函数的理解和使用方法 一. 回调函数的作用 js代码会至上而下一条线执行下去,但是有时候我们需要等到一个操作结束之后再进行下一个操作,这时候就需要用到回调函数. 二. 回调函数的解释 因为 ...
- js中如何在一个函数里面执行另一个函数
1.js中如何在函数a里面执行函数b function a(参数c){ b(); } function b(参数c){ } 方法2: <script type="text/javasc ...
- JavaScript -- 时光流逝(七):js中的全局函数
JavaScript -- 知识点回顾篇(七):js中的全局函数 全局函数可用于所有内建的 JavaScript 对象. (1) encodeURI():把字符串编码为 URI. <script ...
随机推荐
- Android入门——电话拨号器和4种点击事件
关于HelloWorld为,电话拨号程序还AndroidA入门demo,从这个样例我们要理清楚做安卓项目的思路. 大体分为三步: 1.理解需求,理清思路 2.设计UI 3.代码实现 电话拨号器 1. ...
- linux_coom _ Linux文件比较,文本文件的交集、差集与求差
交集和差集操作在集合论相关的数学课上经常用到,不过,在Linux下 对文本进行类似的操作在某些情况下也很有用. comm命令 comm命令可以用于两个文件之间的 比较,它有一些选项可以用来调整输出,以 ...
- hdu 5073 Galaxy(2014acm鞍山亚洲分部 D)
主题链接:http://acm.hdu.edu.cn/showproblem.php? pid=5073 Galaxy Time Limit: 2000/1000 MS (Java/Others) ...
- 【高德地图API】如何制作自己的旅游地图?
原文:[高德地图API]如何制作自己的旅游地图? “旅行的梦想并不遥远,只要一颗流浪四方的心.”——唐人立. 最早认识唐人立的时候,他还是大二的学生.他独自完成了“南京20年规划地图”.几年前,他完成 ...
- Java初认识--环境搭建及基本数据类型
一.JAVA语言的环境搭建 1.JRE(Java Runtime Environment):Java运行环境. 它包括Java虚拟机和Java程序所需的核心类库等. 2.JDK(Java Develo ...
- Asp.net MVC + EF + Spring.Net 项目实践(一)
准备用几篇文章来做一个MVC的例子,为了给新同事做参考,也为自己做个知识储备. 首先,用VS2013创建一个空白解决方案StudentManageSystem,然后添加一个MVC应用程序(可参考ASP ...
- 采用malloc分别分配2KB个人空间,然后,realloc调整到6KB、1MB、3MB、10MB场地,分别这五内存“A”、“B”、“C”、“D”、“E”灌装
#include<stdio.h> #include<stdlib.h> #include<string.h> #include<malloc.h> i ...
- 高性能双端js模板
高性能双端js模板(新增filter)---simplite simplite是一款js实现的模板引擎,它能够完成浏览器端js模版和node服务器端js模板的数据渲染. 渲染性能十分突出. 支持浏览器 ...
- Linux下php+mysql+nginx编译搭建(一)
之前一直都是一键搭建的webserver,可是一键搭建的环境相对来说都是比較老的.假设要用比較新的环境,特别是正式server,就必须自己手动编译搭建了(下面搭建基于linux centos6.5 3 ...
- 多线程学习之BlockingQueue
前言: 在新增的Concurrent包中,BlockingQueue很好的解决了多线程中,如何高效安全“传输”数据的问题.通过这些高效并且线程安全的队列 类,为我们快速搭建高质量的多线程程序带来极大的 ...